使用 ECMAScript 6

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

有没有什么方法(扩展名、用户脚本等等)可以让我在 Chrome 上运行这些功能？

98103 次浏览
小开

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

箭头函数是 还没有在 V8/Chrome 中实现，所以这个标志不会“解锁”箭头函数。

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

例如，请参见 https://github.com/google/traceur-compiler。在编写本文时，它支持 ES6的所有新语法特性。加上这个答案顶部提到的标志，你将非常接近预期的结果。

如果希望直接从控制台运行 ES6语法，那么可以尝试覆盖控制台的 JavaScript 计算器(例如在执行代码之前运行 Traceur 预处理器)。如果您希望这样做，那么可以看一下 这个答案，了解如何修改开发人员工具的行为。

小开

Babel 是试用 ES6的一个很好的翻译器。你可以在他们网站的“试试”部分的浏览器中运行 ES6。它的功能类似于 jsfiddle。

箭头例如:

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

显示结果 2。

Babel“ transiles”，即将 ES6翻译成可以用当前浏览器技术运行的 ES5 javascript。你可以通过 npm install -g babel安装 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);

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

使用类的示例

ES6是个移动很快的目标。参考 兼容性表找到由传送器支持的特性，如 Traceur 和 Babel 以及浏览器支持。您甚至可以展开图表，查看用于验证兼容性的测试:

enter image description here

要在浏览器中尝试前沿 ES6，请尝试 Firefox 每晚构建或 Chrome 发布频道

小开

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

Babel (网络包，为了咕噜，为了格朗特，< a href = “ https://babeljs.io/docs/setup/# install”rel = “ nofollow noReferrer”> for 其他框架及语言

在开发管道中使用 Babel 将自动传输(转换)您的 JavaScript 以实现跨浏览器兼容。或者，如果您正在使用 TypeScript，那么您可以放心了; 您的代码已经被翻译了。



不想设置传送器(例如 Babel/Typecript) ，还是想使用传送器尚未支持的功能？

您可以在浏览器中启用实验性 ECMAScript 特性，方法是转到 Chrome://Flag/# able-javascript-Harmony并启用 JavaScript Harmony 标志。对于某些特性，您可能必须在启用 JavaScriptHarmony 标志的情况下使用 金丝雀。

JS harmony screenshot

新的 JavaScriptAPI 通常不会被 Babel 覆盖，而是会有自己的 Chrome 标志。


使用箭头函数

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

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

1)起初，箭头函数只能在 金丝雀中使用 启用 chrome://flags/#enable-javascript-harmony标志，看起来 这个功能至少是 部分实施 版本39。

2)然后，在谷歌浏览器中可用的箭头函数 在 JavaScript Harmony 标志后面。

3)最后，在 谷歌 Chrome 45中，箭头函数在启用 违约。

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

小开

从2015年11月开始，火狐和 Edge已经在 ES6竞赛中处于领先地位，如果你想尝试 Chrome 所缺乏的功能，就使用它们吧。 Edge 有 类/子类，Firefox 有 代理; 两者之间实际上都有 ES6功能。

如果你必须在 Chrome 控制台中使用 ES6，有一个简单、可行和真实的方法:

耐心点。

浏览器正在采用 ES6——甚至是 Safari，后者在大多数 HTML5标准上一直拖拖拉拉。 给谷歌一些时间，他们会逐一实现 ES6的功能。 例如，箭头函数现在可以在生产通道中使用，而且没有标志。

不要期望扩展; 您不能逐行将 ES6翻译成 ES5，所以我们不能只使用 巴别塔的 延伸控制台。

确实有一个实验 js 标志，但它的存在是有充分理由的。 V8具有 Proxy，但使用的是旧的(非标准)语法，并且具有 安全问题。 它的解构也是不完整的: 你会发现，在某些情况下它起作用，在某些情况下它不起作用。

如果您只想玩 ES6，只需使用 Edge/Firefox 即可。 它们都覆盖了几乎整个 Babel，具有控制台和调试器，并且具有 Babel 无法提供的特性。

小开

只要使用 严格使用模式，进入一个闭包(不需要，但它是一个伟大的方法) ，Chrome 将能够执行您的代码作为 ES6..。

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

举个例子。 Http://jsbin.com/tawubotama/edit?html,js,console,output 尝试删除 使用 stric模式行，再试一次，控制台上的错误将被记录下来。


提交答案