ES6 -- 字串樣板(String Template)

注意: IE方面, IE11不支援此語法, Edge才能使用此語法。



樣板用途:

1. 可在樣板中放"變數"或"表達式", 也就是${變數/表達式}

2. 可不用"\n"就能完成多行文字的串接

首先討論第1點,

ES5的寫法:

e.g.

var url="http://www.abc.com";

var name="www.abc.com";

var link = "<a href=\"" + url + "\">" + name + "</a>";            // 注意是以"引號("")"來放置字串

console.log(link);                         // <a href="http://www.abc.com">www.abc.com</a>

在ES6的寫法:

e.g.

var url="http://www.abc.com";

var name="www.abc.com";

var link = `<a href="${ url }">${ name }</a>`;                        // 注意是以"反引號(`)"來限定總字串範圍。${}會自動在程式執行當下, 把var url & var name中的值替換過來

console.log(link);                         // <a href="http://www.abc.com">www.abc.com</a>

p.s. 如果寫成 `<a href="${ url }">${ 10+5 }</a>`;                   // <a href = "http://www.abc.com">15</a>

再者, 討論第2點,

ES5的寫法1:

e.g.

var text = "AAAAA\n";                                                                 // \n 是換行符號

text += "BBBBB\n";

text += "CCCCC\n";

text += "DDDDD";

console.log(text);                                                                           // AAAAA

                                                                                                          // BBBBB

                                                                                                          // CCCCC

                                                                                                          // DDDDD

ES5的寫法2:

e.g.

var text = "AAAAA\n"

    + "BBBBB\n"

    + "CCCCC\n"

    + "DDDDD";

console.log(text);                                                                          // AAAAA

                                                                                                         // BBBBB

                                                                                                         // CCCCC

                                                                                                         // DDDDD

ES5的寫法3:

e.g.

var text = "AAAAA\n\                                                               // 每行code結尾的 \ 代表"換到下一行"的意思。更準確的說, 是我們寫code時可換到下一行去寫, 不代表code輸出結果會顯示換行, 輸出結果有換行效果是來自我們有寫 \n

BBBBB\n\

CCCCC\n\

DDDDD";

console.log(text);                                                                         // AAAAA

                                                                                                        // BBBBB

                                                                                                        // CCCCC

                                                                                                        // DDDDD

在ES6的寫法:

e.g.

var text = `AAAAA                                                                     // 不用寫 \n,  因為ES6本身就支援換行(會自動輸出 \n )

BBBBB

CCCCC

DDDDD`;

console.log(text);                                                                        // AAAAA

                                                                                                       // BBBBB

                                                                                                       // CCCCC

                                                                                                       // DDDDD