ES6 syntax sugar

Posted on Edited on In Views: Disqus:

 

一、「``」Template literals (Template strings)

var a = "123";
var b = `aaa${a}bbb`;
console.log(b);

結果為

使用「${}」表示法，可以將變數嵌在字串裡。

 

另一種用法為「${}」表示法裡面再套用「${}」表示法，

「${}」裡面可做程式判斷。

var yes = "Yes";
var no = "No";
var a = "123";
var b = `aaa ${a == "123" ? `${yes}` : no} bbb`;
console.log(b);

結果為

 

二、Spread operator

var obj = { a: 'a', b: 'b', c: 'c' };
var test2 = { z: 'z', ...obj };
console.log('test2', test2);
var test3 = { a: 'z', ...obj };
console.log('test3', test3);
var arr = [1, 2, 3];
var test4 = [0, ...arr];
console.log('test4', test4);

執行結果為

說明：

延展運算符如果用在物件或陣列時，其就是代表原本的物件(陣列)，

去代到另一個物件(陣列)。

 

三、解構賦值 destructuring assignment

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>

<body>
    <script>
        var foo = { id: '1', name: 'Bill' }
        var { id, name } = foo;
        console.log("id:" + id);
        console.log("name:" + name);
    </script>
</body>

</html>

 

四、null || n

var a = null || 50;
console.log(a);

var b = 30 || 50;
console.log(b);

執行結果為

說明：

如果第一個變數為 null 時，則傳回第二個變數。

 

參考資料：

JavaScript ES6 介紹

ES6、ES7、ES8、ES9、ES10 新特性