直接用反引号（`）包裹，内部自由换行、嵌入变量和表达式，无需转义双引号或单引号，HTML 结构清晰可读。

基础写法：换行与变量插值

模板字符串天然支持多行，HTML 标签可按缩进排版，用 ${} 插入变量或简单表达式：

const title = "用户列表";
const users = [{ id: 1, name: "张三" }, { id: 2, name: "李四" }];

const html = `
  <section class="user-section">
    <h2>${title}</h2>
    <ul>
      ${users.map(u => `<li data-id="${u.id}">${u.name}</li>`).join('')}
    </ul>
  </section>
`;

处理复杂逻辑：提前计算或封装函数

避免在模板内写长条件或循环。把逻辑提取到外部，再把结果传入：

Doc To HTML

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

下载

• 用 map + join 生成列表项，比内联 for 循环更安全简洁
• 复杂条件渲染可用三元或短路运算：${isActive ? '<span class="active">在线</span>' : ''}
• 重复结构建议封装为小函数，比如 renderCard(item)，再在模板中调用

防 XSS：不要直接插入未过滤的用户内容

模板字符串不自动转义，若变量来自用户输入（如评论、昵称），需手动编码 HTML 特殊字符：

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

function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '<')
    .replace(/>/g, '>')
    .replace(/"/g, '"')
    .replace(/'/g, '&#039;');
}

const unsafeName = '<script>alert(1)</script>';
const safeHtml = `<div>${escapeHtml(unsafeName)}</div>`;

插入 DOM 时注意：用 insertAdjacentHTML 或 innerHTML

生成好字符串后，推荐用 element.insertAdjacentHTML('beforeend', html)，比反复赋值 innerHTML 更高效且不破坏已有事件监听器：

• 避免用 innerHTML += html —— 会重置子元素状态（如表单输入、焦点）
• 如果需绑定事件，优先考虑事件委托，或在插入后单独初始化
• 服务端渲染或 SSR 场景下，确保模板字符串生成的内容与服务端一致，避免水合错误