JavaScript 模板字面量

在 JavaScript 中，有一种称为“模板字面量”的语法，它允许我们通过简单地在字符串中包含变量表达式来动态创建字符串。这种语法减少了编写拼接字符串的复杂度，更容易让我们写出易读易维护的代码。

基础语法

使用模板字面量，我们可以用反单引号 `` 来创建新字符串。这些字符串可以包含简单的文本、变量表达式和一些特殊字符，如下所示：

const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // => Hello, Alice!

上面的例子中，我们创建了一个字符串，文本内容为 Hello, 和 !。中间的 ${name} 是一个变量表达式，它会被替换成变量 name 的值。

当使用模板字面量来拼接多个字符串时，我们也可以使用换行符和缩进来使代码更易读，如下所示：

const name = 'Alice';
const age = 18;
const introduction = `
  Hello, my name is ${name}.
  I am ${age} years old.
`;
console.log(introduction);

标签函数

除了基本语法，模板字面量还支持一种称为“标签函数”的特殊用法，我们可以在反单引号前添加一个函数名，来对字符串进行附加处理。这种方式可以用于很多场景，比如字符串拼接、国际化和安全处理等。

例如，我们可以定义一个标签函数 upperCase 来将字符串转换为大写：

function upperCase(strings, ...values) {
  return strings.reduce((result, string, index) => {
    return result + string + (values[index] || '').toUpperCase();
  }, '');
}

const name = 'Alice';
const age = 18;
const greeting = upperCase`Hello, ${name}! I am ${age} years old.`;
console.log(greeting); // => Hello, ALICE! I am 18 years old.

在 upperCase 函数内部，我们首先使用了 reduce 方法将字符串数组 strings 和变量数组 values 合并成一个字符串 result。在合并时，我们将每个变量的值转换为大写形式，然后与字符串紧密拼接。

原始模板字面量

在模板字面量中，我们还可以使用前置的 String.raw 函数，这个函数可以返回原始的字符串，不解释任何 escape 序列。

例如，下面的代码使用了 String.raw 函数和一些特殊字符，可以更好地展示出原始字符串：

const raw = String.raw`Hello,\nWorld! ${1 + 1}`;
console.log(raw); // => Hello,\nWorld! 2

总结

介绍了 JavaScript 中的模板字面量语法，包括基本语法和标签函数。使用模板字面量可以帮助我们更方便地拼接字符串，也能减少代码量和提高代码的可读性。