JavaScript模板字符串用反引号包裹，支持${}变量插值和原生多行文本，可嵌入表达式、动态生成HTML、结合map/join处理动态行数，并需注意XSS防护与缩进清理。
JavaScript 中模板字符串用反引号 ` 包裹，天然支持变量插值和多行文本，写法简洁、语义清晰，是现代 JS 字符串处理的首选方式。
变量拼接：用 ${} 嵌入任意表达式
在反引号内，用 ${} 插入变量、属性、运算或函数调用结果，JS 会自动转为字符串并拼入：
-
const name = "李华"; console.log(`你好，${name}！`);→ 输出“你好，李华！” const price = 99; const tax = 0.1; console.log(`含税价：${(price * (1 + tax)).toFixed(2)} 元`);-
console.log(`当前时间：${new Date().toLocaleTimeString()}`);（每次执行都实时更新）
注意：${} 里不能写未声明变量，也不支持直接写对象字面量如 ${{a:1}}；若需输出对象，应加括号：${({a:1})}，但更常见的是用 JSON.stringify 格式化。
多行文本：换行即生效，缩进也保留
模板字符串允许直接换行，所有换行符 \n 和空格都会原样进入最终字符串：
立即学习“Java免费学习笔记（深入）”；
const msg = `第一行内容第二行内容第三行，带变量：${count}`;- 适合生成 HTML 片段：
const card = `<div class="item"> <h3>${title}</h3> <p>${desc}</p> </div>`;
但代码缩进会导致字符串开头或每行前多出空格。如需清理，常用方法是链式调用 .replace(/^[\s]+/gm, '').trim()，或封装一个去缩进函数。
动态多行：结合数组 map 和 join
当行数不确定或需条件控制时，把每行作为数组元素，再用 join('\n') 拼接，逻辑更可控：
const items = ['苹果', '香蕉']; const list = `购物清单：${items.map((i, idx) => `${idx+1}. ${i}`).join('\n')}`;- 可过滤空行：
[user.name && `姓名：${user.name}`, user.email && `邮箱：${user.email}`].filter(Boolean).join('\n')
条件换行与安全处理
模板字符串内部支持三元运算符或函数调用，实现按需换行：
const status = user.active ? '在线' : '离线'; const info = `昵称：${user.nick}\n状态：${status}`;- 向 DOM 插入时，若需保留换行显示，记得用
innerHTML而非innerText，并配合 CSS 的white-space: pre-line控制渲染效果。 - 拼接用户输入内容时，避免 XSS 风险，建议先转义或使用标签函数（如
html`<div>${unsafe}</div>`内部做过滤）。
