关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了。虽说各大浏览器尚未全面的支持,不过这并不妨碍咱们一颗想要撸一把的心。在后端,可使用 Node.js(0.12+)或 io.js, 前端的话,也可使用Babel 或Traceur 进行语法预转义成 ES5使用 。javascript
关于该系列(不知道能不能成为一个系列,老是各类懒),会没有规律的挑选一些内容来学习。欢迎你们积极纠错,留言探讨。html
ES6 中引进的一种新型的字符串字面量语法 - 模板字符串。书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量。简单来说,就是增长了变量功能的字符串。前端
先来看一下之前咱们对字符串的使用:java
javascript/** * Before ES6 字符串拼接 */ var name = '丁香医生'; var desc = '丁香医生是面向大众的科普性健康类网站'; var html = function(name, desc){ var tpl = '公司名:' + name + '\n'+ '简介:'+ desc; return tpl; }
而如今:git
javascriptvar html = `公司名:${name} 简介:${desc}`;
很简洁吧。
引一段 MDN 对于模板字符串的定义:es6
模板字符串使用反引号 (
) 来代替普通字符串中的用双引号和单引号。模板字符串能够包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一块儿传递给一个默认函数,该函数负责将全部的部分链接起来。github
而占位符${}
,能够是任意的 js 表达式(函数或者运算),甚至是另外一个模板字符串,会将其计算的结果做为字符串输出。若是模板中须要使用$,{
等字符串,则须要进行转义。web
看个例子就明白了。chrome
javascriptvar x = 1; var y = 2; `${ x } + ${ y } = ${ x + y}` // "1 + 2 = 3"
不一样于普通字符串,模板字符串还能够多行书写,模板字符串中全部的空格,新行,缩进都会原样的输出在生成的字符串中。express
而单纯的模板字符串还存在着不少的局限性。如:
为此,引出了标签模板的概念。标签模板则是在反引号前面引入一个标签(tag)。该标签是一个函数,用于处于定制化模板字符串后返回值。就拿上面对特殊字符串举例。
javascript/** * 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
javascriptvar name = '丁香医生'; var desc = '丁香医生是面向大众的科普性健康类网站'; tag`公司名:${name}简介:${desc}`
tag 的参数则分别为 ['公司名:','简介:'], '丁香医生', '丁香医生是面向大众的科普性健康类网站'。
有了此类方法,就大大的增长了控制的权利。如上面说的国际化库甚至循环语句。