一、前端转义字符的核心认知

前端开发中，“转义字符”并不是统一的语法，而是不同上下文有不同的转义体系。其中最常见、最重要的两类是：

1. JavaScript 里的转义（使用反斜杠 \）

2. HTML 里的转义（使用 &xxx; 或 &#nnn; 实体编码）

这两者的目标不同、语法不同、使用场景不同，但常被混为一谈，尤其是在处理 HTML 片段或 Markdown 渲染时容易出现误解。

---

二、JavaScript 中的转义：\

2.1 语法特征

在 JS 中，反斜杠 \ 用于字符串内部表达特殊字符、保留字面符号或避免语法冲突。

转义形式	代表含义	典型场景
\"	双引号	字符串内部包含引号
\'	单引号	同上
\\	反斜杠本身	Windows 路径、正则、特殊字符
\n	换行符	多行文本
\t	制表符	文本对齐
\u4F60	Unicode 字符	处理国际化字符
\x41	16 进制字符	处理 ASCII 字符
\ (行尾)	续行符	代码换行但不产生真实换行

2.2 使用场景总结

• 避免字符串语法冲突

  const str = "He said: \"Hello!\"";
  

• 路径表达

  const path = "C:\\Users\\Photos\\cat.png";
  

• 输出控制字符

  const log = "Step1\nStep2\nStep3";
  console.log(log);
  

• 代码续行（非真实换行）

  const long = "这是第一行\
  这是第二行但不会真的换行";
  

注意：

• \n 会真的换行

• \ 续行不会换行，只是让代码好看

---

三、HTML 中的转义：&xxx;

3.1 语法特征

HTML 里的转义不是 \，而是实体字符编码，目的是阻止浏览器将内容解析成 HTML 结构，或表达无法直接输入的字符。

HTML 实体	代表字符	典型用途
&lt;	<	让 <div> 变成文本而不是标签
&gt;	>	同上
&quot;	"	文本中保留双引号
&#39;	'	保留单引号
&amp;	&	阻止 & 被当成实体前缀
&nbsp;	空格	让空格不折叠、不换行

3.2 使用场景总结

1. 防止 HTML 被浏览器解析

<code>&lt;img src="x.png"&gt;</code>

浏览器看到的是：<img src="x.png">（纯文本），不会渲染成图片。

2. 展示代码或标签结构

<pre>&lt;table&gt;&lt;/table&gt;</pre>

用于技术文章、代码展示、文档说明。

3. 安全输出用户输入内容

在前端渲染用户输入时，必须防止恶意注入，例如：

el.innerHTML = escapeHtml(userInput)

此时 < 不是为了表格/图片展示，而是为了安全和文本化 HTML 片段。

---

四、JS 转义 vs HTML 转义：本质区别

维度	JavaScript \	HTML &xxx;
作用目标	解决字符串语法冲突、表达特殊字符	解决浏览器 HTML 解析、文本化标签、安全输出
发生阶段	JS 代码运行/编译阶段	HTML 渲染/解析阶段
语法	\" \\ \n \t	< > & '
是否影响浏览器渲染结构	❌ 不影响	✅ 影响，决定是否渲染成 HTML
典型误区	以为 \ 也能用于 HTML 转义	以为 < 是 markdown-it 自动生成

一句话总结：

\ 是 JavaScript 的转义符号，浏览器看不到它；
< 是 HTML 的实体编码，浏览器一定会处理它。

---

五、常见误区与解释

误区1：HTML 里用 \ 转义 <img> 或 <table>

// 这样是无效的，浏览器仍然会渲染成 HTML
return "<img src=\"x.png\">";

在 HTML 里想阻止渲染，必须用 <img>，而不是 \.

误区2：HTML token 只有被手动 return < 才会转义？

对。Markdown-it 不会主动把合法 HTML 转义，只有你手动输出 < 才会变成文本。

---

六、前端安全转义最佳实践

function escapeHtml(html) {
  return html
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

使用原则：

• 需要渲染 HTML → 不转义

• 需要展示标签/代码/阻止解析/安全输出 → 必须 HTML 实体转义

• JS 字符串内部包含特殊字符 → \ 转义