使用ECMAScript 6

Question

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

有没有办法(扩展名,用户脚本等)我可以在Chrome上运行这些功能？

Answer 1

在Chrome中,大多数ES6功能都隐藏在名为"实验性JavaScript功能"的标志后面.访问chrome://flags/#enable-javascript-harmony,启用此标记,重新启动Chrome,您将获得许多新功能.

箭头功能尚未在V8/Chrome中实现,因此该标志不会"解锁"箭头功能.

由于箭头函数是语法更改,因此无法在不更改JavaScript解析方式的情况下支持此语法.如果您喜欢在ES6中进行开发,那么您可以编写ES6代码并使用ES6-to-ES5编译器生成与所有现有(现代)浏览器兼容的JavaScript代码.

例如,请参阅https://github.com/google/traceur-compiler.在编写时,它支持ES6的所有新语法功能.与本答案顶部提到的标志一起,您将非常接近所需的结果.

如果要直接从控制台运行ES6语法,则可以尝试覆盖控制台的JavaScript评估程序(以便在执行代码之前运行Traceur预处理程序).如果您喜欢这样做,请查看此答案以了解如何修改开发人员工具的行为.

Answer 2

Babel是一个很好的试用ES6的翻译器.您可以在浏览器的网站"试用"部分中运行ES6.它的功能与jsfiddle类似.

箭头例如:

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

显示结果 2.

Babel"转换",即将ES6转换为可由当前浏览器技术运行的ES5 javascript.您可以通过安装Babel npm install -g 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);

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

使用类的示例

ES6是一个快速移动的目标.请参阅兼容性表以查找由Traceur和Babel等浏览器支持的功能以及浏览器支持.您甚至可以展开图表以查看用于验证兼容性的测试:

要在浏览器中尝试最前沿的ES6,请尝试Firefox夜间构建或Chrome发布渠道

Answer 3

使用ECMAScript Next(ES6,ES7等)

要确保新功能适用于所有查看者,您需要使用转换器.通过转换,您可以将代码转换为兼容所有浏览器的代码,从而使用最新的ECMAScript功能.下面是一些很好的转发器.

• Babel(适用于Gulp,适用于Webpack,适用于Grunt,适用于其他框架和语言)

• Traceur(适用于Gulp,适用于Webpack,适用于Grunt)

• 如果您正在使用TypeScript,TypeScript将为您转换代码.

不想设置转换器,或者您想要使用您的转换器尚未支持的功能？

您可以通过访问chrome:// flags/#enable-javascript-harmony并启用JavaScript Harmony标志,在浏览器中启用实验性ECMAScript功能.对于某些功能,您可能必须使用启用了该标志的Chrome Canary.

使用箭头功能

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

如果你想玩箭头功能,它曾经有点困难.以下历史记录显示了在不同时间点播放此功能所需的内容.

1)首先,箭头功能仅在启用了 标记的Chrome Canary中有效chrome://flags/#enable-javascript-harmony.看起来此功能至少部分由版本39 实现.

2)然后,箭头 在JavaScript Chrome Harmony标志后面的Google Chrome中可用.

3)最后,在谷歌浏览器45中,箭头功能默认启用.

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

Answer 4

只需使用use strict模式,关闭(不需要,但这是一个很好的方法),Chrome将能够以ES6执行您的代码...

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

这里有一个例子...... http://jsbin.com/tawubotama/edit?html,js,console,output尝试删除使用严格模式行,然后再试一次,将记录控制台上的错误.