JavaScript中的模板字符串与标签模板

描述
模板字符串是ES6引入的新语法，使用反引号（`）标识，可以嵌入变量和表达式，支持多行字符串。标签模板是一种特殊的函数调用形式，允许你通过自定义函数解析模板字符串。

基础语法与特性

1. 基本用法：用反引号包裹字符串，变量或表达式通过${}嵌入

const name = "Alice";
const message = `Hello, ${name}!`; // "Hello, Alice!"

2. 多行字符串：直接换行即可（传统字符串需用\n）

const multiLine = `
  第一行
  第二行
`;

3. 表达式嵌入：${}内可放置任意有效JavaScript表达式

const a = 5;
const b = 10;
console.log(`结果是：${a + b}`); // "结果是：15"

标签模板详解

1. 基本结构：在模板字符串前直接添加函数名，函数会自动被调用

function tag(strings, ...values) {
  console.log(strings); // 静态字符串部分数组
  console.log(values);  // 插值变量组成的数组
}

const name = "Bob";
const age = 20;
tag`姓名：${name}，年龄：${age}`;
// strings: ["姓名：", "，年龄：", ""]
// values: ["Bob", 20]

2. 参数解析过程：

• 第一个参数是字符串数组，包含模板字符串被插值分割后的所有静态部分
• 后续参数依次对应每个插值表达式的计算结果
• 字符串数组长度总是比插值数量多1（头尾可能有空字符串）

标签模板实战应用

1. 安全HTML转义（防XSS攻击）：

function safeHtml(strings, ...values) {
  let result = strings[0];
  values.forEach((value, i) => {
    const escaped = String(value)
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");
    result += escaped + strings[i + 1];
  });
  return result;
}

const userInput = "<script>alert('xss')</script>";
const safeOutput = safeHtml`<div>${userInput}</div>`;
// 输出：<div>&lt;script&gt;alert('xss')&lt;/script&gt;</div>

2. 国际化字符串处理：

function i18n(strings, ...values) {
  const translations = {
    "Hello, {name}!": "你好，{name}！",
    "You have {count} messages": "您有{count}条消息"
  };
  const key = strings.reduce((acc, str, i) => 
    acc + str + (values[i] ? `{${i}}` : ""), "");
  return translations[key].replace(/\{(\d+)\}/g, (_, n) => values[n]);
}

const name = "李四";
const count = 5;
console.log(i18n`Hello, ${name}!`); // "你好，李四！"
console.log(i18n`You have ${count} messages`); // "您有5条消息"

3. 高级应用：样式组件模板（类似styled-components原理）：

function css(strings, ...values) {
  const style = strings.reduce((acc, str, i) => 
    acc + str + (values[i] || ""), "");
  return `<style>${style}</style>`;
}

const color = "red";
const style = css`
  .button {
    background: ${color};
    padding: 10px;
  }
`;

注意事项

1. 原始字符串访问：通过strings.raw可获取转义前的原始字符串

function showRaw(strings) {
  console.log(strings.raw[0]);
}
showRaw`Hello\nWorld`; // 实际输出"Hello\nWorld"（未转义）

2. 标签函数必须返回最终处理结果，否则得到undefined

通过标签模板可以实现DSL（领域特定语言），在保持语法简洁的同时提供强大的元编程能力，是现代前端库（如styled-components）的重要技术基础。