11月
5
2015
分類:
Programming
標籤: javascript ecmascript es6
最近更新: 2019-06-26

學習 ECMAScript/JavaScript 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() 連接字串，而不是 += 。

相關文章