昨天学习了JS相关的基础知识，了解了JS变量、常量的声明，以及let、const的区别，今天学习了字符串模板，发现这真是一个好东西，非常实用，下面我把今天所学的内容总结梳理一下，把重点知识跟大家分享一下，也便于日后我复习所用。

一、模板字面量

模板字面量是在字符串中允许插入表达式的字符串字面量，我们可以使用多行字符串和字符串的插值功能。在ES2015（即：ES6）规范的先前版本中被称为“模板字符串”。

• 语法

` string `

` string ${expression} `

` string ${expression} string `

• 解释

模板字符串是增强版的字符串(Plus+)，使用反引号（` `）来替代普通字符串中的单双引号，其中${expression}表示占位符。

注意在模板字符串中如果想使用反引号（`）需要加一个转义符（\），即：\`

• 普通字符串

console.log('This is my first JS Code'); // This is my first JS Code

• 效果图：

• 多行字符串

在以前的字符串中，如果我们想要多行字符串，需要用到换行符(\n)，例如：

console.log('This is my first JS Code \n' + 
'This is my second JS Code');

• 效果如图：

但是，现在可以利用模板字符串简化这个问题：

console.log(`This is my first JS Code
This is my second JS Code`);

• 字符串中嵌入变量、表达式

传统的JS表达式需要这样写：

let num = 30;
let price = 100;
let res = '商品数量' + num + ', 单价：' + price + '元，总计：' + num * price;

使用上述传统的表达式写起来看着非常的乱，不直观，有时候还容易把连接符(+)写漏掉了，使用了ES6的模板字符串可以很好的避免这个问题：

res = `商品数量：${num}，单价：${price}，总计：${num * price}`;
console.log(res); // 商品数量：30，单价：100，总计：3000

以上结果都输出：

商品数量：30，单价：100，总计：3000

• 标签函数

标签可以用函数来解析模板字符串。标签函数的第一个参数是一个包含了字符串值的数组，剩余的参数与表达式相关。

let num = 10;
let price = 99;

function show(strings, var1, var2) {
    console.log(strings);
    console.log(var1, var2);
}

show `商品数量：${num}单价：${price}总计：${num * price}`;

• 输出结果如图：

由上图可以看出，strings的值是一个由多组字符串组成的数组，va1，var2的值分别为num和price的值，由此结果可以很明显的看到，在使用标签函数时，模板字符串会被分割成多个部分，然后传入标签函数中进行处理，并且是以${expression}为分隔符进行分割的。从这个结论我们可以做一个总结：

1. strings：以${}为分隔符分割得到的字符串数组；
2. var1：模板中第一个${}的值；
3. var2：模板中第二个${}的值；
4. 如果还有var3，var4，var5...等变量，那么就以此类推即可。

以上就是我所学的模板字符串的几个常用的方法，总体感觉还不算是太难，上手很容易，根据我所学的内容，我对模板字符串做了如下总结：

• 在表示多行字符串时，所有的空格、缩进、换行都将被保留在输出中；
• 表达式大括号内(${})可以放任意的JavaScript表达式，并进行运算，以及对象属性的引用；
• 可以调用函数；
• 模板字符串可以嵌套。