使用 ECMAScript 6

Posted 2023-02-22

【中文标题】使用 ECMAScript 6

【英文标题】：Using ECMAScript 6

【发布时间】：2014-07-23 09:17:54

【问题描述】：

我正在寻找一种在浏览器控制台中运行 ECMAScript 6 代码的方法，但大多数浏览器不支持我正在寻找的功能。例如，Firefox 是唯一支持箭头功能的浏览器。

有没有办法（扩展、用户脚本等）我可以在 Chrome 上运行这些功能？

【参考方案1】：

在 Chrome 中，大部分 ES6 功能都隐藏在名为“Experimental javascript features”的标志后面。访问chrome://flags/#enable-javascript-harmony，启用这个标志，重启Chrome，你会得到many new features。

箭头函数是not yet implemented in V8/Chrome，所以这个标志不会“解锁”箭头函数。

由于箭头函数是一种语法变化，如果不改变 JavaScript 的解析方式，就不可能支持这种语法。如果您喜欢使用 ES6 进行开发，那么您可以编写 ES6 代码并使用 ES6-to-ES5 编译器生成与所有现有（现代）浏览器兼容的 JavaScript 代码。

例如，请参阅https://github.com/google/traceur-compiler。在撰写本文时，它支持all of the new syntax features of ES6。连同此答案顶部提到的标志，您将非常接近所需的结果。

如果你想直接从控制台运行 ES6 语法，那么你可以尝试覆盖控制台的 JavaScript 求值器（这样 Traceur 预处理器在执行代码之前运行）。如果您喜欢这样做，请查看this answer，了解如何修改开发者工具的行为。

【讨论】：

还有一个ScratchJS，Chrome的开发工具：chrome.google.com/webstore/detail/scratch-js/…

箭头函数现已在最新版本的 chrome 中完全实现。不过，这个技巧对于其他 ES6 特性仍然有用。例如class 语法。

这个答案现在大部分已经过时了。

@Gothdo 细节确实已经过时（箭头函数现在得到了很好的支持），但启用实验性 JS 函数的一般建议仍然正确。例如，look-behinds in regular expression 默认仍处于禁用状态。如果设置了 --enable-javascript-harmony 标志，以下将返回 false：/(?<!a)b/.test('ab')（如果未设置标志，则抛出下一个错误：“Uncaught SyntaxError: Invalid regular expression: /(?

它并没有过时，对于使用旧版本 Windows 的客户端，arrow_functions 也有同样的问题。旗帜成功了，谢谢！

【参考方案2】：

Babel 是试用 ES6 的绝佳转译器。您可以在他们网站的“试用”部分的浏览器中运行 ES6。它的功能类似于 jsfiddle。

例如箭头：

let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);

displays the result2。

Babel “transpiles”，即将 ES6 翻译成 ES5 javascript，可以通过当前的浏览器技术运行。你可以通过npm install -g babel 安装 Babel。安装后，您可以将上面的箭头示例保存到文件中。假设我们将文件称为“ES6.js”。假设您已经安装了节点，然后在命令行管道输出到节点：

babel ES6.js | node

您将看到输出2。您可以使用以下命令永久保存翻译后的文件：

babel ES6.js --out-file output.js

output.js “转译”：

"use strict";

var add = function (x, y) 
  return x + y;
;

var result = add(1, 2);

console.log(result);

当然可以在任何现代浏览器中运行。

Example using classes

ES6 是一个快速移动的目标。请参阅Compatibility Table 以查找转译器支持的功能，例如 Traceur 和 Babel 以及浏览器支持。您甚至可以展开图表来查看用于验证兼容性的测试：

要在浏览器中试用最新的 ES6，请尝试 Firefox nightly build 或 Chrome release channels

【讨论】：

如果您还没有听说过，请查看 jspm。它允许您使用 CommonJS、AMD 和 ES6 模块。它依赖 Traceur 或 Babel 在执行之前在浏览器中将 ES6 编译为 ES5。 jspm 的一大好处是能够使用来自 Github 的 npm 模块或（通过一些配置）模块。将来可能会添加其他模块存储库。 jspm 也有相当不错的浏览器支持。未测试，但我相信它是 IE9+。 （你的 ES6 编译器也会影响这个。）

