模板字符串换行缩进空格会原样输出，导致JSON错乱、HTML多余空白等问题；插值仅支持单表达式，链式取值需用可选链，用户输入需防XSS。
模板字符串换行后缩进空格会原样输出
直接回车换行的模板字符串，缩进用的空格或制表符都会变成最终字符串的一部分，导致前后端联调时 JSON 格式错乱、HTML 渲染出多余空白、日志对齐错位。
常见错误写法：
`Hello
${name}
World`
——中间那行的两个空格会被保留。
- 用
.replace(/\s+$/gm, '')去每行尾部空格（适合简单清洗） - 更稳妥的做法是把换行和缩进逻辑交给 JS 处理：先写成单行模板，再用
.split('\n').map(line => line.trim()).join('\n') - 若需保留有意义的缩进（如生成带缩进的 SQL 或 JSON），改用
String.raw+ 手动.replace控制前导空格
嵌套 `${}` 里不能直接写多行语句
模板字符串中的插值表达式必须是单一表达式，不支持换行、if、for 等语句。写成这样会报错：
`${if (x) {
return 'yes';
}}`
- 用三元运算符替代简单分支：
${condition ? 'A' : 'B'} - 复杂逻辑提前计算好变量：
const statusText = getStatus(user);，再插值：${statusText} - 需要复用逻辑时，封装成箭头函数并立即执行：
${(() => { /* 多行逻辑 */ return result; })()}（慎用，可读性下降）
`${}` 中访问对象属性时要注意 undefined 报错
像 ${user.profile.name} 这种链式取值，一旦 user 或 profile 是 undefined，运行时就抛 Cannot read property 'name' of undefined。
- 优先用可选链操作符：
${user?.profile?.name ?? 'Anonymous'} - 兼容老环境时，用逻辑运算符兜底：
${(user && user.profile && user.profile.name) || 'Anonymous'} - 若变量来自外部（如 API 响应），建议统一做类型守卫或用
??配合默认值初始化
模板字符串不是万能拼接器，大段 HTML 拼接要防 XSS
直接把用户输入塞进 ${userInput} 渲染到页面，等于裸奔式 XSS。模板字符串本身不做任何转义，它只是字符串拼接语法糖。
- 服务端渲染场景：用框架自带的 HTML 转义函数，比如 Express 的
（EJS）或 Next.js 的dangerouslySetInnerHTML配合DOMPurify.sanitize() - 纯客户端拼接 DOM：改用
document.createElement+textContent（自动转义），避免innerHTML - 真要插 HTML 片段，确保来源可信，并用正则或专用库剥离 script、onerror 等危险内容
多行 + 动态 + 安全，三者叠加时，别贪图一行模板字符串解决所有问题；拆成数据处理、结构组装、安全输出三个阶段更可控。
