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>或内联元素间），可能造成意外的空白。建议：
立即学习“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 => ({'&': '&', '<': '<', '>': '>', '"': '"', "'": '''}[c]));<br> }<br> const safeHtml = `<div>${escapeHtml(userInput)}</div>`; - 如使用框架（React/Vue），优先用其原生机制（JSX/模板编译）代替手动拼HTML
