如何在 JavaScript 字符串中正确添加换行符（\n）-js教程-PHP中文网

如何在 JavaScript 字符串中正确添加换行符（
）

在 JavaScript 中，使用转义字符可在字符串中插入换行符，适用于 alert、console.log、模板字符串及 DOM 文本内容等场景，但需注意 HTML 渲染时需配合 CSS 或才能显示为视觉换行。

在 javascript 中，使用 ` ` 转义字符可在字符串中插入换行符，适用于 alert、console.log、模板字符串及 dom 文本内容等场景，但需注意 html 渲nder 时需配合 css 或 `
` 才能显示为视觉换行。

在 JavaScript 中，换行符并非通过回车键直接实现，而是借助转义字符 （line feed，换行）来表示。它本身是一个不可见的控制字符，用于告诉 JavaScript 引擎在此处“换到下一行”。

✅ 正确用法示例

// 1. 在 console.log 中查看换行效果（终端/控制台可见）
console.log("第一行
第二行
第三行");
// 输出：
// 第一行
// 第二行
// 第三行

// 2. 使用模板字符串（更直观，支持多行字面量）
const message = `欢迎使用服务！
- 支持快速响应
- 提供专业咨询`;
console.log(message);
// 控制台中自动按实际换行显示

// 3. 动态拼接含换行的字符串
const title = "Fitur Paket Small";
const features = "jda
Fitur lainnya
Harga terjangkau";
const fullText = `${title}
${features}`;
console.log(fullText);

⚠️ 重要注意事项

HTML 渲染 ≠ 控制台渲染：若将含的字符串直接赋值给 element.textContent，浏览器会将其视为空格（因 HTML 忽略多余空白）；要让换行在网页上可见，需：
- 使用 element.innerHTML 并替换为
  ：
```
element.innerHTML = fullText.replace(/
/g, '<br>');
```
- 或设置 CSS 样式 white-space: pre-line：
```
.multiline-text {
  white-space: pre-line;
}
```
```
element.className = "multiline-text";
element.textContent = fullText; // 此时 
 将生效
```
不要写成 " "（双反斜杠）：" " 表示字面量反斜杠 + 字母 n，而非换行符；正确写法是 " "（单反斜杠）。

OpenJDK 24

下载
JSON 或 API 场景：若字符串需序列化为 JSON，会被自动转义为 \n，解析后仍可正常还原为换行符。