JavaScript中格式化字符串最简洁的方式是模板字符串,用反引号包裹并支持${}嵌入变量、表达式、函数调用及多行文本,但需注意转义、兼容性和空白处理。
JavaScript 中格式化字符串最简洁的方式就是用模板字符串(Template Literals),它用反引号 ` 包裹,支持嵌入变量和表达式,还能换行、写多行文本,比拼接字符串或 String.prototype.format(JS 本身没有这个方法)自然得多。
模板字符串的基本写法
用反引号 ` 替代单引号或双引号,内部用 ${} 插入变量或任意合法表达式:
const name = '张三';
const age = 28;
const msg = `你好,我是${name},今年${age}岁。`;
console.log(msg); // 你好,我是张三,今年28岁。
支持表达式和函数调用
${} 里不只能放变量,还能写运算、三元判断、甚至调用函数:
${age >= 18 ? '成年人' : '未成年人'}-
${Math.max(10, 20, 5)}→ 输出20 -
${getName().toUpperCase()}(假设getName()返回字符串)
多行字符串与缩进处理
模板字符串天然支持换行,但要注意:回车和空格会原样保留。如果想让代码缩进清晰又不把空格带进结果,可
以用以下技巧:
- 直接换行(适合简单多行,如 HTML 片段):
const html = `\n内容
\n`; - 用
.trim()或.replace(/\s+/g, ' ')清理多余空白 - 更推荐:用带标签的模板字符串(如自定义
stripIndent函数)做自动去首行缩进,但日常开发中多数情况直接写、适当换行即可
注意点和常见坑
模板字符串虽好,但别忘了几个细节:
- 必须用反引号
`,不是单引号或双引号 -
${}中不能直接写注释,也不能嵌套另一个模板字符串(除非先赋值给变量) - 如果要输出字面量
$和{,写成\${即可转义 - 在老版本浏览器(如 IE)中不支持,需用 Babel 编译或检查兼容性
基本上就这些。模板字符串不是“高级技巧”,而是现代 JS 字符串操作的默认方式——写得清楚、读得明白、改起来也顺手。








