JavaScript模板字面量标签函数使用详解

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript 模板字面量标签函数如何使用？》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

标签函数通过接收引擎拆分后的字符串数组和表达式值处理模板，如myTag(['a','b','c'], x, y)，strings长度总比expressions多1，常用于拼接、转义等场景。

模板字面量的标签函数通过接收解析后的字符串片段和对应的变量值来处理模板字符串。它不直接处理原始字符串，而是由 JavaScript 引擎先将模板拆分，再传给标签函数。

标签函数的基本结构

标签函数是一个普通函数，用在模板字符串前，例如 myTag`Hello ${name}`。JavaScript 会自动把模板拆成两部分传入函数：

• strings：一个类数组，包含模板中所有静态字符串部分
• ...expressions：剩余参数，按顺序包含插值表达式的计算结果

函数定义形式如下：

function myTag(strings, ...expressions) {
  // 处理逻辑
}

参数的实际传递方式

对于模板 myTag`a${x}b${y}c`，引擎会将其拆解并调用：

myTag(['a', 'b', 'c'], x, y)

其中 strings 是 ['a', 'b', 'c']，expressions 是 [x, y]。注意 strings 的长度总是比 expressions 多 1。

常见处理模式

标签函数通常遍历 strings 和 expressions，交替拼接或转换内容。典型实现：

function upper(strings, ...exprs) {
  let result = '';
  for (let i = 0; i < exprs.length; i++) {
    result += strings[i];
    result += String(exprs[i]).toUpperCase();
  }
  result += strings[strings.length - 1]; // 添加最后一个字符串
  return result;
}
<p>upper<code>Hello ${'world'}!</code>; // 输出: Hello WORLD!
</p>

实际应用场景

标签函数可用于构建安全的 HTML 转义、国际化、SQL 拼接等。例如简单 HTML 转义：

function html(strings, ...exprs) {
  const escape = s => s.replace(/[<>&]/g, m => 
    ({ '<': '&lt;', '>': '&gt;', '&': '&amp;' })[m]
  );
<p>return strings.map((str, i) => 
str + (i < exprs.length ? escape(String(exprs[i])) : '')
).join('');
}</p><p>html<code>&lt;p&gt;${'&lt;script&gt;alert()&lt;/script&gt;'}&lt;/p&gt;</code>;
// 输出: <p>&lt;script&gt;alert()&lt;/script&gt;</p>
</p>

基本上就这些。关键是理解 JavaScript 如何拆分模板并传参，然后在函数内控制输出格式。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。