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

描述
模板字符串是ES6引入的新语法，使用反引号（`）包裹字符串内容，支持多行文本、表达式插值和标签模板功能。标签模板是一种特殊的函数调用语法，允许自定义模板字符串的解析方式。

基础语法与特性

1. 基本用法：普通字符串使用单/双引号，模板字符串使用反引号

   const name = "Alice";
   const normalStr = 'Hello, ' + name;  // 传统拼接
   const templateStr = `Hello, ${name}`; // 模板字符串
   

2. 多行字符串：直接换行无需转义符

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

3. 表达式插值：通过${}嵌入任意JavaScript表达式

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

标签模板详解
标签模板是模板字符串的高级应用，通过在模板字符串前添加函数名调用函数：

tagFunction`模板内容${表达式1}更多内容${表达式2}`;

执行过程分析

1. 参数解析：

   • 第一个参数：字符串部分组成的数组（由表达式分割后的静态文本）
   • 后续参数：每个表达式的计算结果按顺序传入

2. 示例分步解析：

   const person = "Alice";
   const age = 25;
   
   function tag(strings, ...values) {
     console.log(strings);  // ["姓名：", "，年龄：", ""]
     console.log(values);   // ["Alice", 25]
   }
   
   tag`姓名：${person}，年龄：${age}`;
   

标签模板实战应用

1. 自定义字符串处理：

   function highlight(strings, ...values) {
     return strings.reduce((result, str, i) => 
       result + str + (values[i] ? `<mark>${values[i]}</mark>` : ''), '');
   }
   
   const output = highlight`今天是${new Date().getDate()}号，温度${25}℃`;
   // 输出：今天是<mark>15</mark>号，温度<mark>25</mark>℃
   

2. 防XSS攻击的HTML转义：

   function safeHtml(strings, ...values) {
     return strings.reduce((result, str, i) => {
       const value = values[i] ? String(values[i])
         .replace(/&/g, '&')
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;') : '';
       return result + str + value;
     }, '');
   }
   
   const userInput = '<script>alert("xss")</script>';
   safeHtml`<div>${userInput}</div>`; // 转义危险字符
   

3. 国际化字符串处理：

   function i18n(strings, ...values) {
     const translated = strings.map(str => translate(str)); // 伪代码翻译函数
     return translated.reduce((result, str, i) => 
       result + str + (values[i] || ''), '');
   }
   
   i18n`欢迎，${userName}！`; // 根据语言环境返回不同翻译
   

特殊特性说明

1. raw原始字符串：通过strings.raw访问转义前的原始内容

   function showRaw(strings) {
     console.log(strings.raw[0]); // 包含原始转义字符
   }
   
   showRaw`换行符：\n`; // 实际输出："换行符：\\n"
   

2. 应用场景总结：

   • DSL（领域特定语言）开发
   • 样式组件（如Styled-components）
   • 国际化处理
   • 安全字符串处理

注意事项

1. 表达式求值时机：表达式在传入标签函数前已完成计算
2. 字符串数组长度恒为n（表达式数量为n-1）
3. 空表达式处理：连续表达式会产生空字符串项

   tag`a${1}b${2}c`;    // strings: ["a", "b", "c"]
   tag`a${1}${2}b`;    // strings: ["a", "", "b"]
   

通过标签模板，开发者可以完全控制模板字符串的解析逻辑，实现类型检查、本地化、XSS防护等高级功能，是元编程的重要工具。