摘要：由兩部分組成模板起始符，稱為沉音符反引號，其內容被識別為字符串模板。其實這是通過屬性操作中的結果，也就是說屬性將對控制符進行轉義從而實現按照普通字符輸出。的語法是緊跟在后面，兩者間不能有空格或制表符等。

1. Brief

ES6(ECMAScript 6th edition)于2015年7月份發布，雖然各大瀏覽器仍未全面支持ES6，但我們可以在后端通過Node.js 0.12和io.js，而前端則通過Traceur或Babel這類Transpiler將ES6語法預轉譯為ES5語法，來提前興奮一把。而僅需適配IE9+的朋友們現在更是可以開始擼ES6了，而不必為學哪門JavaScript超集語言而煩惱。（ES6又名為ECMAScript 2015或JavaScript.next，ES4的部分較為激進的特性被調用到該版本中實現。）

ES6帶給我們很多驚喜，如class、module、export和import等。但在學習和運用到項目中時，我們需要注意以下兩點：

ES6包含的是語法糖和語言、庫的bug fix，對工程性問題沒有太大的幫助；

由于Traceur和Babel無法對ES6的所有特性進行完整高效的polyfill，因此我們無法完全享用ES6的各項特性。

最近接手一個項目的前端改造，正在嘗試全新的技術棧(Riot+ES6+Glup+Webpack)，本系列文章將作為理論+項目實踐的筆記供日后查閱。

2. What is Template Strings?

一言以蔽之，Template Strings就是讓我們減少字符串手工拼接的工作量。

2.1. Before ES6

// Sample 1: 單行字符串拼接
var operand1 = 1
  , operand2 = 2.1
var tpl1 = operand1 + " + " + operand2 + "~=" + parseInt(operand1+operand2)
var tpl2 = [operand1, " + " , operand2, "~=", parseInt(operand1 + operand2)].join("")

// Sample 2: 多行字符串拼接
var name = "fsjohnhuang"
  , id = "region"
var tpl1 = "

"
  + "" + name + ""
  + "

"
var tpl2 = "


  " + name + "
  

"

2.2. Embracing ES6

// Sample 1: 單行字符串拼接
var operand1 = 1
  , operand2 = 2.1
var tpl1 = `${operand1}+${operand2}~=${parseInt(operand1+operand2)}`

// Sample 2: 多行字符串拼接
var name = "fsjohnhuang"
  , id = "region"
var tpl1 = `

  ${name}
  
`

假若了解過CoffeeScript，那么會發現ES6的Template Strings怎么這么眼熟。Template Strings由兩部分組成：
1. 模板起始符—— ``，稱為沉音符/反引號(grave accent)，其內容被識別為字符串模板。
2. 表達式占位符—— ${} ，為JavaScript的有效表達式（如 name, 1==2等），因此 ${} 并不是簡單的占位符那么簡單了。

2.3. Cautions 1. ${} 中可訪問當前作用域所能訪問到變量和函數

var x = 1

(function(){
  var y = 2
  (function(b){
    var tpl = `${x},${y},${a},${b}` // 結果是 "1,2,undefined,5"
  }(5))
  var a = 3
  let c = 4 // 由于采用let來聲明c變量，因此不會發生variable hoist
}())

2. ${} 是即時計算(real-time computing)的，通過函數加殼可實現延遲計算(lazy evaluation)

//real-time computing
var tpl = `${x},${y}`
var x = 1, y = 2
console.log(tpl) // "undefined, undefined"

// lazy evaluation
var tpl = ctx => `${ctx.x},${ctx.y}`
console.log(tpl({x:1, y:2})) // "1, 2"

3. 多行陷阱(pitfall of multiline)，在編寫HTML模板時我習慣如下寫法

var tpl = "


    
${title}
    ${subtitle}
  

"
// 然后是模板引擎解析tpl

那現在是否就可以毫無顧慮地改用Template Strings呢？

var tpl = ctx => `

    
${ctx.title}
    ${ctx.subtitle}
  
`
// 直接調用tpl函數

答案是否定的

原因是通過正斜杠( )定義的多行字符串實際輸出還是一行字符串而已，但通過反引號( `` )定義的是真實的多行字符串，且通過換行符( )分隔每一行。

// 通過定義多行的結果


    
${ctx.title}
    ${ctx.subtitle}  




// 通過反引號定義多行的結果




    
${ctx.title}

    ${ctx.subtitle}

  

那么當使用jQuery將反引號定義的HTML模板來生產DOM元素時就會直接報錯了，這時我們需要刪除這些控制字符。

var removeCtlChar = raw => raw.replace(/[
	vf]/ig, "")

3. What is Tagged Template Strings?

從上文我們了解到Template Strings是以整體為單位進行即時計算，也就是說留給我們的自主操控能力是十分有限的。而Tagged Template Strings則大大增強了我們的操控欲望。

其實Tagged Template Strings實質上是對Template Strings進行Tokenize操作，從而細化我們的可操作粒度。而詞法類型分為 字符串 和 表達式占位符的運算結果。

var x = 1, y = 2
var tpl = "hello${x}:${y+1}"

// Tokenize后的結果
var tokens = ["hello", 1, ":", 3, ""] 

具體玩法如下：

// 語法