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 中需谨慎）。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

拼接动态列表：结合 map 和反引号

处理数组时，常用 map() 生成 HTML 字符串片段，再用 join('') 合并：

const users = [
  { id: 1, name: "李四", email: "lisi@example.com" },
  { id: 2, name: "王五", email: "wangwu@example.com" }
];

const listHtml = users.map(user => `
  

${user.name} (${user.email})

`).join(''); const fullHtml = `

${listHtml}

`;

注意 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 + 多个模板块

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