重读《深入理解ES6》—— 模板字符串-CSDN博客

ES6 引入了一种新型的字符串字面量语法，我们称之为模板字符串（Template literals）。模板字符串最大的优点是帮助我们解决了大量拼接字符串的困扰。除此之外，模板字符串还有一些其他的小细节，我们依次展开来说。

一、基本用法

模板字符串的用法很简单，它用反撇号（`）代替了单引号 '' 或者双引号 ""。

let msg = `a string`;
console.log(msg); // "a string"
console.log(typeof msg); // "string"
复制代码

二、多行字符串

在 ES6 之前，如果我们想创建一个多行字符串，必须使用 \n 。

// before ES6
var multiLine = "Hello \nWorld!";
console.log(multiLine); // "Hello 
                        // World!"
复制代码

而在 ES6 中，我们可以直接在代码换行即可。

// ES6
let multiLine = `Hello
World！`;

console.log(multiLine); // "Hello 
                        // World!"
复制代码

但有一点值得注意：在模板字符串中，所有的留白都属于字符串的一部分！ 也就是说，如果你的代码是下面这样的话，那么打印结果会保留空白。所以，在使用模板字符串的过程中，一定注意空格和缩进。

let multiLine = `Hello
                 World！`;

console.log(multiLine); // "Hello 
                        // 			World!"
复制代码

三、字符串占位符

模板字符串与普通字符串最大的区别莫过于此。在模板字符串中，我们可以把任意合法的 JS 表达式嵌入到占位符中。由于这个强大的功能，大量拼接字符串的操作将成为历史。它看起来是这样的 ${express} 。

在 ES6 之前，我们可能会这样拼接字符串：

// before ES6
var name = 'zhangsan';
var age = 19;
var info = "我的名字叫" + name + ", 我今年" + age + "岁。";
console.log(info);
复制代码

当有了模板字符串，上面的代码可以简化为：

let name = 'zhangsan';
let age = 19;
let info = `我的名字叫${name}, 我今年${age}岁。`;
console.log(info);
复制代码

除此之外，我们也可以放入一些较为复杂的表达式：

let count = 10;
let price = 2.5;
let total = `The total price is ${count * price}.`;
console.log(total); // The total price is 25.;
复制代码

四、标签模板

标签模板的基本用法是这样的：tag`test` 。其中 tag 是一个我们自己定义的函数，而模板字符串紧跟在后面。此时，该函数会被调用，用来处理这个模板字符串。

function tag(stringArr) {
    console.log(stringArr);
}
tag`test`;
复制代码

标签模板其实就是一种特殊的函数调用形式，“标签”就是我们自己定义的函数，而“模板字符串”就是它的参数。上面的例子中，函数返回一个字符串数组。

而如果模板字符串中有占位符(也就是变量)，会将模板字符串先处理成多个参数，再调用函数。

function tag(stringArr, value) {
    console.log(stringArr, value);
}

let a = 'aaa';
tag`test ${a}`;
复制代码

上面的代码中，stringArr 依然是一个字符串数组，它包含了两部分：

占位符前的字符串（"test "）；
占位符后的字符串（""）；

value 就是占位符 a 的值，传参为 'aaa'。

我们再稍微复杂一点：

function tag(stringArr, value, value2) {
    console.log(stringArr, value, value2);
}

let a = 'aaa';
let b = 3;
let c = 4;
tag`test ${a} next ${b * c}`;
复制代码

当我们有两个占位的时候，stringArr 就会有3个参数：

第一个占位符前面的字符串（"test "）；
第一个占位符后面，第二个占位符前面的字符串（" next "）；
第二个占位符后面的字符串（""）；

value 是第一个占位符的值，value2 是第二个占位符的值。

理解了上面的例子，我们来总结一下：

function tag(stringArr, value, value2) {
    // ...
}
// 相当于
function tag(stringArr, ...value) {
   // ...
}

let a = 'aaa';
let b = 3;
let c = 4;
tag`test ${a} next ${b * c}`;
// 相当于
tag(["test ", " next ", ""], 'aaa', 12);
复制代码

tag 函数第一个参数是个数组，该数组的成员是模板字符串中那些没有占位符替换的部分。如果模板字符串中没有占位符，那么该数组中只有一个值；如果模板字符串中有一个占位符，那么该数组中有两个值，分别是占位符前面的字符串和占位符后面的字符串；如果模板字符串中有两个占位符，那么该数组中有三个值，分别是第一个占位符前的字符串、第一个占位符和第二个占位符之间的字符串、第二个占位符之后的字符串。以此类推。

tag 函数的其他参数，就是模板字符串中各个占位符被替换后的值。

这就意味着 stringArr.length - 1 === value.length 的结果总是为 true 。通过这种模式，我们可以将 stringArr 和 value 这两个数组交织在一起，重组结果字符串。

function tag(stringArr, ...value) {
	let result = '';

	for (let i = 0; i < value.length; i++) {
		result += stringArr[i];
		result += value[i];
	}

	result += stringArr[literals.length - 1];

	return result;
}
复制代码

标签模板的这种功能是非常强大的，当变量很多，或是数据需要一些处理，又或是要做出某种判断的时候，我们完全可以在 tag 函数中来处理，最终得到想要的结果。

五、HTML 模板

利用占位符和多行字符串，我们可以非常轻易地在 JavaScript 代码中使用 HTML 模板。

假设我们通过请求获得了以下的 JSON 数据：

// data
{
    "goodsId": 1,
    "price": 125,
    "goodsName": "斜挎包",
    "brand": "Dior",
    ...
}
复制代码

此时我们利用模板字符串来创建一个 HTML 模板。

function createHtml(data) {
    return `
    	<p>The ${data.brand}/${data.goodsName} sells $${data.price}.</p>
    `
}
复制代码

如果文章中错误或表述不严谨的地方，欢迎指正

也欢迎大家关注我的同名微信公众号：李等等扣丁