模板字符串是什么及用法详解

模板字符串是ES6（ES2015）引入的JavaScript原生多行字符串特性，以反引号（`）定义，支持${}语法无缝嵌入变量、表达式甚至函数调用，真正实现了字符串插值与跨行书写；它远不止是语法糖——既能保留换行与空格（需注意缩进污染），又可通过String.raw禁用转义，还能借助标签函数实现HTML转义、SQL参数化等高级预处理；但务必警惕常见陷阱：误用单/双引号、遗漏$符号、在${}中写语句，以及最易被忽视的关键事实——模板字符串本身不防XSS，直接插入用户输入仍存在严重安全风险。

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

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

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

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

常见错误包括：

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

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

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

`
  
${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 仍危险。需要手动过滤或用标签函数封装安全逻辑。

到这里，我们也就讲完了《模板字符串是什么及用法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！