JavaScript中用模板字符串生成多行HTML需用反引号包裹，支持换行缩进提升可读性，但多余空白会成为文本节点；应避免标签间冗余空格，可用三元运算符或map实现动态结构，并务必对用户输入HTML编码防XSS。

JavaScript中用模板字符串生成多行HTML片段，关键在于正确使用反引号（`）包裹内容，并合理处理换行、缩进和变量插值。

直接换行生成结构化HTML

模板字符串天然支持换行，浏览器会把换行符当作普通空白字符处理，不影响HTML解析。你可以像写真实HTML一样缩进和换行，提升可读性：

<!-- 这样写完全合法且清晰 -->

const html = `<div class="card">
  <h2>${title}</h2>
  <p>${content}</p>
  <button onclick="handleClick(${id})">点击</button>
</div>`;

注意空格与缩进对渲染的影响

虽然换行不影响HTML结构，但模板字符串中的多余空格和缩进会变成实际文本节点（尤其在<pre>、<textarea>或内联元素间），可能造成意外的空白。建议：

javascript-pro

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

下载

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

• 避免在标签之间插入不必要的换行和空格（比如<span>\n text\n</span>会在text前后加空格）
• 若需严格控制空白，可用.replace(/\s+/g, ' ').trim()压缩空白，但慎用——可能破坏<pre>等需要保留格式的场景
• 更稳妥的做法是把标签写紧凑：`<span>${text}</span><span>${more}</span>`

嵌套逻辑与条件拼接技巧

模板字符串不支持内置条件或循环，但可结合三元运算符、逻辑运算符或提前拼接子字符串实现动态结构：

• 简单开关：`<div class="${isActive ? 'active' : ''}">...</div>`
• 多条件类名：`class="${['btn', isPrimary && 'btn-primary', isDisabled && 'disabled'].filter(Boolean).join(' ')}"`
• 列表渲染：先用map生成子项数组，再join('')拼入模板：
  

  const itemsHtml = dataList.map(item => `<li>${item.name}</li>`).join('');<br>
    const list = `<ul>${itemsHtml}</ul>`;

安全提醒：防范XSS注入

模板字符串本身不做转义，直接插入用户输入会导致XSS漏洞。务必对动态内容做HTML编码：

• 不要这样写：`<div>${userInput}</div>`
• 推荐做法：用工具函数转义，例如
  

  function escapeHtml(str) {<br>
      return str.replace(/[&<>"']/g, c => ({'&': '&', '<': '<', '>': '>', '"': '"', "'": '&#039;'}[c]));<br>
    }<br>
    const safeHtml = `<div>${escapeHtml(userInput)}</div>`;

• 如使用框架（React/Vue），优先用其原生机制（JSX/模板编译）代替手动拼HTML