0

0

JavaScript中的标签模板是什么_它如何扩展字符串功能

夜晨

夜晨

发布时间:2025-12-31 20:49:54

|

493人浏览过

|

来源于php中文网

原创

javascript的标签模板是一种函数调用机制,非语法糖;它将模板字符串的静态片段(含raw属性)和插值结果作为参数传入标签函数,支持拦截、转换与校验。

javascript中的标签模板是什么_它如何扩展字符串功能

什么是 JavaScript 的标签模板(Tagged Templates)

标签模板不是语法糖,而是一种函数调用机制:当你写 `hello ${name}` 并在前面加一个函数名,比如 upper`hello ${name}`,JavaScript 就会把模板字符串的静态部分和插值表达式结果分别传给 upper 函数处理,而不是直接拼成字符串。

它让字符串构建过程可拦截、可转换、可校验,是原生支持“字符串 DSL”的关键能力。

标签函数接收什么参数

每个标签函数都会收到两个关键参数:

  • 第一个参数 strings:一个类数组对象(Array-like),包含所有静态文本片段,其 raw 属性保留原始转义(比如 不被解释)
  • 后续参数(...values):对应每个 ${} 中的表达式求值结果,数量恒为 strings.length - 1
function log(strings, ...values) {
  console.log('静态片段:', strings);        // ['a', 'b', '']
  console.log('插值结果:', values);         // [1, true]
}
<p>log<code>a${1}b${true}</code>;

立即学习Java免费学习笔记(深入)”;

注意:strings 最后一项永远是空字符串(哪怕模板末尾没插值),这是设计使然,方便统一遍历。

常见误用:忘记返回值或错误拼接

标签函数必须显式返回内容,否则默认返回 undefined;另外,直接用 + 拼接 stringsvalues 会丢失 raw 信息,且无法处理嵌套模板。

MindShow
MindShow

MindShow官网 | AI生成PPT,快速演示你的想法

下载

正确做法是用 strings.mapreduce 安全合并:

function html(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    const val = values[i - 1] ?? '';
    return acc + str + String(val);
  }, '');
}

更健壮的实现应检查 val 类型(如对象要 JSON 序列化)、过滤 XSS 敏感字符——这正是模板标签的价值所在:在拼接前介入。

为什么 String.raw 是个特殊标签函数

String.raw 是唯一内置的标签函数,它不解释转义序列,直接返回原始字符串字面量内容:

String.raw`Hi
${2+3}!`; // → "Hi\n5!",不是 "Hi
5!"

它等价于访问 strings.raw 数组,常用于正则、路径、SQL 片段等需要字面意义反斜杠的场景。但要注意:它只影响静态部分,${} 内部仍照常执行。

真正容易被忽略的是:标签模板本身不改变字符串不可变性,也不提升运行时性能;它的价值完全取决于你写的标签函数是否做了有意义的事——比如做类型检查、国际化、SQL 参数绑定、HTML 转义。没业务逻辑的空标签只是多了一层函数调用开销。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
数据分析工具有哪些
数据分析工具有哪些

数据分析工具有Excel、SQL、Python、R、Tableau、Power BI、SAS、SPSS和MATLAB等。详细介绍:1、Excel,具有强大的计算和数据处理功能;2、SQL,可以进行数据查询、过滤、排序、聚合等操作;3、Python,拥有丰富的数据分析库;4、R,拥有丰富的统计分析库和图形库;5、Tableau,提供了直观易用的用户界面等等。

1133

2023.10.12

SQL中distinct的用法
SQL中distinct的用法

SQL中distinct的语法是“SELECT DISTINCT column1, column2,...,FROM table_name;”。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.10.27

SQL中months_between使用方法
SQL中months_between使用方法

在SQL中,MONTHS_BETWEEN 是一个常见的函数,用于计算两个日期之间的月份差。想了解更多SQL的相关内容,可以阅读本专题下面的文章。

381

2024.02.23

SQL出现5120错误解决方法
SQL出现5120错误解决方法

SQL Server错误5120是由于没有足够的权限来访问或操作指定的数据库或文件引起的。想了解更多sql错误的相关内容,可以阅读本专题下面的文章。

2132

2024.03.06

sql procedure语法错误解决方法
sql procedure语法错误解决方法

sql procedure语法错误解决办法:1、仔细检查错误消息;2、检查语法规则;3、检查括号和引号;4、检查变量和参数;5、检查关键字和函数;6、逐步调试;7、参考文档和示例。想了解更多语法错误的相关内容,可以阅读本专题下面的文章。

380

2024.03.06

oracle数据库运行sql方法
oracle数据库运行sql方法

运行sql步骤包括:打开sql plus工具并连接到数据库。在提示符下输入sql语句。按enter键运行该语句。查看结果,错误消息或退出sql plus。想了解更多oracle数据库的相关内容,可以阅读本专题下面的文章。

1663

2024.04.07

sql中where的含义
sql中where的含义

sql中where子句用于从表中过滤数据,它基于指定条件选择特定的行。想了解更多where的相关内容,可以阅读本专题下面的文章。

585

2024.04.29

sql中删除表的语句是什么
sql中删除表的语句是什么

sql中用于删除表的语句是drop table。语法为drop table table_name;该语句将永久删除指定表的表和数据。想了解更多sql的相关内容,可以阅读本专题下面的文章。

440

2024.04.29

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

4

2026.03.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号