html 模板字符串拼接

2026-04-28 20:00:08 1778阅读 0评论

用 HTML 模板字符串拼接做动态页面：实用指南与小心思

在网页里动态拼接 HTML，常见做法是用字符串拼接或模板引擎，但直接用字符串容易出错、可维护性差。用 HTML 模板字符串（在 JavaScript 中常见于模板字符串 template literals 的思路）来组织片段，不仅让结构更清晰，还能在运行时灵活替换变量，适合做表单渲染、动态列表与配置化页面。

为什么用模板字符串？

想象你在生成一封通知邮件：标题、正文、收件人姓名都会随数据变化。直接写成一行长字符串，变量替换容易漏写引号或冒号，导致解析错误。用片段化、可复用的模板，把结构和内容分层，更像“搭积木”，也更容易排查问题。

基本用法

在 JavaScript 中，用反引号（`）包裹模板，用 ${} 插入变量：

<div>
  <h1>${title}</h1>
  <p>${content}</p>
</div>

将上面模板存为字符串，再用字符串模板方法或直接在 DOM 中插入：

const title = '活动预告';
const content = '今晚有新品发布，欢迎参加！';

const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

document.body.innerHTML = html;

实战：动态表单与数据列表

在需要根据用户输入生成表单或列表的场景，把模板按字段拆分，再填充数据，能大幅降低出错率。

function renderForm({ name, email }) {
  return `
    <form>
      <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" value="${name}">
      </div>
      <div>
        <label for="email">邮箱:</label>
        <input type="text" id="email" value="${email}">
      </div>
      <button type="submit">提交</button>
    </form>
  `;
}

document.body.innerHTML = renderForm({ name: '张三', email: 'zhangsan@example.com' });

避坑：安全与边界

直接把用户输入放进模板会带来 XSS 风险。生产环境建议：

先进行输入清理与转义（使用 textContent 或 dangerouslySetInnerHTML 的安全替代）
或使用组件/库提供的安全上下文
避免直接拼接 URL 等受信任边界内容

如果只是小范围、可控的片段，也可以先用 template 元素或 div 包裹后替换内容：

<template id="form-template">
  <form>
    <div>
      <label for="name">姓名:</label>
      <input type="text" id="name" value="${name}">
    </div>
    <div>
      <label for="email">邮箱:</label>
      <input type="text" id="email" value="${email}">
    </div>
    <button type="submit">提交</button>
  </form>
</template>

const template = document.getElementById('form-template').content;
document.body.appendChild(template.cloneNode(true));

进阶：模板片段复用

把常用片段抽成模块，或存入对象，让页面初始化时统一渲染，提升复用性与可维护性。

const templates = {
  header: (title) => `
    <header>
      <h1>${title}</h1>
    </header>
  `,
  nav: (items) => `
    <nav>
      <ul>
        ${items.map(item => `<li>${item}</li>`).join('')}
      </ul>
    </nav>
  `
};

const navItems = ['首页', '产品', '服务', '联系我们'];
document.body.innerHTML = `
  ${templates.header('我的网站')}
  ${templates.nav(navItems)}
`;