面试题：escape、encodeURI、encodeURIComponent 的区别是什么？

escape、encodeURI 和 encodeURIComponent 都是 JavaScript 中用于对字符串进行编码的函数，主要用于处理 URL 或查询参数中的特殊字符。但它们的作用范围、编码规则和现代推荐程度有显著区别。

---

1. escape() (已废弃)

• 状态：已废弃 (Deprecated)。不应在新代码中使用。它在 ECMAScript v3 中已被标记为过时，现代开发应使用 encodeURI 或 encodeURIComponent。
• 作用：对字符串进行编码，将除了 @*_+-./ 之外的所有非 ASCII 字母数字字符转换为 %xx 或 %uxxxx 的形式（xx 是十六进制，xxxx 是 Unicode）。
• 问题：
  • 它不遵循 URL 编码的标准（RFC 3986）。
  • 对空格编码为 +，这在 application/x-www-form-urlencoded 格式中是正确的，但在通用 URL 中，空格应该编码为 %20。
  • 无法正确处理非 Latin-1 字符。
• 示例：

escape('Hello World!'); // "Hello%20World!"
  escape('https://example.com?name=John Doe'); // "https%3A//example.com%3Fname%3DJohn+Doe" (注意：'/' 没有被编码，' ' 变成 '+')

---

2. encodeURI() (编码整个 URI)

• 目的：用于编码一个完整的 URI。它假定输入是一个完整的 URL，并且不会对 URI 的结构性字符（如协议、域名、路径分隔符）进行编码，只编码那些在 URI 中不安全的字符。
• 保留不编码的字符：
  • 保留字符：: / ? # [ ] @
  • 未保留字符（字母、数字、- _ . ~）
  • 以及 ! * ' ( )
• 编码的字符：空格、中文、以及其他所有未列出的特殊字符。
• 用途：当你有一个完整的 URL 字符串，但其中可能包含需要编码的非 ASCII 字符或空格时使用。例如：encodeURI('https://example.com/路径/文件名 with spaces.html')。
• 示例：

encodeURI('https://example.com/搜索?q=你好 world');
  // 输出: "https://example.com/%E6%90%9C%E7%B4%A2?q=%E4%BD%A0%E5%A5%BD%20world"
  // 注意：'?' 和 '/' 没有被编码，空格被编码为 '%20'

---

3. encodeURIComponent() (编码 URI 组件)

• 目的：用于编码 URI 的一个组成部分，例如查询参数的值、路径段或表单数据。它会编码几乎所有特殊字符，包括那些在 encodeURI 中保留的字符。
• 保留不编码的字符：
  • 未保留字符：字母、数字、- _ . ~
• 编码的字符：所有其他字符，包括 : / ? # [ ] @ ! * ' ( ) ; / ? : @ & = + $ , 等等。
• 用途：当你需要将一个字符串作为查询参数的值或路径的一部分插入到 URL 中时使用。这是最常用的编码函数，尤其是在构建查询字符串时。
• 示例：

encodeURIComponent('name=John Doe & city=New York');
  // 输出: "name%3DJohn%20Doe%20%26%20city%3DNew%20York"
  // 注意：'=' 和 '&' 也被编码了，这对于查询参数的值是必要的

  // 构建查询字符串的正确方式
  const key = 'user name';
  const value = 'John & Jane';
  const queryString = `?${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
  // 结果: "?user%20name=John%20%26%20Jane"

---

核心区别总结

特性	escape()	encodeURI()	encodeURIComponent()
状态	已废弃	现代标准	现代标准
用途	不推荐使用	编码完整 URI	编码 URI 的组成部分
是否编码 : / ? # @	否	否	是
是否编码 ; / ? : @ & = + $ ,	部分	否	是
是否编码空格	+	%20	%20
推荐使用场景	不要使用	https://example.com/路径/文件名	?key=value, path/to/内容

---

如何选择？

• 永远不要使用 escape()。
• 需要编码一个完整的 URL 字符串（如跳转链接），且 URL 中可能包含非 ASCII 路径 → 使用 encodeURI()。
• 需要将数据作为查询参数、路径段或表单值插入到 URL 中 → 使用 encodeURIComponent()。

简单口诀：

• encodeURI：保结构（保留 ://?# 等结构字符）。
• encodeURIComponent：全编码（只放过字母数字和 -_.~）。