JavaScript 中的字符串插值

字符串插值是指在一个字符串中嵌入变量或表达式，以动态生成最终的字符串。在 JavaScript 中，字符串插值可以通过模板字面量（Template literals）实现。

模板字面量（Template literals）

模板字面量使用反引号（`）包围，可以在其中使用嵌入式表达式（Expression Interpolation）：

const name = 'John';
const message = `Hello, ${name}!`; // 输出：Hello, John!

嵌入式表达式可以是任意的表达式、变量或函数调用。在模板字面量中，将使用 ${} 包围表达式，其中 ${} 中的内容将被计算并插入最终的字符串中。

const a = 3;
const b = 4;
const sum = `The sum of ${a} and ${b} is ${a + b}`; // 输出：The sum of 3 and 4 is 7

模板字面量还支持多行字符串，可以在字符串中直接换行：

const message = `This is a very
long message that spans
multiple lines.`;

标签模板（Tagged Templates）

除了普通的模板字面量，JavaScript 还支持标签模板（Tagged Templates），可以在模板字面量前添加一个标签（函数名），这个标签会被调用，并将模板字面量拆分成多个字符串和表达式。

function highlight(strings, ...values) {
  let result = '';
  strings.forEach((string, i) => {
    result += string;
    if (values[i]) {
      result += `<mark>${values[i]}</mark>`;
    }
  });
  return result;
}

const name = 'John';
const message = highlight`Hello, ${name}!`; // 输出：Hello, <mark>John</mark>!

在上面的示例中，highlight 函数将模板字面量拆分成了 strings 和 values 两个数组。strings 数组包含了模板字面量中的所有字符串，例如 Hello, 和 !；values 数组包含了模板字面量中所有表达式的值，例如 name。

highlight 函数将模板字面量中的每个字符串都输出，并在每个与表达式对应的位置输出 <mark> 标签，将表达式的值高亮显示。

总结

JavaScript 中的字符串插值可以使用模板字面量和标签模板实现。模板字面量支持嵌入式表达式和多行字符串，标签模板可以对解析出来的所有字符串和表达式进行进一步的处理。在实际开发中，我们可以根据具体情况选择不同的方式进行字符串插值，以达到更好的效果。