CoffeeScript 轉 ES6

es6-logo

開始嘗試 ES6

最近有時會看看 JavaScript ECMAScript 6 的相關文件,今年也是時候將新專案用 ES6 來撰寫,在還沒使用 ES6 以前,我個人比較偏好使用 CoffeeScriptLiveScript,如果嚐試過 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:

<?php
function sum(...$numbers) {
    $acc = 0;
    foreach ($numbers as $n) {
        $acc += $n;
    }
    return $acc;
}

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

  • Radian

    如果使用 ES6 會不會遇到瀏覽器不相容的問題 謝謝分享!

  • appleboy48

    目前瀏覽器的支援 ES6 程度可以直接參考

    http://kangax.github.io/compat-table/es6/

    當然現在寫 ES6 是非常好的,你可以透過 6to5 Project 內提供的工具,將 ES6 轉換成 ES5,這樣就不會有你說的瀏覽器不相容問題。

    希望有回答到您的問題

  • Rex

    看不出 ES6 有什麼比較好的地方, 從 code 的簡潔度來看, coffee 感覺比 ES6 還好點?

  • 陳彥澄

    CoffeeScript

  • 反正現在可以先用 Babel 轉成瀏覽器支援的 ES5
    等到之後支援程度高了以後,就直接把 babel 拿掉

    # 看 ES5 的情況,如果現在學 ES6 的話應該真的是可以再騙吃騙喝個十年XD

  • appleboy48

    ES2015 再戰 10 年