JS模板字符串是什么？怎么用？

大家好，今天本人给大家带来文章《JavaScript模板字符串是什么？如何解析？》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

标签模板是JavaScript中通过函数处理模板字符串的语法，首参为静态字符串数组，后续参数为插值表达式结果，常用于HTML转义、SQL参数化等场景。

JavaScript 标签模板（Tagged Templates）是一种函数调用语法，允许你用自定义逻辑处理模板字符串，而不是直接拼接成普通字符串。

标签模板的基本形式

它长这样：

`myTag``hello ${name}, you have ${count} messages`

其中 `myTag` 是一个函数名，后面紧跟着一个反引号包裹的模板字符串，中间可含 `${}` 插值表达式。

JS 不会先求值再传给函数，而是把模板拆解后按特定顺序传参：

• 第一个参数是**字符串字面量数组**（静态部分），比如 ["hello ", ", you have ", " messages"]
• 后续参数是所有插值表达式的**计算结果**，按顺序排列，比如 name 和 count 的值

解析过程：JS 引擎怎么拆？

引擎在遇到标签模板时，会做三件事：

• 把模板字符串按 ${} 切开，保留原始转义和换行（比如 `a\nb` 中的 \n 不会被转义为换行符，而是字面量 "a\\nb"）
• 把切出来的每一段（包括开头、中间、结尾）放进一个数组，作为第一个参数
• 依次求值每个 ${} 中的表达式，把结果作为后续参数传入函数

例如：

`console.log``sum: ${1 + 2}, ${'a'.toUpperCase()}`

等价于：

console.log(["sum: ", ", ", ""], 3, "A")

常见用途与实用例子

标签模板本身不执行拼接，完全由你定义函数逻辑。典型用法包括：

• HTML 转义：防止 XSS，自动对插值内容做 encodeURIComponent 或 DOMPurify.sanitize
• SQL 参数化：把插值转为占位符，配合数据库驱动避免注入
• 多语言/国际化：根据 locale 替换占位符并格式化日期、数字
• 样式字符串处理：如 css`color: ${color};` 提取并压缩 CSS

注意点：不是所有情况都适用

标签模板不会自动连接字符串 —— 如果你的函数没手动拼接，就不会得到最终字符串。

比如写 noop`abc${x}`，而 noop 函数只打印参数，那什么也不会输出到页面。

另外，模板字符串中的反斜杠转义仍受 JS 规则约束：`\n` 是换行符，`\\n` 才是字面量 "\\n"；但标签函数收到的是已解析后的字符串片段，不是原始源码。

好了，本文到此结束，带大家了解了《JS模板字符串是什么？怎么用？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！