這次帶給大家在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 is not 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)。該標籤是一個函數,用於處於定制化模板字串後返回值。就拿上面對特殊字元字串舉例。
/** * 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
var name = '丁香医生'; var desc = '丁香医生是面向大众的科普性健康类网站'; tag`公司名:${name}简介:${desc}`
tag 的參數則分別為 ['公司名稱:','簡介:'], '丁香醫生', '丁香醫生是面向大眾的科普性健康類網站'。
有了此類方法,就大大的增加了控制的權利。如上面說的國際化庫甚至循環語句。
瀏覽器相容性
# 伺服器端, io.js 支援
IE Tech Preview
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是在ES6裡模板字串使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!