模板字符串用反引号包裹，支持多行、保留换行缩进、内嵌变量表达式（如${name}）、配合标签函数实现转义/格式化，调试可用json.stringify查看真实换行。

JavaScript 中模板字符串（Template Literals）用反引号 ` 包裹，天然支持多行文本，无需拼接或转义，排版更直观、维护更轻松。

保留原始换行与缩进

模板字符串会原样保留代码中的换行符和空格，适合写 HTML 片段、SQL 查询或带格式的提示文案。比如：

const html = `<div class="card">
  <h2>标题</h2>
  <p>这是一段描述文字</p>
</div>`;

生成的字符串包含真实换行，浏览器渲染时也按结构显示（注意：HTML 渲染中连续空白默认折叠，但结构语义清晰）。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

内联变量与表达式，避免字符串拼接混乱

在多行内容中嵌入变量时，不用反复加 + 或 concat()，逻辑更连贯：

• ${name}、${items.length > 0 ? '有数据' : '为空'} 可直接写在任意位置
• 相比 "<div>" + title + "</div>\n<p>" + content + "</p>"，可读性显著提升
• 编辑时增删行不影响变量语法，不易出错

配合标签函数实现安全与格式化

模板字符串可传给自定义标签函数，用于自动转义 HTML、高亮代码、缩进对齐等：

• html`<div>${userInput}</div>` 可内部做 XSS 过滤
• indent` 第一行\n 第二行` 能统一处理首行缩进
• 像 styled-components 就靠此机制解析 CSS 字符串

注意实际渲染效果与调试技巧

虽然模板字符串保留换行，但不同环境对空白的处理不同：

• 在 DOM 中插入纯文本时，换行会变成 <br> 或被 CSS 的 white-space 控制
• 调试时可用 console.log(JSON.stringify(str)) 查看真实换行符（\n）
• 若需去除首尾空行或压缩内部空格，可用 .trim() 或正则清理

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南