如何理解javascript中的模板字面量?【教程】

5次阅读

模板字面量是javaScript中唯一支持多行、表达式嵌入、标签函数和原始字符串解析的字符串构造机制,必须用反引号定义,支持运行时表达式求值、标签函数拦截及String.raw原始解析。

如何理解javascript中的模板字面量?【教程】

模板字面量不是“更高级的字符串拼接语法糖”,它是 javascript 中唯一能天然支持多行、表达式嵌入、标签函数和原始字符串解析的字符串构造机制。

模板字面量必须用反引号 `,不能用单引号或双引号

这是最常踩的坑:把 `Hello ${name}` 写成 'Hello ${name}'"Hello ${name}" —— 后两者完全不会解析 ${...},只会原样输出文字。反引号是硬性要求,没有例外。

  • 合法:`line1nline2`(换行会被保留)
  • 非法:"line1nline2"(虽然也能换行,但无法嵌入表达式)
  • 注意:` 是转义反引号,${ 会阻止插值(变成字面量 ${

${...} 里可以放任意表达式,不只是变量

它不是“变量占位符”,而是运行时求值的表达式容器。括号内写什么,就执行什么。

  • 支持函数调用:`Sum: ${add(2, 3)}`
  • 支持对象属性访问:`Name: ${user?.name ?? 'Anonymous'}`
  • 支持模板嵌套:`Outer: ${`Inner: ${42}`}`
  • 注意:若表达式抛错(如 undefined.name),整个模板求值失败,报 TypeError

标签函数让模板字面量脱离“拼字符串”用途

在反引号前加一个函数名(如 html`

${text}

`),就触发标签函数机制:JavaScript 会把模板拆成静态字符串数组和动态表达式值,交由你自定义处理。

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

  • 函数接收的第一个参数是字符串数组strings),后续是每个 ${...} 的值
  • 常见用途:HTML 转义(safeHtml)、国际化(msg`Hello ${name}`)、sql 参数化(防注入)
  • 关键点:标签函数不改变模板字面量本身,只是拦截并重定义它的解释方式

真正容易被忽略的是原始字符串访问能力:String.raw`\n` 返回 "\n" 而非换行符;而直接用 `\n` 仍会转义。这在正则、路径、SQL 字符串中至关重要——不是所有场景都需要运行时插值,有些只需要结构化字面量本身。

text=ZqhQzanResources