本文已参与「新人创作礼」活动，一起开启掘金创作之路

---

1. 什么是模板字符串 ？

模板字符串：是允许嵌入表达式的字符串（可以使用多行字符串和字符串插值功能）

它的写法，以反引号 ` 开头，以反引号 ` 结尾

let str = `这是一个模板字符串`;

---

2. 模板字符串的用法

它与一般字符串不同，会保留空格，换行符和缩进

const str = `第一      行
第二行
	第三行`
console.log(str);

• 它还可以进行字符串插值，即将其它值插入到字符串中

字符串插值的写法：   一个美元符号，花括号 ${val}，val写想插入的值

let name = 'XiXiHaHa', age = 18;
let sayHello = `Hello! My name is ${name}.
My age is ${age}.`
console.log(sayHello);

---

3. 模板字符串标签函数

通过标签函数可以自定义插值行为 （标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关）

例如：

let a = 1, b = 2;
//strings:字符串数组---以${}分分隔符分割得到的数组
//aVal：模板字符串中第一个${}的值
//bVal：模板字符串中第二个${}的值
//abSum：模板字符串中第三个${}的值
function addSum(strings, aVal, bVal, abSum) {
    console.log(strings);
    console.log(aVal);
    console.log(bVal);
    console.log(abSum);
}
let abSum = addSum`${a} + ${b} = ${a + b}`;

让我们通过一个例子来理解一下它的应用：

let a = 1, b = 2, c = 3;
// 由于参数不确定，可以使用剩余参数在这里
function addSum(strings, ...val) {
    return strings[0] + 
    val.map((e, i) => `${e}${strings[i + 1]}`) 
    .join('');
}

let abSum = addSum`${a} + ${b} = ${a + b}`;
console.log(abSum);

let abcSum = addSum`${a} + ${b} + ${c} = ${a + b + c}`;
console.log(abcSum);