在 Ubuntu 17.04 中，我需要执行 sudo npm install -g --save-dev babel-cli babel-preset-es2015 和 $(npm bin)/babel ES6.js --presets es2015 才能使其工作，rf：babeljs.io/docs/plugins/preset-es2015

【参考方案3】：

您可能正在寻找以下链接之一：

Babel (for Webpack, for Gulp, for Grunt, for other frameworks & languages)

在您的开发管道中使用 Babel 将自动转译（转换）您的 JavaScript 以兼容跨浏览器。或者，如果你使用 TypeScript，你可以高枕无忧；你的代码已经被转译了。

---

不想设置转译器（例如 Babel/Typescript），或者您想使用转译器尚不支持的功能？

您可以在浏览器中启用实验性 ECMAScript 功能，方法是转到 chrome://flags/#enable-javascript-harmony 并启用 JavaScript Harmony 标志。对于某些功能，您可能必须使用 Chrome Canary 并启用 JavaScript Harmony 标志。

新的 JavaScript API 通常不被 Babel 覆盖，并且会有自己的 Chrome 标志。

使用箭头函数

这个问题特别提到了使用箭头函数。现在除了 IE 和 Opera Mini 之外的所有浏览器都原生支持箭头功能。见caniuse。

如果您想玩箭头功能，以前会有些困难。以下历史记录显示了在不同时间点使用此功能所花费的时间。

1) 起初，箭头函数只在 Chrome Canary 中使用 chrome://flags/#enable-javascript-harmony 标志已启用。它看起来 就像这个功能至少是partially implemented by 第 39 版。

2) 然后，箭头功能在 Google Chrome 中可用 JavaScript Harmony 标志的背后。

3) 最后，在 Google Chrome 45 中，箭头功能由 默认。

您可以预期其他新的 ECMAScript 功能也会出现类似的模式。

【讨论】：

TypeScript 带有一个很棒的转译器。 Babel 也是一个常见的 JavaScript 转译器。如果您将 es6 代码转换为 es5，您将无需等待浏览器支持开始使用 es6 的强大功能！

【参考方案4】：

只需使用 use strict 模式，进入一个闭包（不需要，但这是一个很好的方法），Chrome 将能够以 ES6 执行您的代码...

(function()
  'use strict';
  //your ES6 code...
)();

这里有一个例子... http://jsbin.com/tawubotama/edit?html,js,console,output 尝试删除 use stric 模式行，然后重试，控制台会记录错误。

【参考方案5】：

截至 2015 年 11 月，Firefox 和 Edge 一直领先于 ES6 竞赛，如果您想尝试 Chrome 缺乏的功能，请使用它们。 Edge 有class/subclass，Firefox 有Proxy；在他们之间，您几乎拥有所有ES6 features。

如果你必须在 Chrome 控制台中使用 ES6，有一种简单、尝试过且真实的方法：

耐心点。

浏览器正在采用 ES6 - 甚至是 Safari，它一直在大多数 HTML5 标准上拖拖拉拉。 给 Google 时间，他们会一一实现 ES6 功能。 例如箭头函数现在可用，在生产通道中并且没有标志。

不要期待扩展；你不能将 ES6 逐行翻译成 ES5，所以我们不能只用extend 控制台和Babel。

确实有一个实验js标志，但它的存在是有充分理由的。 V8 有 Proxy，但使​​用旧的（非标准）语法并有 security issue。 它的解构也是不完整的：你会发现在某些情况下它有效，在某些情况下它不起作用。

如果你只想玩 ES6，只需玩 Edge / Firefox。 它们都几乎涵盖了整个 Babel，有控制台和调试器，并且有 Babel 无法提供的功能。

【讨论】：

Safari 实际上领先于所有桌面浏览器，而 ios10 移动版在 ES6 支持方面领先于 android 版 Chrome。 kangax.github.io/compat-table/es6

@Louis 在 iOS 10 之前，Safari 有neglected emerging web tech。即使是现在，半年后，仍有 21% 的老 iOS 用户坚持使用 ES5，因为老 iOS 不能只升级浏览器，并且仍然是阻碍移动开发中采用 ES6 的唯一力量（98% 的 Android 可以运行最新版本铬合金）。我会保持这个答案不变，因为 Q 和 A 都已经过时了，但是如果你只看到 ES6 之后稍微，Safari 10 仍然会因为错过异步函数或获取 api 而落后。