本文讲解如何使用 JavaScript 动态创建 元素时，将转义字符序列 作为可见文本（而非回车控制符）原样显示，关键在于对反斜杠进行双重转义。
本文讲解如何使用 javascript 动态创建 `
` 元素时，将转义字符序列 ` ` 作为可见文本（而非回车控制符）原样显示，关键在于对反斜杠进行双重转义。<p>在 JavaScript 字符串中， 是一个<strong>转义序列</strong>，表示回车符（Carriage Return），其 Unicode 值为 U+000D。当它被插入到 DOM 文本节点（如 document.createTextNode()）中时，浏览器会将其解析为实际的控制字符，而非字面量 "\r" —— 因此你无法在页面上看到 这两个可见字符。</p><p>要让 <strong>以纯文本形式显示</strong>（即用户能看到 Hello World 中的 ），必须确保字符串字面量中包含的是两个独立字符：反斜杠 和字母 r。而由于 JavaScript 解析器会将单个反斜杠视为转义起始符，我们必须用 \r 来表示字面意义上的 ：</p>
- " " → 解析为回车符（不可见控制字符）
- "\r" → 解析为两个字符： + r（可见文本）
以下是正确实现的完整示例：
<meta charset="UTF-8"><p>Click the button to create a PRE element.</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<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>
✅ 渲染效果：
Hello World
⚠️ 注意事项：
- 在
标签中，空白和换行会被保留，因此它非常适合展示原始字符串格式，但<strong>不会自动“解释”或“隐藏”转义序列</strong>——能否显示 完全取决于传入的字符串是否已正确转义；
- 若使用模板字符串（`Hello World\r`），同样需双写反斜杠；
- 不要误用 innerHTML 并插入 ↵ 或 等实体，这会输出符号或实际回车，而非文本 ；
- 如需动态拼接，推荐使用 String.raw 避免重复转义（例如：String.rawHello World `），但注意String.raw` 不支持变量插值，需配合其他方法组合使用。
总结：显示字面量 的本质是字符串层面的转义控制，与 HTML 或
标签本身无关；只要 JavaScript 字符串中正确写成 "\r"，无论用 textContent、createTextNode 还是 innerText，都能稳定呈现为可见的两个字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
