JavaScript 的模板字面量标签函数如何接收参数并处理字符串？-js教程-PHP中文网

JavaScript 的模板字面量标签函数如何接收参数并处理字符串？

betcha

发布： 2025-10-11 18:26:01

原创

696人浏览过

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

javascript 的模板字面量标签函数如何接收参数并处理字符串？

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

标签函数的基本结构

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

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

函数定义形式如下：

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

登录后复制

参数的实际传递方式

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

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

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

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

常见处理模式

标签函数通常遍历 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!

登录后复制

实际应用场景

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

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

登录后复制

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

以上就是JavaScript 的模板字面量标签函数如何接收参数并处理字符串？的详细内容，更多请关注php中文网其它相关文章！