觸摸ES6 - 模板字符串

寫在前面

關於 ES6, 也終於在 2015 年的 7 月 18 號塵埃落定了。雖說各大瀏覽器尚未全面的支持，不過這並不妨礙咱們一顆想要擼一把的心。在後端，可使用 Node.js(0.12+)或 io.js, 前端的話，也可使用Babel 或Traceur 進行語法預轉義成 ES5使用 。

關於該系列（不知道能不能成爲一個系列，老是各類懶），會沒有規律的挑選一些內容來學習。歡迎你們積極糾錯，留言探討。

模板字符串(template strings)

ES6 中引進的一種新型的字符串字面量語法 - 模板字符串。書面上來解釋，模板字符串是一種能在字符串文本中內嵌表示式的字符串字面量。簡單來說，就是增長了變量功能的字符串。

先來看一下之前咱們對字符串的使用：

javascript/**
 * Before ES6 字符串拼接
 */
var name = '丁香醫生';
var desc = '丁香醫生是面向大衆的科普性健康類網站';
var html = function(name, desc){
    var tpl = '公司名：' + name + '\n'+
            '簡介：'+ desc;
    return tpl;
}

而如今：

javascriptvar html = `公司名：${name}
    簡介：${desc}`;

很簡潔吧。
引一段 MDN 對於模板字符串的定義：

模板字符串使用反引號 () 來代替普通字符串中的用雙引號和單引號。模板字符串能夠包含特定語法(${expression})的佔位符。佔位符中的表達式和周圍的文本會一塊兒傳遞給一個默認函數，該函數負責將全部的部分鏈接起來。

而佔位符${}，能夠是任意的 js 表達式（函數或者運算），甚至是另外一個模板字符串，會將其計算的結果做爲字符串輸出。若是模板中須要使用$,{等字符串，則須要進行轉義。

看個例子就明白了。

javascriptvar x = 1;
var y = 2;
`${ x } + ${ y } = ${ x + y}`  // "1 + 2 = 3"

不一樣於普通字符串，模板字符串還能夠多行書寫，模板字符串中全部的空格，新行，縮進都會原樣的輸出在生成的字符串中。

而單純的模板字符串還存在着不少的侷限性。如：

• 不能自動轉義特殊的字符串。（這樣很容易引發注入攻擊）
• 不能很好的和國際化庫配合（即不會格式化特定語言的數字，日期，文字等）
• 沒有內建循環語法，（甚至連條件語句都不支持， 只可使用模板套構的方法）

標籤模板(tagged template)

爲此，引出了標籤模板的概念。標籤模板則是在反引號前面引入一個標籤（tag）。該標籤是一個函數，用於處於定製化模板字符串後返回值。就拿上面對特殊字符串舉例。

javascript/**
 * HTML 標籤轉義
 * @param {Array.<DOMString>} templateData 字符串類型的tokens
 * @param {...} ..vals 表達式佔位符的運算結果tokens
 * 
 */
function SaferHTML(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);
    // Escape special characters in the substitution.
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}
// 調用
var html = SaferHTML`<p>這是關於字符串模板的介紹</p>`;

標籤函數會接收多個參數。

• 第一個參數是包含了字符串字面量(即那些沒有變量替換的值)的數組
• 後面的參數是已經替換後的變量值

改一下例子1

javascriptvar name = '丁香醫生';
var desc = '丁香醫生是面向大衆的科普性健康類網站';
tag`公司名：${name}簡介：${desc}`

tag 的參數則分別爲 ['公司名：','簡介：'], '丁香醫生', '丁香醫生是面向大衆的科普性健康類網站'。

有了此類方法，就大大的增長了控制的權利。如上面說的國際化庫甚至循環語句。

瀏覽器兼容性

• 服務器端， io.js 支持
• 瀏覽器端， FF34+ , chrome 41+
• 移動端 IOS 8, Android 4.4
• IE Tech Preview

擴展閱讀

• ECMAScript 6 入門
• Getting Literal With ES6 Template Strings
• HTML templating with ES6 template strings
• 模板字符串 - MDN
• ES6 Features系列：Template Strings & Tagged Template Strings