17370845950

模板字符串是ES6引入的原生多行字符串类型，用反引号定义，支持${}嵌入表达式；常见错误包括误用引号、漏写$、在${}中写语句；可换行但保留缩进，String.raw禁用转义；带标签函数能预处理，但不自动防XSS。

模板字符串不是语法糖，是 JavaScript 中真正支持多行、嵌入表达式和字符串插值的原生字符串类型。它从 ES6（ES2015）开始引入，用反引号 ` 定义，不是单引号或双引号。

怎么写模板字符串：反引号 + ${} 插值

必须用 ` 包裹，内部用 ${expression} 嵌入变量、函数调用或任意 JS 表达式：

`Hello, ${name}! Today is ${new Date().toLocaleDateString()}.`

常见错误包括：

• 误用单引号或双引号包裹 ${...} —— 不会解析，原样输出
• 忘记写 $，只写 {name} —— 变成普通文本
• 在 ${} 里写语句（如 if 或 for）—— 语法报错，只允许表达式

模板字符串能换行，但要注意缩进和空格

反引号内的换行会被保留为真实换行符 \n，适合生成 HTML 片段或 CLI 提示：

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

`
  
${title}
  
${content}
`

但注意：缩进空格也会进入最终字符串。如果不想让缩进污染内容，可用 .trim() 或标签函数处理：

• String.raw`...` 可禁用转义（比如想保留 \n 字面量）
• 多行字符串中混用 ${} 时，确保表达式返回字符串或可转字符串的值（否则可能拼出 "[object Object]"）

带标签的模板字符串：不只是拼接，还能预处理

在反引号前加一个函数名，就构成“带标签的模板字符串”，该函数接收模板字面量数组和插值结果作为参数：

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    return acc + str + (values[i] ? `${values[i]}` : '');
  }, '');
}

const name = 'Alice';
highlight`Hello ${name}, welcome!`; // → "Hello Alice, welcome!"

典型用途包括 HTML 转义、SQL 参数化、国际化（i18n）、样式插值等。关键点：

• 第一个参数 strings 是只读的字符串数组（不含插值部分）
• 后续参数对应每个 ${...} 的计算结果，顺序一一对应
• 若插值为 undefined 或 null，传入函数的是原始值，不会自动转空字符串

最常被忽略的是：模板字符串不解决 XSS，也不自动转义 HTML；${userInput} 直接插入 HTML 仍危险。需要手动过滤或用标签函数封装安全逻辑。