淺談ES6 模板字串的具體使用方法，淺談es6模板字串

淺談ES6 模板字串的具體使用方法，淺談es6模板字串

寫在前面

關於 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"

不同於一般字元串，模板字串還可以多行書寫，模板字串中所有的空格，新行，縮排都會原樣的輸出在產生的字串中。

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

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

標籤模板(tagged template)

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

/** * 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, "&")      .replace(/</g, "<")      .replace(/>/g, ">");  // Don't escape special characters in the template.  s += templateData[i]; } return s;}// 調用var html = SaferHTML`<p>這是關於字串模板的介紹</p>`;

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

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

改一下例子1

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

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

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

瀏覽器安全色性

1. 伺服器端， io.js 支援
2. 瀏覽器端， FF34+ , chrome 41+
3. 移動端 IOS 8, Android 4.4
4. IE Tech Preview

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。