本文讲解如何使用 JavaScript 动态创建 <pre> 元素时，将转义字符序列 作为可见文本（而非回车控制符）原样显示，关键在于对反斜杠进行双重转义。
本文讲解如何使用 javascript 动态创建 `
` 元素时，将转义字符序列 `
` 作为可见文本（而非回车控制符）原样显示，关键在于对反斜杠进行双重转义。</p><p>在 JavaScript 字符串中，
是一个<strong>转义序列</strong>，表示回车符（Carriage Return），其 Unicode 值为 U+000D。当它被插入到 DOM 文本节点（如 document.createTextNode()）中时，浏览器会将其解析为实际的控制字符，而非字面量 "\r" —— 因此你无法在页面上看到
这两个可见字符。</p><p>要让
<strong>以纯文本形式显示</strong>（即用户能看到 Hello World
中的
），必须确保字符串字面量中包含的是两个独立字符：反斜杠 和字母 r。而由于 JavaScript 解析器会将单个反斜杠视为转义起始符，我们必须用 \r 来表示字面意义上的
：</p><ul><li>"
" → 解析为回车符（不可见控制字符） </li><li>"\r" → 解析为两个字符： + r（可见文本）</li></ul><p>以下是正确实现的完整示例：</p><pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<p>Click the button to create a PRE element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
const pre = document.createElement("pre");
// 注意：使用 "\r" 而非 "
" —— 双反斜杠确保
被当作字面量渲染
const text = document.createTextNode("Hello World\r");
pre.appendChild(text);
document.body.appendChild(pre);
}
</script>
</body>
</html>
✅ 渲染效果：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
Hello World
⚠️ 注意事项：
- 在 <pre> 标签中，空白和换行会被保留，因此它非常适合展示原始字符串格式，但不会自动“解释”或“隐藏”转义序列——能否显示 完全取决于传入的字符串是否已正确转义；
- 若使用模板字符串（`Hello World\r`），同样需双写反斜杠；
- 不要误用 innerHTML 并插入 ↵ 或 等实体，这会输出符号或实际回车，而非文本 ；
- 如需动态拼接，推荐使用 String.raw 避免重复转义（例如：String.rawHello World `），但注意String.raw` 不支持变量插值，需配合其他方法组合使用。
总结：显示字面量 的本质是字符串层面的转义控制，与 HTML 或 <pre> 标签本身无关；只要 JavaScript 字符串中正确写成 "\r"，无论用 textContent、createTextNode 还是 innerText，都能稳定呈现为可见的两个字符。
