JavaScript中用反引号拼接HTML依赖模板字符串，支持多行与变量插值，但需手动转义防XSS；动态列表常用map+join；复杂场景推荐DOM API或框架模板。
JavaScript 中用反引号（`）拼接 HTML 片段，靠的是模板字符串（Template Literals），它支持多行书写和变量插值，比传统字符串拼接更清晰、安全（但注意仍需防范 XSS）。
基础写法：插入变量和换行
反引号内的 ${expression} 可直接嵌入变量、表达式或函数调用：
const name = "张三";
const age = 25;
const html = `
<div class="user">
<h2>${name}</h2>
<p>年龄：${age}</p>
</div>
`;
这样生成的 HTML 是格式良好的多行字符串，可直接用于 innerHTML 或框架渲染（如 Vue/React 中需谨慎）。
拼接动态列表：结合 map 和反引号
处理数组时，常用 map() 生成 HTML 字符串片段，再用 join('') 合并：
立即学习“Java免费学习笔记（深入）”；
const users = [
{ id: 1, name: "李四", email: "lisi@example.com" },
{ id: 2, name: "王五", email: "wangwu@example.com" }
];
const listHtml = users.map(user => `
<li data-id="${user.id}">
<strong>${user.name}</strong>
<span>(${user.email})</span>
</li>
`).join('');
const fullHtml = `
<ul class="user-list">
${listHtml}
</ul>
`;
注意 HTML 转义与 XSS 防护
反引号本身不做 HTML 转义，若变量含用户输入，直接插入会引发 XSS：
- ❌ 危险写法：
`${userInput}`—— 若userInput = '<script>alert(1)</script>'，执行后会运行脚本 - ✅ 安全建议：对不可信内容手动转义，例如用函数处理特殊字符：
function escapeHtml(str) { return str.replace(/[<>&"']/g, c => ({'<': '', '&': '&', '"': '"', "'": '''}[c])); }
再使用：${escapeHtml(userInput)} - ✅ 更推荐：用 DOM 方法（如
document.createElement+textContent）构建节点，完全避免拼接 HTML
替代方案对比：什么时候别用反引号拼 HTML
虽然方便，但有局限：
- 不适用于需要响应式更新的场景（如频繁修改某一项）—— 推荐用真实 DOM 操作或框架
- 服务端渲染或复杂结构建议用 JSX、Vue 模板等，而非手动拼接
- 若 HTML 片段含大量逻辑分支，代码易混乱，可封装为函数或使用
if+ 多个模板块
