寫在前面

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

關(guān)于該系列（不知道能不能成為一個(gè)系列，總是各種懶），會(huì)沒有規(guī)律的挑選一些內(nèi)容來學(xué)習(xí)。歡迎大家積極糾錯(cuò)，留言探討。

模板字符串(template strings)

用法

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
not legal.`

// 字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`  // Hello Bob, how are you today?

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

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

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

而現(xiàn)在：

var html = `公司名：${name}
  簡(jiǎn)介：${desc}`;

很簡(jiǎn)潔吧。

引一段 MDN 對(duì)于模板字符串的定義：

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

而占位符${}，可以是任意的 js 表達(dá)式（函數(shù)或者運(yùn)算），甚至是另一個(gè)模板字符串，會(huì)將其計(jì)算的結(jié)果作為字符串輸出。如果模板中需要使用$,{等字符串，則需要進(jìn)行轉(zhuǎn)義。

看個(gè)例子就明白了。

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

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

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

1. 不能自動(dòng)轉(zhuǎn)義特殊的字符串。（這樣很容易引起注入攻擊）
2. 不能很好的和國(guó)際化庫配合（即不會(huì)格式化特定語言的數(shù)字，日期，文字等）
3. 沒有內(nèi)建循環(huán)語法，（甚至連條件語句都不支持， 只可以使用模板套構(gòu)的方法）

標(biāo)簽?zāi)０?tagged template)

為此，引出了標(biāo)簽?zāi)０宓母拍?。?biāo)簽?zāi)０鍎t是在反引號(hào)前面引入一個(gè)標(biāo)簽（tag）。該標(biāo)簽是一個(gè)函數(shù)，用于處于定制化模板字符串后返回值。就拿上面對(duì)特殊字符串舉例。

/**
 * HTML 標(biāo)簽轉(zhuǎn)義
 * @param {Array.<DOMString>} templateData 字符串類型的tokens
 * @param {...} ..vals 表達(dá)式占位符的運(yùn)算結(jié)果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;
}
// 調(diào)用
var html = SaferHTML`<p>這是關(guān)于字符串模板的介紹</p>`;

標(biāo)簽函數(shù)會(huì)接收多個(gè)參數(shù)。

1. 第一個(gè)參數(shù)是包含了字符串字面量(即那些沒有變量替換的值)的數(shù)組
2. 后面的參數(shù)是已經(jīng)替換后的變量值

改一下例子1

var name = '丁香醫(yī)生';
var desc = '丁香醫(yī)生是面向大眾的科普性健康類網(wǎng)站';
tag`公司名：${name}簡(jiǎn)介：${desc}`

tag 的參數(shù)則分別為 ['公司名：','簡(jiǎn)介：'], '丁香醫(yī)生', '丁香醫(yī)生是面向大眾的科普性健康類網(wǎng)站'。

有了此類方法，就大大的增加了控制的權(quán)利。如上面說的國(guó)際化庫甚至循環(huán)語句。

瀏覽器兼容性

1. 服務(wù)器端， io.js 支持
2. 瀏覽器端， FF34+ , chrome 41+
3. 移動(dòng)端 IOS 8, Android 4.4
4. IE Tech Preview

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論