知識星球英文：robots.thoughtbot.com
譯者：伯樂線上 – cucr
網址：http://web.jobbole.com/83330/
我一直在關註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）設定實體變數，同時不使用括號呼叫函式：
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方法:
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
“CoffeeScript允許多行字串
與
插值，比如1 + 1 = # { 1 + 1 }
”
JavaScript 字串：
“JavaScript字串只能在一行”+
”不支援插值”
ES6模板字串：
`模板字串允許字串在
多行,允許插值，比如1 + 1 = $ { 1 + 1 }
`
我們可以在前面的示例利用模板字串，按如下方式改寫name的getter方法：
get name() {
return `${this.firstName} ${this.lastName}`;
}
這比我們之前使用的字串拼接方式要感覺更加乾凈，使我們更接近CoffeeScript的例子。
大箭頭（Fat arrows）
使得CoffeeScript有如此吸引力的另一個功能，也出現在ES6，即大箭頭。大箭頭允許我們將函式系結到的當前this的值上。首先，讓我們看看在不使用大箭頭時，我們是如何處理這個問題的。
在ES5中，我們必須在定義函式儲存一個對當前this值的取用：
var self = this;
$(“button”).on(“click”, function() {
// do something with self
});
CoffeeScript大箭頭可以完全省略引數和括號:
$(“button”).on “click”, =>
# do something with this
ES6大箭頭需要括號，可以帶或不帶引數：
$(“button”).on(“click”, () => {
// do something with this
});
其它特性
ES6有一些其他特性值得關註。
預設引數
CoffeeScript：
hello = (name = “guest”) ->
alert(name)
ES6：
var hello = function(name = “guest”) {
alert(name);
}
Splats
Variadic functions（可變引數函式）, 在CoffeeScript叫做splats。允許你以一個陣列收集傳遞給函式附加引數。ES6中叫做rest引數。
CoffeeScript：
awards = (first, second, others…) ->
gold = first
silver = second
honorable_mention = others
ES6：
var awards = function(first, second, …others) {
var gold = first;
var silver = second;
var honorableMention = others;
}
解構
解構允許你透過樣式匹配從陣列和物件提取特定的值。
CoffeeScript：
[first, _, last] = [1, 2, 3]
ES6：
var [first, , last] = [1, 2, 3]
我們可以在前面定義的name setter方法中使用解構，使程式碼更簡潔:
set name(name) {
[this.firstName, this.lastName] = name.split(” “);
}
總結
ES6 transpilers（轉換編譯器）的開發非常活躍，它在功能上正迎頭趕上CoffeeScript。這篇文章只涉及ES6給JavaScript帶來的少數功能，你可以在這裡找到更多關於本文提到的以及其它特性。
在你的下一個專案把CoffeeScript放在一邊，拿ES6試一試！