JavaScript模板字面量 (模板字符串)

JavaScript模板字面量，也叫模板字符串，是一种允许在字符串中嵌入表达式的语法。它们使用反引号 (`)包裹字符串，而不是单引号或双引号。模板字面量可以包含一个或多个占位符，这些占位符使用 ${expression} 的形式嵌入到字符串中。

使用模板字面量

使用模板字面量非常简单，只需要使用反引号包裹字符串即可。可以在模板字面量内部嵌入变量名或表达式来动态生成字符串的值。

const variable = 'Hello';
const templateLiteral = `${variable}, world!`;
console.log(templateLiteral); // Output: "Hello, world!"

在上面的例子中，我们定义了一个变量 variable，使用模板字面量将其连接到一个字符串中。

处理多行文本

在传统的字符串中，如果要使用多行文本，需要使用转义字符（\n）来表示换行符。但是，使用模板字面量，可以直接在字符串中使用换行符，使代码更可读。

const multiLineString = `This is a
multi-line
string.`;
console.log(multiLineString);
// Output:
// This is a
// multi-line
// string.

在上面的例子中，我们使用了多行文本来展示了如何使用模板字面量创建多行字符串。

插入表达式

使用 ${expression} 将变量或表达式插入到字符串中。表达式可以是变量、函数调用、算术表达式等。

const name = 'World';
console.log(`Hello, ${name}!`);
// Output: Hello, World!

const num1 = 5;
const num2 = 10;
console.log(`The sum of ${num1} and ${num2} is ${num1 + num2}.`);
// Output: The sum of 5 and 10 is 15.

在第一个示例中，我们插入了一个变量名。在第二个示例中，我们插入了两个变量，以及一个算术表达式。

使用标签函数

模板字面量可以被称为标签函数的参数。标签函数是一个接收模板字面量和插入表达式的函数。

标签函数可以用来处理模板字面量的一些特定逻辑，例如转义字符或字符串格式化。

function myTagFunction(strings, expression1, expression2) {
  console.log(strings); // Output: ["The product of ", " and ", " is: ", ""]
  console.log(expression1); // Output: 6
  console.log(expression2); // Output: 9
  return expression1 * expression2;
}

const num1 = 6;
const num2 = 9;
const result = myTagFunction`The product of ${num1} and ${num2} is: ${num1 * num2}.`;
console.log(result); // Output: 54

在上面的例子中，我们定义了一个标签函数 myTagFunction。此函数将模板字面量和插入表达式作为参数，并通过 console.log 输出它们。然后，函数返回表达式的乘积。

最后，我们在调用标签函数时使用了模板字面量。函数将运行，并输出参数，然后返回表达式的值。

结论

JavaScript模板字面量是一种功能强大的语法，可用于生成可读性更高的字符串。它们使代码更易于阅读和维护，并且可以通过使用标签函数来实现各种自定义逻辑。