JavaScript 模板字符串（Template Strings） 是一种新的字符串表示方法，它允许在字符串中嵌入表达式，并且支持多行字符串，使用反引号（`）包围。

1. 创建模板字符串

模板字符串通过反引号（`）来定义，而不是单引号（'）或双引号（"）。它可以包含变量和表达式，也可以自动处理多行文本。

let name = "Alice";
let greeting = `Hello, ${name}!`;  // 使用 `${}` 嵌入表达式
console.log(greeting);  // 输出: Hello, Alice!

2. 插入变量或表达式

模板字符串允许在字符串中嵌入变量、表达式、函数调用等。

let name = "Bob";
let age = 25;
let message = `${name} is ${age} years old.`;  // 插入变量
console.log(message);  // 输出: Bob is 25 years old.

let sum = 10 + 5;
let result = `10 + 5 = ${sum}`;  // 插入表达式
console.log(result);  // 输出: 10 + 5 = 15

模板字符串中的 ${} 用来包含表达式，可以执行更复杂的操作，如函数调用或运算：

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

3. 多行字符串

模板字符串支持多行文本，不需要使用换行符（\n）或拼接符。

let multiLineString = `This is a string
that spans across
multiple lines.`;
console.log(multiLineString);
// 输出:
// This is a string
// that spans across
// multiple lines.

4. 标签模板字符串（Tagged Template Literals）

标签模板字符串允许你在模板字符串前面加上一个函数（标签），这个函数可以对模板字符串进行自定义处理。通过标签函数，你可以访问模板字符串的内容，并对其进行修改或处理。

function tag(strings, ...values) {
  let result = strings[0];
  values.forEach((value, index) => {
    result += value.toUpperCase() + strings[index + 1];
  });
  return result;
}

let name = "Alice";
let age = 25;
let message = tag`My name is ${name} and I am ${age} years old.`;
console.log(message);  // 输出: My name is ALICE and I am 25 years old.

标签函数接收模板字符串的文字部分和表达式部分，通过函数内部的操作可以返回处理后的字符串。

5. 嵌套模板字符串

模板字符串还支持嵌套。你可以在模板字符串中使用另一个模板字符串。

let inner = `world`;
let outer = `Hello, ${inner}!`;
console.log(outer);  // 输出: Hello, world!

总结

• 模板字符串通过反引号（`）定义，允许在字符串中插入变量、表达式等。
• 插值表达式通过 ${} 插入变量或计算结果。
• 支持多行字符串，无需使用换行符。
• 标签模板字符串可以在模板字符串前加上标签函数进行定制化处理。

模板字符串使得字符串操作更加灵活、简洁。更多详细内容请关其他相关文章！