模板字符串有哪些高级用法？

ES6的模板字符串远不止是包裹字符串的反引号。它通过${}插值和标签模板功能，为我们提供了强大的字符串处理能力，从创建动态内容到构建领域特定语言（DSL），其用途比表面看起来要深入得多。

动态插值与表达式计算

最基本的用法是在字符串中嵌入变量或任意JavaScript表达式。表达式的结果会被计算并转换为字符串，无缝地拼接进最终结果。

const name = 'Alice';
const score = 95;
const message = `用户 ${name.toUpperCase()} 的得分是：${score + 5}`;
console.log(message); // 用户 ALICE 的得分是：100

这使得创建包含动态数据的字符串变得异常简洁，无需再使用繁琐的+操作符进行连接。你可以在${}内进行函数调用、三元运算等复杂操作。

多行字符串的便捷书写

模板字符串自然地支持多行文本，所有的空格、换行符都会被保留。这在编写HTML模板、长文本或代码生成时非常有用。

const html = `
<div class="card">
  <h2>${title}</h2>
  <p>${content}</p>
</div>
`;

这彻底告别了旧时代需要使用n和字符串拼接来构造多行文本的麻烦，极大地提升了代码的可读性。

标签模板：函数调用的一种特殊形式

这是模板字符串最强大的特性。在模板字符串前加上一个函数名（标签），该函数会被调用，并接收处理模板内容的能力。

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return `${result}${str}<mark>${values[i] || ''}</mark>`;
  }, '');
}
const name = 'JavaScript';
const feeling = 'powerful';
const sentence = highlight`学习 ${name} 让我感觉 ${feeling}！`;
console.log(sentence); // 学习 <mark>JavaScript</mark> 让我感觉 <mark>powerful</mark>！

标签函数highlight的第一个参数是一个由所有普通字符串部分组成的数组strings，后续参数...values是所有插入表达式计算值的集合。通过操作这些参数，我们可以实现自定义的转义、国际化、样式化等逻辑。

内置的String.raw标签

String.raw是一个内置的标签函数，它可以获取模板字符串的原始内容，忽略转义字符。

const path = String.raw`C:UsersDocumentsfile.txt`;
console.log(path); // C:UsersDocumentsfile.txt (这里n不会被解释为换行)

const normal = `C:UsersDocumentsfile.txt`;
console.log(normal); // C:UsersDocumentsfile.txt (这里的U会引发错误)

这在处理包含大量反斜杠的字符串（如Windows路径或正则表达式）时非常方便，避免了双重转义的困扰。

在实际开发中，标签模板常被用于创建安全的HTML转义、构造SQL查询（需谨慎避免注入）、实现简单的模板引擎或进行国际化的字符串格式化。理解标签模板的运作机制，能够让你将字符串处理提升到元编程的层面，编写出更具表达力和安全性的代码。