寫在前面

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

關于該系列（不知道能不能成為一個系列，總是各種懶），會沒有規律的挑選一些內容來學習。歡迎大家積極糾錯，留言探討。

模板字符串(template strings)

用法

// 普通字符串`In JavaScript '/n' is a line-feed.`// 多行字符串`In JavaScript this isnot legal.`// 字符串中嵌入變量var name = "Bob", time = "today";`Hello ${name}, how are you ${time}?`  // Hello Bob, how are you today?

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

先來看一下以前我們對字符串的使用：

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

而現在：

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

很簡潔吧。

引一段 MDN 對于模板字符串的定義：

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

而占位符${}，可以是任意的 js 表達式（函數或者運算），甚至是另一個模板字符串，會將其計算的結果作為字符串輸出。如果模板中需要使用$,{等字符串，則需要進行轉義。

看個例子就明白了。

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

不同于普通字符串，模板字符串還可以多行書寫，模板字符串中所有的空格，新行，縮進都會原樣的輸出在生成的字符串中。

而單純的模板字符串還存在著很多的局限性。如：

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

標簽模板(tagged template)

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