学习可以嵌入表达式的字符串字面量——模板字符串

在JavaScript中，ES6引入了一种新的字符串表示法——模板字符串（Template Literals）。模板字符串不仅仅使得字符串的表示更加灵活，还支持在字符串中嵌入表达式，从而提高了代码的可读性和可维护性。通过学习模板字符串，开发者可以在开发过程中更加高效地操作字符串。

1. 模板字符串的基本语法

模板字符串通过反引号（`）定义，而不是传统的单引号（'）或双引号（"）。它可以跨越多行，并且支持嵌入变量和表达式。

1.1 多行字符串

模板字符串支持多行字符串的定义，无需使用特殊字符（如\n）来换行。

const message = `这是一个
多行
字符串。`;

console.log(message);
// 输出：
// 这是一个
// 多行
// 字符串。

解释：

使用反引号（`）可以轻松创建跨多行的字符串。

2. 嵌入表达式

模板字符串的一个重要特性是可以在字符串中嵌入表达式。通过${}语法，可以将变量或者任何有效的表达式嵌入到字符串中。

2.1 插入变量

const name = "小明";
const age = 25;
const message = `我的名字是${name}，今年${age}岁。`;

console.log(message);
// 输出：我的名字是小明，今年25岁。

解释：

${name}和${age}是表达式，占位符部分会被相应的变量值替换。

2.2 插入计算表达式

不仅仅是变量，模板字符串中还可以嵌入任意的JavaScript表达式，甚至是函数调用和数学运算。

const a = 10;
const b = 5;
const result = `10加5等于${a + b}`;

console.log(result);
// 输出：10加5等于15

解释：

${a + b}是一个计算表达式，结果会插入到字符串中。

3. 嵌入函数调用

模板字符串中嵌入函数调用是一个非常常见的使用场景，尤其是在动态生成内容时。

function greet(name) {
  return `你好，${name}`;
}

const message = `${greet("小红")}，欢迎光临！`;

console.log(message);
// 输出：你好，小红，欢迎光临！

解释：

${greet("小红")}会调用greet函数，并将其返回值插入到模板字符串中。

4. 标签模板

标签模板（Tagged Template）是模板字符串的高级用法。它允许你创建一个函数来处理模板字符串中的内容，而不是直接插入到字符串中。标签模板使得我们可以实现更复杂的模板逻辑，如自定义格式化、拼接等。

4.1 定义标签函数

标签函数接受两个参数：一个是包含模板字符串文字的数组，另一个是表达式的数组。

function tag(strings, ...values) {
  console.log(strings); // 包含模板文字的数组
  console.log(values);  // 包含表达式值的数组
  return `${strings[0]}${values[0]}${strings[1]}${values[1]}`;
}

const name = "小明";
const age = 25;

const message = tag`我的名字是${name}，今年${age}岁。`;

console.log(message);
// 输出：
// 我的名字是
// 小明
// ，今年
// 25
// 岁。
// 输出：
// 我的名字是小明，今年25岁。

解释：

tag函数会接收模板字符串中的文字和表达式值，并允许我们通过自定义逻辑来处理这些数据。

5. 总结与应用

模板字符串的优势：
- 多行字符串：直接通过反引号创建多行字符串，无需使用\n。
- 嵌入表达式：通过${}插入变量或表达式，使得字符串操作更加直观和灵活。
- 支持函数调用：可以嵌入函数调用，并将返回值直接插入字符串中。
标签模板的应用：
- 标签模板允许我们定义一个函数来处理模板字符串，并且能通过自定义逻辑处理模板中的内容，这在构建自定义字符串格式时非常有用。