JavaScript 的模板字符串
JavaScript 中的 模板字符串（Template Literals）使用反引号 `` 包裹。它提供了更强大的功能，如字符串插值、多行文本、嵌套模板以及带标签的模板。以下是模板字符串在 JavaScript 中的主要功能和使用场景。
1. 字符串插值
模板字符串的一个显著特性是字符串插值。我们可以在字符串中使用 ${} 包裹变量或表达式来插入其值，简化了以往用 + 拼接字符串的写法。
示例：
let name = "小明";
let age = 20;
let greeting = `你好，我是 ${name}，今年 ${age} 岁。`;
console.log(greeting);
// 输出：你好，我是 小明，今年 20 岁。
${} 中可以插入任意 JavaScript 表达式，包括函数调用或三元运算符。
2. 多行文本
使用模板字符串，编写多行文本变得更加方便。在以前的做法中，拼接多行字符串需要使用 \n 或者多个字符串拼接操作。
示例：
let multiline = `这是一行
这又是一行
这还可以继续`;
console.log(multiline);
// 输出：
// 这是一行
// 这又是一行
// 这还可以继续
3. 嵌套模板
模板字符串支持嵌套，在一个模板字符串中可以嵌套另一个模板字符串，这使得动态构建复杂的字符串变得更加灵活。
示例：
let name = "小明";
let nested = `你好，${`我的朋友是${name}`}`;
console.log(nested);
// 输出：你好，我的朋友是小明
4. 带标签的模板
带标签的模板（Tagged Templates）是模板字符串的高级用法。标签函数（Tag Function）可以处理模板字符串的内容。标签函数接收的参数包括：
- 第一个参数：一个包含所有静态文本的数组。
- 剩余参数：所有插入的表达式按顺序传递给标签函数。
标签函数的返回值将作为模板字符串的最终值。
示例：
function tag(strings, ...values) {
console.log(strings); // 模板中的静态部分
console.log(values); // 模板中的动态部分
return `处理后的内容：${values.join(', ')}`;
}
let name = "小明";
let age = 20;
let message = tag`姓名: ${name}, 年龄: ${age}`;
console.log(message);
// 输出：
// ["姓名: ", ", 年龄: ", ""]
// ["小明", 20]
// 处理后的内容：小明, 20
解释：
strings包含了模板中不变的部分，即"姓名: "、", 年龄: "等。values包含了插入的变量或表达式的值，如"小明"和20。
5. 可变参数函数（Rest Parameters）
标签函数是 可变参数函数（Variadic Functions），可以使用 ... 语法收集模板中的变量，并将它们作为数组传入。
示例：
function restExample(...args) {
console.log(args);
}
restExample(1, 2, 3);
// 输出：[1, 2, 3]
在标签函数中，...values 可以收集所有插入的动态内容。
6. 带标签模板的实际应用
带标签模板在一些高级应用场景中非常有用，尤其是在使用 Google 的 zx 命令行工具或 Google 的 Lit 框架 时。它们利用带标签模板处理字符串，并通过模板提高代码的可读性和功能性。
例如，Lit 使用带标签模板来定义 HTML 片段：
import {html, render} from 'lit';
const template = html`<p>Hello, ${name}!</p>`;
参考资料
模板字符串极大地简化了字符串操作，并提供了强大的可扩展性。无论是简单的字符串插值，还是复杂的带标签模板，它都能为 JavaScript 编程提供极大的便利和灵活性。