我一直在关注JavaScript的下一个版本ES6,而且最后有机会在一个项目中使用了它。在我使用它短暂时间内,我发现在不发生巨大语法变化的情况下,解决了很多CoffeeScript 试图解决的问题。
现在使用ES6
我们现在就可以开始使用ES6,通过 6to5项目可以将ES6代码转换成ES5。6to5能支持大量的构建工具包括Broccoli、Grunt、 Gulp和Sprockets。我使用sprockets-es6已经很成功,Sprockets 4.x将为6to5提供开箱即用的支持。
如果你使用Vim,你想将.es6文件扩展名与JavaScript关联,请将以下代码放到你的. vimrc。
你还可以使用 6to5 REPL 在您的浏览器中尝试ES6。
类
CoffeeScript和ES6都有类的支持。让我们看看CoffeeScript类与ES6的区别。
CoffeeScript允许我们通过参数、字符串插值(interpolation)设置实例变量,同时不使用括号调用函数:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class Person constructor: (@firstName, @lastName) -> name: -> "#{@first_name} #{@last_name}" setName: (name) -> names = name.split " " @firstName = names[0] @lastName = names[1] blake = new Person "Blake", "Williams" blake.setName("Blake Anderson") console.log blake.name() |
在ES6中,我们可以使用class、getter和setter方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } get name() { return this.firstName + " " + this.lastName; } set name(name) { var names = name.split(" "); this.firstName = names[0]; this.lastName = names[1]; } } var blake = new Person("Blake", "Williams"); blake.name = "Blake Anderson" console.log(blake.name); |
如果你在JavaScript中使用任何提供class功能的库或框架、你会注意到ES6语法有一些细微的差别:
- 函数名后没有分号
- 函数关键字省略了
- 每个定义后没有逗号
我们也可以利用getter和setter的优势,它允许我们把name函数当做属性对待。
插值
我经常希望JavaScript能有一个更强大的字符串语法。幸运的是ES6引入了 模板字符串。让我们来对比CoffeeScript字符串、JavaScript字符串、模板字符串、看看每个的功能。
CoffeeScript:
1 2 3 4 |
“CoffeeScript允许多行字符串 与 插值,比如1 + 1 = # { 1 + 1 } ” |
JavaScript 字符串:
1 2 |
“JavaScript字符串只能在一行”+ ”不支持插值” |
ES6模板字符串:
1 2 3 |
`模板字符串允许字符串在 多行,允许插值,比如1 + 1 = $ { 1 + 1 } ` |
我们可以在前面的示例利用模板字符串,按如下方式改写name的getter方法:
1 2 3 |
get name() { 我一直在关注JavaScript的下一个版本ES6,而且最后有机会在一个项目中使用了它。在我使用它短暂时间内,我发现在不发生巨大语法变化的情况下,解决了很多CoffeeScript 试图解决的问题。 现在使用ES6 我们现在就可以开始使用ES6,通过 6to5项目可以将ES6代码转换成ES5。6to5能支持大量的构建工具包括Broccoli、Grunt、 Gulp和Sprockets。我使用sprockets-es6已经很成功,Sprockets 4.x将为6to5提供开箱即用的支持。 如果你使用Vim,你想将.es6文件扩展名与JavaScript关联,请将以下代码放到你的. vimrc。 你还可以使用 6to5 REPL 在您的浏览器中尝试ES6。 类 CoffeeScript和ES6都有类的支持。让我们看看CoffeeScript类与ES6的区别。
在ES6中,我们可以使用class、getter和setter方法:
如果你在JavaScript中使用任何提供class功能的库或框架、你会注意到ES6语法有一些细微的差别:
我们也可以利用getter和setter的优势,它允许我们把name函数当做属性对待。 插值 我经常希望JavaScript能有一个更强大的字符串语法。幸运的是ES6引入了 模板字符串。让我们来对比CoffeeScript字符串、JavaScript字符串、模板字符串、看看每个的功能。 CoffeeScript:
JavaScript 字符串:
ES6模板字符串:
我们可以在前面的示例利用模板字符串,按如下方式改写name的getter方法:
|