JavaScript ES6 Template Literals 字串樣版

ES6 引入了 Template Literals (字串樣版) 是增強版的字串表示法，Template Literals 讓你可以寫多行字串 (multi-line strings)、也可以在字串中插入變數或 JavaScript 表達式 (String/Expression interpolation)。

Template Literals 的語法是用兩個反引號 (back-tick) ` ` 標示，而在字串中可以使用 ${ } 語法來嵌入變數或 JavaScript 表達式。

多行字串 Multi-line Strings

傳統的寫法：

var str = 'string text line 1\n' +
'string text line 2'

Template Literals 新的寫法：

var str = `string text line 1
string text line 2`

嵌入變數或任何表達式 String/Expression Interpolation

傳統的寫法：

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');

Template Literals 新的寫法：

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

${} 中可以是任何 JavaScript expression，例如執行一個函數：

function fn() {
    return 'Hello World';
}

// foo Hello World bar
var str = `foo ${fn()} bar`;

樣板標籤 Tagged Template Literals

Template Literals 可以接在一個函數名稱後面，該函數會被用來處理字串樣版，這功能叫做樣板標籤 (Tagged Template)。

如果字串中沒有使用 ${} 就跟執行一般函數類似，執行函數時，會傳入一個陣列型態的參數，陣列中只有一個元素就是字串本身：

alert`123`;

// 等同於執行

alert(['123']);

如果字串中有使用 ${}，會將字串樣版的內容切分成多個參數，切法是先根據 ${} 的位置，將沒有在 ${} 中的內容切開成多個字串組成一個陣列 (array)，當作函數的第一個參數，接著將每個 ${} 中的值，依序當作第二個、第三個、...第 N 個參數：

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {

    // 首先依 ${} 的位置將原始字串切成一個字串陣列，得到 strings
    // ["that ", " is a ", ""]
    //
    // 為什麼最後有一個 ""
    // 因為我們有一個 ${} 的位置在字串結尾
    
    // ${ person } 的值會被當作第二個參數傳入
    // ${ age } 的值會被當作第三個參數傳入

    // "that "
    var str0 = strings[0];
    // " is a "
    var str1 = strings[1];

    var ageStr;

    if (ageExp > 99) {
        ageStr = 'centenarian';
    } else {
        ageStr = 'youngster';
    }

    // ${ person } 的值會被當作第二個參數傳入
    return str0 + personExp + str1 + ageStr;
}

var output = myTag`that ${ person } is a ${ age }`;

// 顯示 that Mike is a youngster
console.log(output);