JavaScript 模板字符串

在日常开发中，你可能会遇到需要构建多行字符串或者嵌入变量的情况。JavaScript 的模板字符串和标签模板可以帮助你更简洁地实现这些需求。

概述

模板字符串（Template Literals）是 ES6 引入的一种新的字符串表示法，用反引号（`）包围。模板字符串不仅可以包含普通字符串，还可以使用 ${} 语法嵌入变量或表达式，实现插值。标签模板（Tagged Templates）是模板字符串的一个扩展功能，可以通过自定义函数处理模板字符串，适用于需要特殊字符串处理的场景。

模板字符串的基本用法

1. 多行字符串：使用模板字符串可以方便地创建多行字符串，不需要使用繁琐的换行符 \n。
2. 插值表达式：通过 ${} 可以在字符串中嵌入变量和表达式，避免了字符串拼接的麻烦。

示例代码：

// 使用模板字符串创建多行字符串
const multiLineString = `这是一行文字
这又是另一行文字
最后一行文字`;

console.log(multiLineString);

// 使用插值表达式嵌入变量和表达式
const name = 'Alice';
const age = 25;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);

标签模板的基本用法

标签模板（Tagged Template Literals）功能，这是一种特殊的模板字符串用法，允许开发者自定义一个函数来处理模板字符串，从而扩展字符串的处理逻辑。

// 定义一个标签函数
function highlight(strings, ...values) {
  return strings.reduce((result, string, i) => {
    const value = values[i] ? `<strong>${values[i]}</strong>` : '';
    return result + string + value;
  }, '');
}

const user = 'Bob';
const action = 'logged in';

const message = highlight`User ${user} has ${action}.`;

console.log(message);