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）可以处理模板字符串的内容。标签函数接收的参数包括：

1. 第一个参数：一个包含所有静态文本的数组。
2. 剩余参数：所有插入的表达式按顺序传递给标签函数。

标签函数的返回值将作为模板字符串的最终值。

示例：

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>`;

参考资料

1. MDN: Tagged Templates
2. Google/zx GitHub 仓库
3. Lit
4. MDN: Rest Parameters
5. MDN: Operator Precedence

模板字符串极大地简化了字符串操作，并提供了强大的可扩展性。无论是简单的字符串插值，还是复杂的带标签模板，它都能为 JavaScript 编程提供极大的便利和灵活性。