模板字符串拼接HTML简洁可读，需注意XSS风险：对用户输入内容必须转义，复杂结构应拆分为函数组合，高频交互场景推荐使用框架或原生DOM API。
用模板字符串拼接HTML是前端开发中常见做法，简洁且可读性高，但需注意安全性和结构清晰度。
基础写法：用反引号包裹，插入变量和表达式
模板字符串用反引号（`）定义，支持多行和嵌入表达式${...}。适合生成结构固定的HTML片段。
- 变量直接插入：
`${user.name}` - 表达式也支持：
${items.length > 0 ? '有数据' : '暂无'} - 换行天然保留，避免用
+或\n拼接
避免XSS：对动态内容做基本转义
模板字符串本身不自动转义，若插入用户输入的内容（如userInput），可能引发XSS攻击。
- 简单场景可用辅助函数转义特殊字符：
escapeHtml(str)把、<code>>、&等转为HTML实体 - 敏感字段（如
innerHTML赋值）务必转义；纯属性值（如data-id）可不转，但需确保类型安全 - 避免直接拼接不可信的HTML字符串，例如：
`${userProvidedHtml}`—— 危险！
组合多个片段：拆分逻辑，提升可维护性
复杂结构不要挤在一行模板里，可把不同模块抽成函数，再组合调用。
立即学习“Java免费学习笔记（深入）”；
- 例如：
renderCard(title, content)返回一个卡片HTML字符串 - 主模板中调用：
`<div class="list">${items.map(renderItem).join('')}</div>` - 配合数组
map、filter等方法，让条件渲染更直观
替代方案提示：简单场景够用，复杂交互建议用框架
模板字符串适合静态或轻量动态渲染（如模态框内容、提示文案、列表项）。但如果涉及事件绑定、状态响应、频繁更新，应考虑：
-
原生方案：用
document.createElement+textContent/setAttribute更安全可控 - 现代方案：React/Vue/Svelte等框架自带模板系统与防XSS机制
- 权衡点：开发速度 vs 安全性 vs 可维护性
