摘要：由兩部分組成模板起始符，稱為沉音符反引號(hào)，其內(nèi)容被識(shí)別為字符串模板。其實(shí)這是通過(guò)屬性操作中的結(jié)果，也就是說(shuō)屬性將對(duì)控制符進(jìn)行轉(zhuǎn)義從而實(shí)現(xiàn)按照普通字符輸出。的語(yǔ)法是緊跟在后面，兩者間不能有空格或制表符等。

1. Brief

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

ES6帶給我們很多驚喜，如class、module、export和import等。但在學(xué)習(xí)和運(yùn)用到項(xiàng)目中時(shí)，我們需要注意以下兩點(diǎn)：

ES6包含的是語(yǔ)法糖和語(yǔ)言、庫(kù)的bug fix，對(duì)工程性問(wèn)題沒(méi)有太大的幫助；

由于Traceur和Babel無(wú)法對(duì)ES6的所有特性進(jìn)行完整高效的polyfill，因此我們無(wú)法完全享用ES6的各項(xiàng)特性。

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

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}
  
`

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

2.3. Cautions 1. ${} 中可訪問(wèn)當(dāng)前作用域所能訪問(wèn)到變量和函數(shù)

var x = 1

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

2. ${} 是即時(shí)計(jì)算(real-time computing)的，通過(guò)函數(shù)加殼可實(shí)現(xiàn)延遲計(jì)算(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模板時(shí)我習(xí)慣如下寫法

var tpl = "


    
${title}
    ${subtitle}
  

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

那現(xiàn)在是否就可以毫無(wú)顧慮地改用Template Strings呢？

var tpl = ctx => `

    
${ctx.title}
    ${ctx.subtitle}
  
`
// 直接調(diào)用tpl函數(shù)

答案是否定的

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

// 通過(guò)定義多行的結(jié)果


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




// 通過(guò)反引號(hào)定義多行的結(jié)果




    
${ctx.title}

    ${ctx.subtitle}

  

那么當(dāng)使用jQuery將反引號(hào)定義的HTML模板來(lái)生產(chǎn)DOM元素時(shí)就會(huì)直接報(bào)錯(cuò)了，這時(shí)我們需要?jiǎng)h除這些控制字符。

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

3. What is Tagged Template Strings?

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

其實(shí)Tagged Template Strings實(shí)質(zhì)上是對(duì)Template Strings進(jìn)行Tokenize操作，從而細(xì)化我們的可操作粒度。而詞法類型分為 字符串 和 表達(dá)式占位符的運(yùn)算結(jié)果。

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

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

具體玩法如下：

// 語(yǔ)法