JS中的模板字符串-技术圈

导读

今天为大家说说ES6中的新特性-模板字符串，它为JavaScript提供了简单的字符串插值功能，从此以后，你可以通过一种更加美观、更加方便的方式向字符串中插值了。

怎么创建

模板字符串是通过反引号(``)来创建字符串的，跟以往的单引号('')和双引号("")的创建方法是一样的。

const message = 'Hello, World!'; //单引号const message = "Hello, World"; //双引号const message = `Hello, World!`; //反引号

还有不同于其他两种功能的是，模板字符串中所有的空格、新行、缩进，都会原样输出在生成的字符串中。这样我们在用字符串创建dom模板的时候，就方便的多了。

const div = `        <div class="hello">            <p>模板字符串</p>        </div>    `;

实现字符串插值

模板字符串支持占位符(${expression})，可以通过占位符来实现插值。

原理：占位符内的表达式在运行时进行计算，并将结果插入到字符串中。

其中占位符内可以包含以下三种内容：

1.变量

const myVal = 'abc';const message = `${myVal}`;

2.表达式

const n1 = 1;const n2 = 2;const message = `n1 + n2 = ${n1 + n2}, n1比n2大？,${n1 > n2 ? '是的' : '不是'}`;

可以有常见的加减乘除，还可以支持三元表达式等等。

3.函数体

const a1 = 1;function sum(a, b) {    return a + b;}const result = `计算两个数的相加: ${sum(a1, 2)}`; //=> 计算两个数的相加：3;

数据类型的隐式转换

占位符表达式结果都会被隐式转换为字符串输出。

例如number类型：

const n = 3.5;const message = `The number is ${n}`;message; // => `The number is 3.5`

数组类型：

const numbers = [1, 2, 3];const message = `The numbers are ${numbers}`;message; // => 'The numbers are 1,2,3'

如果占位符包含一个对象，按照转换为字符串的规则，该对象也被转换为字符串。在JS中所有对象都具有toString()方法，所以在模板字符串中的对象会调用对象的方法toString()来获取对象的字符串表示。

也就是数组转换字符串的时候，会执行array.toString()的方法。

转义占位符

因为占位符格式${expression}在模板文字中具有特殊含义，如果想单独使用$,${这些需要对它进行转义。例如，没有进行转义的声明，则会报错。

const message = `Some weird characters: ${abc}`;// Throws "ReferenceError: abc is not defined"

如果想把‘${abc}‘当做字符串输出，可以使用转义符(反斜杠\)。

const message = `Some weird characters: \${abc}`;message; // => 'Some weird characters follow: ${abc}'

也就是说如果你需要在模板字符串中引入字符$和{。无论你要实现什么样的目标，你都需要用反斜杠转义每一个字符：`\$`和`\{`。

const message = `Some weird characters: \${abc} \${abc \${`;message; // => 'Some weird characters: ${abc} ${abc ${'

好了，今天内容就先讲到这里。

最后想说的是，字符串插值是一个很棒的功能，因为它有助于以简洁易读的方式将值插入字符串文字中。并避免笨拙的字符串连接方法。

我们的正常，就在于自己了解自己的不正常。

--《追风筝的人》