CoffeeScript 轉 ES6

 Posted on January 31, 2015  |  2 minutes  |  404 words  |  appleboy
es6-logo

開始嘗試 ES6

最近有時會看看 JavaScript ECMAScript 6 的相關文件，今年也是時候將新專案用 ES6 來撰寫，在還沒使用 ES6 以前，我個人比較偏好使用 CoffeeScript 或 LiveScript，如果嚐試過 CoffeeScript 後，你會發現轉換成 ES6 是相當容易。網路上可以直接看 6to5 專案，提供 Sprockets, Broccoli, Browserify, Grunt, Gulp, Webpack ..等，要嘗試 ES6 語法轉成 Javascript 可以透過 ES6 repl 介面來嘗鮮。

Classes

來看看用 CoffeeScript 怎麼寫 JavaScript Class:

class Person
  constructor: (@firstName, @lastName) ->

name: ->
“#{@first_name} #{@last_name}”


setName: (name) ->
names = name.split " "


@firstName = names[0]
@lastName = names[1]

boy = new Person “Bo-Yi”, “Wu”
boy.setName(“Boy Apple”)
console.log boy.name()

在 ES6 可以使用 classes, getters, and setters

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 boy = new Person(“Bo-Yi”, “Wu”);
boy.name = “Boy Apple”;
console.log(boy.name);

從上面可以發現 2 點不一樣的地方

  • 可以忽略 function 字串
  • 每個 function 後面不需要分號(;)

Interpolation

ES6 開始支援 Template String，詳細可以參考 Addy Osmani 最新寫的 Getting Literal With ES6 Template Strings

CoffeeScript:

"multi-line strings with interpolation like 1 + 1 = #{1 + 1}"

JavaScript:

"multi-line strings with interpolation like 1 + 1 = " + (1 + 1)

ES6 template strings:

// 這邊需要注意的是，兩邊並非是雙引號或單引號，而是 ` 符號
`multi-line strings with interpolation like 1 + 1 = ${1 + 1}`

注意 ES6 並非用雙引號了。所以上面的 get name function 可以改成底下

get name() {
  return `${this.firstName} ${this.lastName}`;
}

Fat Arrows

在寫 Javascript 要如何把目前的 this 綁定到現在函式內，可以透過 CoffeeScript 的 => 符號，現在 ES6 也支援了

純 JavaScript 寫法

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
});

Default arguments

CoffeeScript 可以定義函式傳入預設值

hello = (name = "guest") ->
  console.log(name)

ES6 現在也可以了

var hello = function(name = "guest") {
  alert(name);
}

Splats functions

PHP 5.6 開始也支援了 Variadic functions，而 CoffeeScript 也有此功能

PHP 5.6:

echo sum(1, 2, 3, 4);
?>

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;
}

Destructuring

Destructuring 讓變數可以直接對應物件或陣列內容

CoffeeScript:

[first, _, last] = [1, 2, 3]

ES6:

var [first, , last] = [1, 2, 3];

我們可以將 set name 函式改成底下

set name(name) {
  [this.firstName, this.lastName] = name.split(" ");
}

結論

更多學習資源可以直接參考 6to5 專案，從現在開始擁抱 ES6 吧。

參考: Replace CoffeeScript with ES6

6to5  ECMAScript 6  javascript 

See also