模板字符串是插入html最简洁安全的方式，需手动转义用户输入防xss，支持嵌入简单表达式与多行结构，但复杂逻辑应抽离。
直接用反引号（`）包裹 HTML 结构，变量用 ${} 插入即可，这是最简洁安全的方式。
基础写法：拼接单个变量
把变量名放进 ${} 里，JS 会自动计算并转为字符串插入：
const name = "小明";
const age = 25;
const html = `<div class="user">
<h3>${name}</h3>
<p>年龄：${age}</p>
</div>`;
嵌入表达式和逻辑（不建议复杂运算）
可以在 ${} 里写简单表达式，比如三元判断、调用函数，但别放循环或大量逻辑：
${age >= 18 ? '成年人' : '未成年人'}-
${user.name?.toUpperCase() || '匿名用户'}（可选链 + 空值合并） - 避免：
${users.map(...).join('')}——这种建议抽成独立变量，提升可读性
防止 XSS：注意变量内容是否可信
模板字符串**不会自动转义 HTML**。如果变量含用户输入（如评论内容），直接插入可能引发 XSS：
- ❌ 危险：
const comment = "<script>alert(1)</script>"; const html = `<p>${comment}</p>`; - ✅ 安全做法：手动转义关键字符，或用 DOM 方法（如
textContent）处理不可信数据 - 小技巧：封装一个简易转义函数：
const escape = s => s.replace(/[&"'/]/g, c => ({'&':'&','':'>','"':'"',"'":''','/':'/'}[c]));
生成多行结构：缩进不影响输出，但可读性很重要
模板字符串天然支持换行和空格，HTML 缩进会原样保留（浏览器通常忽略多余空白，但源码更清晰）：
const items = [{id:1, text:"苹果"}, {id:2, text:"香蕉"}];
const listHtml = `
-
${items.map(item => `
- ${escape(item.text)} `).join('')}
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
