函数

Lambda

UTS

type XX = 1 | 2

TS

type XX = 1 | 2

模板标签函数语法（Tagged Template Literal）

Javascript

如何工作：

1. 模板字符串用 反引号 包裹，例如：

   `arg1=${1}, arg2=${2}`

2. 如果一个函数（如 myFunc）被用作模板标签，JavaScript 会将模板字符串解析为以下两部分：

   • 字符串数组: 由模板字符串中的静态部分组成。
   • 插值部分: 即模板字符串中动态计算的表达式（${}）。

3. 模板标签函数会接收到这些部分作为参数，第一参数是静态字符串数组，其余参数是插值的动态值。

---

代码解释

function myFunc(strings, ...values) {
  console.log('Static parts:', strings); // 模板中的静态部分
  console.log('Dynamic parts:', values); // 模板中的动态插值部分
}

myFunc`arg1=${1}, arg2=${2}`;

输出：

Static parts: [ 'arg1=', ', arg2=', '' ]
Dynamic parts: [ 1, 2 ]

• strings 是模板字符串中不变的部分：
  • ['arg1=', ', arg2=', '']
• values 是模板中动态插入的部分：
  • [1, 2]

---

应用场景

1. 安全性检查： 用于防止 SQL 注入或 XSS 攻击。例如，将动态插值的数据进行安全转义。

   function escapeHTML(strings, ...values) {
     return strings.reduce((result, str, i) => {
       const escapedValue = values[i - 1]?.replace(/</g, '&lt;').replace(/>/g, '&gt;') || '';
       return result + escapedValue + str;
     });
   }
   
   const safeHTML = escapeHTML`<p>${"<script>alert('hack')</script>"}</p>`;
   console.log(safeHTML); // 输出：<p>&lt;script&gt;alert('hack')&lt;/script&gt;</p>

2. 国际化处理： 用于格式化翻译字符串。

   function i18n(strings, ...values) {
     // 假设从某个语言包中获取翻译
     const translations = { hello: 'Hola', world: 'Mundo' };
     return strings
       .map((str, i) => str + (translations[values[i]] || values[i] || ''))
       .join('');
   }
   
   const result = i18n`hello ${'hello'} world ${'world'}`;
   console.log(result); // 输出：Hola Mundo

3. 日志格式化： 创建自定义日志函数。

   function log(strings, ...values) {
     console.log(`[LOG]: ${strings[0]}${values.join(' ')}`);
   }
   
   log`File processed: ${'example.txt'} with ${42} lines`;
   // 输出：[LOG]: File processed: example.txt with 42 lines

---

总结

模板标签函数（Tagged Template Literal） 是 JavaScript 中强大的功能，用于在模板字符串上应用自定义逻辑。它拆分模板字符串，允许动态值的特殊处理，尤其适用于国际化、安全过滤等场景。