什么是模板字符串？

推荐答案

模板字符串（Template Literals）是 ECMAScript 6 引入的一种新的字符串语法，使用反引号（`）包裹字符串内容。模板字符串支持多行字符串、嵌入表达式以及字符串插值等功能。

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

本题详细解读

1. 基本语法

模板字符串使用反引号（`）来定义字符串，而不是传统的单引号或双引号。例如：

const str = `This is a template string`;

2. 多行字符串

模板字符串可以直接包含换行符，而不需要使用 \n 或字符串拼接来实现多行字符串。

const multiLine = `
This is line 1.
This is line 2.
`;
console.log(multiLine);

3. 嵌入表达式

模板字符串支持通过 ${} 语法嵌入表达式，表达式的结果会被转换为字符串并插入到模板字符串中。

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

4. 标签模板

模板字符串可以与函数结合使用，形成标签模板（Tagged Templates）。标签模板允许你自定义模板字符串的处理方式。

// www.javascriptcn.com code example
function tag(strings, ...values) {
  console.log(strings); // 输出: ["Hello, ", "!"]
  console.log(values);  // 输出: ["Alice"]
  return "Processed string";
}

const name = "Alice";
const result = tag`Hello, ${name}!`;
console.log(result); // 输出: Processed string

5. 原始字符串

模板字符串还支持访问原始字符串内容，即未转义的字符串内容。可以通过 String.raw 或标签模板中的 raw 属性来实现。

const rawString = String.raw`This is a raw string with \n newline characters.`;
console.log(rawString); // 输出: This is a raw string with \n newline characters.

6. 适用场景

模板字符串非常适合用于需要动态生成字符串的场景，例如拼接 HTML 模板、生成动态 SQL 查询、格式化输出等。

const user = { name: "Bob", age: 30 };
const userInfo = `
  <div>
    <p>Name: ${user.name}</p>
    <p>Age: ${user.age}</p>
  </div>
`;
console.log(userInfo);

通过模板字符串，开发者可以更简洁、直观地处理字符串操作，提高代码的可读性和可维护性。