当从 http 接口获取含 ` ` 转义序列的代码字符串（如 `console.writeline("hello"); console.writeline("world");`）并直接插入 `
` 或 `` 标签时，浏览器默认将其视为普通文本而非真实换行——需将字符串中字面量的 `"\n"` 正确解析为实际换行符 `
` 才能正常显示。</p><p>在 Web 开发中，常见误区是认为后端返回的 "console.WriteLine("Hello");\nconsole.WriteLine("World");" 中的 \n 会被前端自动识别为换行。实际上，这是 JavaScript 字符串中表示“反斜杠 + n”的字面量（即两个字符），而非真正的换行控制符（U+000A）。<pre> 和 <code> 标签仅对<strong>真实的换行符</strong>（
、
）生效，对 HTML 实体或转义字符串（如 <br> 或 \n）无反应。</p><p>✅ 正确做法：在前端接收响应后，对字符串执行转义还原。例如，在 JavaScript 中使用：</p><pre class="brush:php;toolbar:false;">// 假设 response.data.code 是后端返回的字符串，其中 "
" 是字面量 "\n"
const rawString = response.data.code; // "console.WriteLine("Hello");\nconsole.WriteLine("World");"
// 将字面量 "\n" 替换为实际换行符
const processedCode = rawString.replaceAll("\n", "
");
// 现在可安全插入 pre/code 标签
document.querySelector('pre').textContent = processedCode;
// 或在模板引擎中（如 Vue/React）绑定 processedCode
⚠️ 注意事项：
- replaceAll("\n", " ") 中第一个参数是双反斜杠 \n（匹配字符串中两个字符： 和 n），第二个参数是单个换行符 ；
- 若字符串中还包含 \r\n 或其他转义组合（如 \t），需按需扩展处理，但代码片段通常只需处理 ；
- 不要使用 .replace(/\n/g, " ") 的正则写法（除非确保字符串无其他干扰），因 replaceAll() 更语义清晰且避免正则特殊字符问题；
- 切勿在 <pre> 内使用 innerHTML 插入未转义内容（存在 XSS 风险），推荐统一用 textContent 或框架的安全绑定机制（如 Vue 的 v-text、React 的 {value}）；
- 后端更优方案是直接返回已解析的原始换行符（即响应体中真实包含 字节），而非 JSON 中转义后的 "\n" —— 这需确保 API 返回的是标准 JSON，且前端通过 JSON.parse() 正确解析（现代 fetch().json() 默认处理良好）。
? 总结：核心在于区分「换行符字面量」与「换行符控制符」。前端拿到的字符串若含 "\n"，必须显式还原；而 <pre> 标签本身无需额外 CSS（如 white-space: pre 已是默认行为），只要内容含真实 ，即可原样换行渲染。
立即学习“前端免费学习笔记（深入）”；
