JS Template String

在 JavaScript 中，模板字符串（Template Strings）是一种新的字符串字面量语法，它允许你创建多行字符串并嵌入表达式。这种语法在 ES6/ECMAScript 2015 中被引入，并且被广泛用于现代 JavaScript 开发中。

模板字符串使用反引号 (`) 而不是单引号 (') 或双引号 (") 来定义。这允许你在字符串中自由使用单引号和双引号，而不需要转义它们。

字符串插值

使用模板字符串能够通过 ${expression} 语法将表达式嵌入到字符串中，表达式的结果将会被计算并转换为字符串形式，然后与其他字符串部分拼接起来。

示例：

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

在上面的代码中，${name} 是一个表达式，它的值（这里是变量 name 的值）会被计算，并和前后的静态字符串拼接在一起。

多行字符串

模板字符串也支持自然的多行字符串。

示例：

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

在以上的代码中，模板字符串中的换行被保留在结果字符串中，因此可以很容易地创建跨多行的字符串内容。

标签模板

另外，模板字符串可以搭配标签函数（Tagged Templates）使用，这种情况下，模板字符串会被处理为一个函数调用。函数第一个参数是字符串数组，后面的参数是每个插值计算后的值。

示例：

function tag(strings, ...values) {
  console.log(strings); // ["Hello, ", "! You have ", " unread messages."]
  console.log(values); // ['Alice', 10]
  // 返回拼接后的新字符串
  return strings.reduce(
    (result, str, i) => result + str + (values[i] || ""),
    ""
  );
}
 
let userName = "Alice";
let messageCount = 10;
let taggedResult = tag`Hello, ${userName}! You have ${messageCount} unread messages.`;
console.log(taggedResult);

使用模板字符串的好处包括：使字符串更易读、方便拼接变量和表达式、支持多行文本，以及通过标签模板提供的灵活性。这些都使得模板字符串成为现代 JavaScript 开发的一个有用特性。