模板字符串用反引号包裹,天然支持多行文本和变量插值;可直接换行保留格式,配合trim()或正则清理缩进,结合map/join实现动态多行,支持三元运算符条件换行。

JavaScript 中的模板字符串(Template Literals)用反引号 ` 包裹,天然支持多行文本和变量插值,是处理多行拼接最简洁、可读性最强的方式。
直接换行,保留原始格式
模板字符串允许直接在反引号内换行,所有空格、缩进和换行符都会被原样保留:
const message = `第一行内容
第二行内容
第三行内容,包含变量:${name}`;
这样生成的字符串会包含真实的换行符(\n),适合用于日志、提示文案或生成 HTML 片段等场景。
避免缩进污染,用模板字符串 + trim() 或正则清理
如果模板字符串写在缩进的代码块中(如函数体内),首尾和每行开头的空格会被保留,影响输出整洁度。常用两种清理方式:
- 用
.trim()去除首尾空白(包括换行和空格),但无法处理中间行首缩进 - 更彻底的做法:用正则替换每行开头的空格,再
trim()
function multiLineText(name) {
return `
Hello ${name},
This is a clean
multi-line message.
`.replace(/^[\s]+/gm, '').trim();
}
动态拼接多行内容(如列表渲染)
结合数组的 map() 和 join('\n'),可在模板字符串中嵌入动态多行结构:
分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
const items = ['苹果', '香蕉', '橙子'];
const list = `购物清单:
${items.map((item, i) => ` ${i + 1}. ${item}`).join('\n')}`;
输出效果:
购物清单: 1. 苹果 2. 香蕉 3. 橙子
嵌套逻辑与条件换行(用三元或函数封装)
模板字符串内部支持表达式,可嵌入三元运算符或调用函数实现条件换行:
const user = { name: '小明', age: 17 };
const profile = `姓名:${user.name}
年龄:${user.age}
${user.age >= 18 ? '状态:已成年' : '状态:未成年\n需监护人确认'}`;
注意:若分支中含换行,整个字符串自然变成多行;无需额外拼接 + 或 \n。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










