es6模板字符串用反引号定义,天然支持多行、保留换行缩进,可嵌入${}变量与表达式,适合html/sql等结构化文本,但需注意es6+兼容性、反引号转义及xss防护。

ES6 模板字符串用反引号 ` 定义,天然支持换行和多行文本,不需要 \n 或字符串拼接,写法直观、可读性强。
直接换行就能生成多行字符串
模板字符串会原样保留换行符和缩进空格:
- 写几行就是几行,比如:
const msg = `第一行<br>第二行<br>第三行`;
输出时自动带换行 - 适合写 HTML 片段、SQL 查询、提示文案等结构化文本
- 注意:首行开头、末行结尾的换行也会被保留,若不想要,可手动删掉或 trim 处理
变量和表达式嵌入更自然
在多行中插入动态内容,用 ${...} 即可,无需打断结构:
- 例如:
const name = "张三"; const age = 25;<br>const desc = `姓名:${name}<br>年龄:${age}<br>状态:${age >= 18 ? "成年" : "未成年"}`; - 表达式支持函数调用、逻辑运算、对象属性访问等,灵活性远超传统拼接
处理多余缩进空格的常见办法
写在代码块里的多行模板常因缩进带前导空格,影响输出效果:
- 手动对齐(最简单):把每行文字左顶格写,靠注释或格式化工具维持可读性
- 用正则清除行首空格:
.replace(/^\s+/gm, ""),gm表示全局+多行匹配 - 封装工具函数,如
stripIndent类方法,自动裁掉最小公共缩进
注意事项与兼容性提醒
虽然模板字符串很实用,但使用时需留意:
- 只在 ES6+ 环境支持(现代浏览器、Node.js ≥ 4,默认启用;旧版 IE 完全不支持)
- 反引号本身不能直接嵌套,需用转义
\`或混用单/双引号 - 如果内容来自用户输入或外部数据,仍需做 XSS 防御,模板字符串不自动转义
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











