ECMAscript新特性 - 模版字符串字面量 Template literals

112 阅读1分钟

在ECMAscript 2015 中还增强了定义字符串的方式,传统定义字符串的方式是通过单引号或者双引来表示。

const str = 'foo'

在ES2015 新增了一种叫做模版字符串的方式,它需要使用反引号来标识。直接使用它和普通的字符串没有什么区别,如果要在字符串的内容当中需要反引号同样也可以使用斜线去转义。

const str = `this is a \`string`

相比于普通的字符串这种模版字符串的方式它多了一些非常有用的新特性,首先第一点就是传统的字符串不支持换行,如果说字符串里面有换行符需要通过 \n 这种字符来表示。而在最新的模版字符串当中它可以支持多行字符串,也就是说可以直接在字符串当中输入换行符。这一点对于输出 html 字符串是非常方便的;其次,模版字符串还支持差值表达式的方式在字符串中去嵌入所对应的数值,使用方式是 ${变量名}。

cont name = 'tom';
const msg = `hey, ${name}`;

这种方式比之前字符串拼接的方式方便的多,也更直观一点不容易写错事实上${}里面的内容就是标准的 javascript ,也就是说这里不仅可以嵌入变量也可以嵌入任何标准的 js 语句。这个语句的返回值最终会被输出到字符串当中差值表达式所存在的位置。

const msg = `hey, ${name} --- ${1 + 2} --- ${Math.random()}`