在JavaScript编程中，多行文本的创建是经常遇到的需求，比如生成HTML片段、输出格式化的日志内容、拼接长文本描述等。传统的字符串定义方式需要借助加号拼接，还要手动添加换行转义字符，不仅代码冗长，可读性也比较差。模板字符串的出现很好地解决了这个问题，它允许字符串直接换行，无需额外的拼接操作就能生成多行文本。
模板字符串的基本语法
模板字符串使用反引号`来包裹内容，而不是传统的单引号或双引号。在模板字符串内部，可以直接换行，也可以嵌入变量和表达式，嵌入时需要使用${}语法包裹对应的内容。
下面是一个最简单的模板字符串示例，展示它的基本定义方式：
// 定义简单的模板字符串 const singleLineStr = `这是一个单行模板字符串`; console.log(singleLineStr); // 输出：这是一个单行模板字符串
使用模板字符串实现多行文本
要实现多行文本，只需要在反引号包裹的内容中直接换行即可，模板字符串会自动保留换行格式，不需要手动添加n换行符。
基础多行文本示例
下面的代码展示了用模板字符串创建多行文本的最基本用法：
// 使用模板字符串创建多行文本 const multiLineText = `第一行内容 第二行内容 第三行内容`; console.log(multiLineText); // 输出结果： // 第一行内容 // 第二行内容 // 第三行内容
可以看到，代码中直接换行的部分，在输出时也会对应换行，和书写的格式完全一致，非常直观。
嵌入变量的多行文本
模板字符串还支持在多行文本中嵌入变量或者表达式，只需要用${}包裹对应的内容即可，这在生成动态多行内容时非常实用。
const userName = "张三";
const userAge = 25;
// 嵌入变量的多行文本
const userInfo = `用户姓名：${userName}
用户年龄：${userAge}
注册时间：${new Date().toLocaleDateString()}`;
console.log(userInfo);
// 输出结果：
// 用户姓名：张三
// 用户年龄：25
// 注册时间：2024/5/20
传统方式与模板字符串的对比
在模板字符串出现之前，要实现多行文本需要使用单引号或双引号拼接，同时手动添加n换行符，代码可读性和编写效率都比较低。
下面是两种方式的对比示例：
| 实现方式 | 代码示例 | 优缺点 |
|---|---|---|
| 传统拼接方式 | const oldMultiLine = "第一行内容n" + "第二行内容n" + "第三行内容"; | 需要手动添加换行符和拼接符号，代码冗长，改动时容易出错 |
| 模板字符串方式 | const newMultiLine = `第一行内容 第二行内容 第三行内容`; | 直接换行即可，代码简洁，可读性强，维护方便 |
实际开发中的常见场景
- 生成HTML片段：在动态渲染页面内容时，用模板字符串拼接多行HTML代码，比传统拼接方式更清晰。
- 输出格式化日志：在调试时，用模板字符串输出多行日志信息，方便查看不同维度的内容。
- 拼接长文本描述：比如生成邮件内容、通知消息等长文本，用模板字符串可以快速嵌入动态变量，保持格式整齐。
注意事项
使用模板字符串实现多行文本时，需要注意以下几点：
- 模板字符串必须使用反引号
`包裹，不能用单引号或双引号，否则会报错。 - 模板字符串中的换行会被保留，如果不需要多余的换行，需要注意书写时的缩进，避免引入不必要的空行。
- 如果需要在模板字符串中输出反引号本身，需要使用转义字符
`。
总的来说，模板字符串是实现多行文本的最优选择，它简化了代码编写流程，提升了可读性，是ES6之后JavaScript开发中处理字符串的常用方式，建议开发者在日常开发中优先使用。
模板字符串多行文本JavaScript字符串拼接修改时间：2026-07-07 21:54:25