写在前面
关于 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"
不同于普通字符串,模板字符串还可以多行书写,模板字符串中所有的空格,新行,缩进都会原样的输出在生成的字符串中。
而单纯的模板字符串还存在着很多的局限性。如:
- 不能自动转义特殊的字符串。(这样很容易引起注入攻击)
- 不能很好的和国际化库配合(即不会格式化特定语言的数字,日期,文字等)
- 没有内建循环语法,(甚至连条件语句都不支持, 只可以使用模板套构的方法)