最近更新: 2019-06-26

學習 ECMAScript 6 - Template strings

Template strings 之用法可參考 ES6 In Depth: Template strings。基本的 template string 用法是字串內容必須用反引號 (`) ,而要插值的變數名稱則要包進 ${} 括號中。例如 `Hello ${myName}, template string.`

更進一步說,放在括號中的內容可以是任何有效的表達句。除了變數外,也能用函數或計算式。下列都是有效的例子:

  • 取陣列元素 ${abc[2]}
  • 字串切片: ${"slice of string".substr(3, 5)} .
  • 1 + 1 = ${1+1}
  • ${"a,b,c".split(',')[1]}

此語法功能之基礎,和我在 JavaScript print format 做的事大致相同。差別在於我實作的 interpolate() 和要插值的變數內容不在同一個作用域,故我必須將那些變數作為參數傳入。而 ES6 的 template strings 則是原地擴展,可直接取得要插值的變數。

進一步看 tagged templates 的工作方式,那就和我實作 interpolate() 的方式更像了。所謂 tag 實際是一個可執行敘述,通常是一個函數,所以解釋時也是將要插值的變數作為參數傳入。

例如:

function SaferHTML(templateData) {
  var s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i]);
    // ...
    s += templateData[i];
  }
  return s;
}

var message =
  SaferHTML`<p>${mail.sender} has sent you a mail.</p>`;

實際上會解釋為:

function SaferHTML(templateData) {
  // ...
}

var message =
  SaferHTML(['<p>', ' has sent you a mail.</p>'], $mail.sender);

ES6 會先將 template string 中不插值的部份拆段,變成一個集合作為 tag 函數的第一個參數。再將要插值的變數添加到參數清單中。在 tag 函數內,你可以選擇用傳統的 arguments 個體取得參數清單中要插值的內容,也可以用 ES6 增加的 rest parameters 語法。範例 SaferHTML() 是用 arguments

tag 允許設計者做更多的事。你可以自己解釋如何使用要插值的內容,也可以更進一步地對不插值的 templateData 添加自己定義的處理規則。對了,最後別忘了將這些字串連接在一起。我個人傾向用 concat() 連接字串,而不是 +=

相關文章