ES6模板字符串用反引号`包裹，支持多行文本和${}变量注入，无需拼接符或转义换行；但存在SQL注入风险、undefined转字符串及性能问题，需谨慎使用。
ES6模板字符串用反引号`包裹，天然支持多行文本和变量注入，不需要拼接符或转义换行符，写法简洁且语义清晰。
多行文本拼接直接换行就行
传统字符串必须用+或\n实现换行，模板字符串直接回车就能保留换行和空格：
- 写法示例：
const html = `<div><h2>标题</h2><p>正文内容</p></div>`，换行和缩进都会原样输出 - 注意：缩进空格也会被当作内容，如需美化结构又不想输出多余空格，可用
String.trim()或手动对齐首尾 - 若要完全忽略换行和缩进（比如写HTML时想保持代码可读但不输出空白），可在模板开头和结尾加换行，再用
.trim()清理
变量和表达式用${}动态注入
在反引号内任意位置写${}，里面填合法JavaScript表达式，运行时自动求值并转为字符串插入：
- 插变量：
const name = '张三'; console.log(`欢迎${name}`) - 算表达式：
const a = 8, b = 2; console.log(`结果是${a / b}`) - 调函数或访问对象属性：
const user = {nick: 'Leo'}; console.log(`昵称：${user.nick.toUpperCase()}`) - 三元判断：
console.log(`状态：${isActive ? '在线' : '离线'}`)
嵌套逻辑与条件换行
多行中可结合表达式控制某一行是否出现，避免生成空行或冗余结构：
立即学习“Java免费学习笔记（深入）”；
- 例如用户信息可能缺字段：
const bio = `姓名：${user.name}\n${user.email ? `邮箱：${user.email}` : ''}\n${user.phone ? `电话：${user.phone}` : ''}` - 更清晰的做法是封装成函数：
const line = (label, value) => value ? `${label}：${value}` : '';，再在模板中调用${line('邮箱', user.email)} - 注意：
${undefined}会变成字符串"undefined"，建议提前做空值处理
常见坑和注意事项
模板字符串不是万能引号，用错场景反而引发问题：
- 必须用反引号
`，单引号或双引号里写${}不会生效 - 路径、正则、SQL等敏感字符串慎用——它不做任何转义，
`SELECT * FROM t WHERE id = ${id}`有SQL注入风险 - 大量循环拼接（如渲染千条列表）时，频繁创建新字符串影响性能，此时改用数组
.push()再.join('')更稳妥 - 类型仍是
string，typeof `abc` === 'string'，不是对象也不是String构造函数实例
