模板字符串轻松处理多行文本排版

JavaScript 的模板字符串以反引号为标志，不仅让多行文本排版变得直观自然、完美保留换行与缩进，还能无缝嵌入变量和表达式，彻底告别繁琐的字符串拼接；配合标签函数更可实现HTML转义、代码高亮、自动缩进等高级功能，兼顾安全性与可维护性——无论写HTML片段、SQL查询还是AI提示词，它都是提升开发效率与代码可读性的利器。

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

保留原始换行与缩进

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

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

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

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

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

• ${name}、${items.length > 0 ? '有数据' : '为空'} 可直接写在任意位置
• 相比 "
  " + title + "
  \n

  " + content + "

  "，可读性显著提升
• 编辑时增删行不影响变量语法，不易出错

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

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

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

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

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

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《模板字符串轻松处理多行文本排版》文章吧，也可关注golang学习网公众号了解相关技术文章。