JavaScript 处理多行字符串首选 ES6 模板字符串（反引号），天然支持换行、空格及变量插值；需注意换行符真实存在，渲染时配合 CSS 或 <br>；用户输入的 与字面量 \n 要区分处理；后端嵌入需避免语法错误，推荐 JSON 方式；去缩进可用手动函数或 dedent 库。
JavaScript 中处理多行字符串，核心是用对语法、避开常见陷阱，并根据场景选择合适方式。ES6 的模板字符串（反引号 `）已成标准解法，无需额外库即可优雅实现。
用模板字符串直接写多行
这是最简单、最推荐的方式。反引号包裹的内容天然支持换行和空格，且能嵌入变量和表达式：
const html = `<div class="card"> <h2>标题</h2> <p>这是一段多行文本， 每行缩进和换行都会被保留。</p> </div>`;
注意：模板字符串中的换行符会真实出现在字符串值里（即含
），浏览器渲染时需配合 CSS（如 white-space: pre-line）或转义为 <br> 才可见效果。
从用户输入中正确解析 字符
用户在 <input> 或 <textarea> 中按 Enter 输入的，是真实换行符
；但若输入的是字面量
（两个字符），则需先识别再转换：
立即学习“Java免费学习笔记（深入）”；
- 真实
.split(' ').map(line => `<div>${line}</div>`).join('')转成 HTML 块 - 字面量
\n（如 API 返回的转义字符串）：先用.replace(/\n/g, ' ')还原，再同上处理 - 最终展示到页面时，用
innerHTML（不是innerText），否则换行不会生效
与后端交互时避免语法错误
PHP 或其他服务端语言输出多行内容嵌入 JS 变量时，传统单/双引号字符串会因换行报 SyntaxError。必须改用模板字符串：
// ❌ 危险：PHP 输出含换行，JS 报错
var content = "<?php echo $html; ?>";
// ✅ 安全：模板字符串允许跨行，且可配合 JSON 编码更稳妥
var content = `<?php echo addslashes($html); ?>`;
// 更推荐：后端输出 JSON，前端用 JSON.parse() 解析
const content = JSON.parse('<?php echo json_encode($html); ?>');
需要自动去首行缩进？用 stripIndent 思路
模板字符串本身不提供去缩进功能，但可手动实现轻量逻辑：
function stripIndent(strings, ...values) {
const raw = strings.raw[0];
const lines = raw.split('
');
const indent = lines[1] ? lines[1].match(/^s*/)[0] : '';
return lines.map(line => line.slice(indent.length)).join('
');
}
const code = stripIndent`
function hello() {
console.log('world');
}
`;
或者直接使用成熟小工具如 dedent 或 multiline 库——不过多数现代项目中，模板字符串 + 合理缩进已足够清晰。
