使用ECMAScript 6

Question

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

是否有方法(扩展、用户脚本等)我可以在Chrome上运行这些功能吗？

Answer 1

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

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

由于箭头函数是一种语法更改，因此如果不更改解析JavaScript的方式，就不可能支持这种语法。如果您喜欢在ES6中进行开发，那么您可以编写ES6代码，并使用ES6toES5编译器生成与所有现有(现代)浏览器兼容的JavaScript代码。

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

如果您想要直接从控制台运行ES6语法，那么您可以尝试覆盖控制台的JavaScript计算器(以便在执行代码之前运行Traceur preprocesor )。如果您想这样做，可以看看this answer，了解如何修改开发人员工具的行为。

Answer 2

对于试用ES6，Babel是一个很棒的转译器。你可以在浏览器的“试用”部分运行ES6。它的功能类似于jsfiddle。

箭头例如：

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

displays the result 2.

即将ES6翻译成可由当前浏览器技术运行的ES5 javascript。你可以通过npm install -g babel安装巴别塔。安装后，您可以将上面的箭头示例保存到一个文件中。假设我们将该文件命名为"ES6.js“。假设您已经安装了node，那么在命令行中，输出到node：

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标志。对于某些功能，您可能必须在启用JavaScript和声标志的情况下使用Chrome Canary。

​

​

新的Chrome通常不会被巴别塔覆盖，并将有自己的JavaScript标志。

使用箭头函数

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

如果你想使用箭头函数，这曾经有点困难。下面的历史记录显示了在不同的时间点使用此功能所花费的时间。

1)起初，箭头功能只能在启用了chrome://flags/#enable-javascript-harmony标志的Chrome Canary中工作。看起来这个功能在版本39中至少是partially implemented的。

2)然后，箭头功能在JavaScript和谐标志后面的谷歌浏览器中可用。

3)最后，在Google Chrome 45中，箭头功能是默认启用的。

您可以期待类似的模式出现在其他新的ECMAScript特性中。