JavaScript 模板字符串

在 JavaScript 中，模板字符串（Template Strings）是一种强大的字符串字面量表示法，允许你嵌入表达式，并在字符串中执行多行文本和函数调用等操作。模板字符串使用反引号（`）括起来，并且可以包含占位符 ${}，这些占位符可以插入变量或表达式的结果。

1. 基本语法

模板字符串的基本语法非常简单，只需要使用反引号来定义字符串，并在需要插入变量或表达式的地方使用 ${}。

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, Alice!

在上面的例子中，${name} 是一个占位符，它会被变量 name 的值所替换。

2. 多行字符串

模板字符串允许你直接在字符串中换行，而不需要使用转义字符（如 \n）。这使得在 JavaScript 中编写多行文本变得非常简单。

let multilineString = `This is a string
that spans multiple
lines.`;
console.log(multilineString);

输出将会是：

This is a string
that spans multiple
lines.

3. 嵌入表达式

除了变量，你还可以在模板字符串中嵌入任何有效的 JavaScript 表达式。表达式会被计算，并且其结果会被转换为字符串（如果它不是字符串的话），然后插入到占位符的位置。

let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // 输出: The sum of 5 and 10 is 15.

4. 函数调用

你也可以在模板字符串中调用函数，并将函数的返回值插入到字符串中。

function getGreeting(name) {
  return `Hello, ${name}!`;
}

let user = "Bob";
let message = `${getGreeting(user)} How are you?`;
console.log(message); // 输出: Hello, Bob! How are you?

5. 标签模板（Tagged Templates）

标签模板是一种高级特性，它允许你通过函数来处理模板字符串。标签模板的语法是在模板字符串前面加上一个函数名，并用反引号括起来的模板字符串作为该函数的第一个参数，后续参数是模板字符串中每个占位符的值。

function tag(strings, ...values) {
  console.log(strings); // 输出: [ 'Hello, ', ' world ', '!' ]
  console.log(values);  // 输出: [ 'Alice', 42 ]
  return `${strings[0]}${values[0]}${strings[1]}${values[1]}${strings[2]}`;
}

let user = "Alice";
let age = 42;
let message = tag`Hello, ${user} ${age} world!`;
console.log(message); // 输出: Hello, Alice 42 world!

在上面的例子中，tag 函数接收到了一个字符串数组 strings 和一个值数组 values。strings 数组包含了模板字符串中的静态文本部分，而 values 数组则包含了所有占位符的值。

6. 实际应用

模板字符串在实际开发中非常有用，特别是在需要构建动态内容或处理多行文本时。例如，在构建 HTML 字符串、格式化消息或生成 SQL 查询时，模板字符串都可以提供简洁而强大的解决方案。

总结

模板字符串是 JavaScript 中一个强大且灵活的特性，它使得字符串的拼接和格式化变得更加简单和直观。通过掌握模板字符串的基本语法和高级特性（如标签模板），你可以更加高效地编写和处理字符串相关的代码。

本文地址：https://www.tides.cn/p_js-string-tpl