JavaScript ES6 Template Literals 字串樣版

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

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

多行字串 Multi-line Strings

傳統的寫法：

const str = 'string text line 1\n' + 'string text line 2';

Template Literals 新的寫法：

const str = `string text line 1
string text line 2`;

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

傳統的寫法：

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

Template Literals 新的寫法：

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

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

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

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

樣板標籤 Tagged Template Literals

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

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

alert`123`;

// 等同於執行

alert(['123']);

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

const person = 'Mike';
const age = 28;

function myTag(strings, personExp, ageExp) {
  // 首先依 ${} 的位置將原始字串切成一個字串陣列，得到 strings
  // ["that ", " is a ", ""]
  //
  // 為什麼最後有一個 ""
  // 因為我們有一個 ${} 的位置在字串結尾

  // ${ person } 的值會被當作第二個參數傳入
  // ${ age } 的值會被當作第三個參數傳入

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

  let ageStr;

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

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

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

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