17370845950

JavaScript模板字面量是ES6引入的用反引号包裹的字符串语法，支持变量插值、多行书写、任意表达式嵌入及标签函数高级功能，提升可读性与安全性。

JavaScript模板字面量（Template Literal）是ES6引入的一种用反引号（`）包裹的字符串语法，它让字符串拼接更直观、更灵活，尤其适合嵌入变量和表达式。

支持变量插值，不用加号或concat

传统字符串拼接需要反复用+连接，容易出错且难读。模板字面量直接用${}插入变量或表达式，JS自动求值并转为字符串。

• 旧写法："Hello " + name + ", you are " + age + " years old."
• 新写法：`Hello ${name}, you are ${age} years old.`

可跨行书写，无需换行符转义

反引号内的字符串天然支持多行，缩进和换行符都会被保留，适合写HTML片段或长提示文本。

• 旧写法（需手动加\n和+）："\n

  " + title + "

  \n

  " + content + "

  \n"
• 新写法（清晰自然）：`\n

  ${title}

  \n

  ${content}

  \n`

支持嵌入任意表达式，不止是变量

${}里可以放函数调用、三元运算、甚至简单逻辑，不用提前计算再拼接。

• `Price: $${(price * (1 - discount)).toFixed(2)}`
• `Status: ${isActive ? 'Online' : 'Offline'}`
• `Length: ${text?.length || 0}`

可配合标签函数实现高级功能

在反引号前加一个函数名（如html`...`），就能拦截模板内容，做转义、国际化、SQL防注入等处理——这是普通字符串做不到的。

• safeHtml`Click`（自动过滤危险属性）
• css`color: ${primaryColor}; font-size: ${size}px;`（编译为样式对象）

基本上就这些。模板字面量不复杂但容易忽略它的表达力——从拼接字符串开始，它就在帮你少写bug、多写可读代码。