使用 ECMAScript 6

Question

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

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

Answer 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，了解如何修改开发者工具的行为。

Answer 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

Answer 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 功能也会出现类似的模式。

Answer 4

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

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

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

Answer 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 无法提供的功能。