encodeURI() vs. encodeURIComponent() 该怎么用

URI（统一资源标识符）在网络世界中无处不在，而 JavaScript 提供了 encodeURI() 和 encodeURIComponent() 两个函数来处理 URI 的编码问题。虽然它们都用于编码，但作用对象和编码范围却大相径庭。理解它们的区别，能帮助我们避免在 URL 处理中踩坑。

---

encodeURI() vs. encodeURIComponent()：一字之差，天壤之别

1. encodeURI()：编码整个 URI

encodeURI() 函数用于编码整个 URI。它的主要目的是将 URI 中的非 ASCII 字符转换为 %xx 的形式，同时保留 URI 中具有特殊含义的字符，比如：/ (斜杠), ? (问号), & (和号), = (等号), : (冒号), ; (分号), # (井号), + (加号), @ (at 符号) 等。

使用场景： 当你有一个完整的 URL 字符串，并且希望对其中的非 ASCII 字符或需要编码的普通字符进行编码，同时保持 URL 的结构不变时，使用 encodeURI()。

示例：

const fullUrl = "https://example.com/我的文件.html?name=张三&age=20";
const encodedUrl = encodeURI(fullUrl);
// 结果：https://example.com/%E6%88%91%E7%9A%84%E6%96%87%E4%BB%B6.html?name=%E5%BC%A0%E4%B8%89&age=20
// 注意：问号 (?)、等号 (=)、和号 (&) 等作为 URL 结构一部分的字符都没有被编码。

---

2. encodeURIComponent()：编码 URI 的组件

encodeURIComponent() 函数则用于编码 URI 的某个组件或片段（Component）。它会编码几乎所有特殊字符，包括那些在 encodeURI() 中被保留的字符（如 /, ?, &, = 等）。这是因为在组件中，这些字符应该被视为普通数据，而不是 URL 结构的一部分。

使用场景： 当你需要将一段任意字符串作为 URL 的某个部分（例如查询参数的值、路径中的某个片段）插入时，强烈建议使用 encodeURIComponent()。它能确保这段字符串中的所有特殊字符都被正确编码，从而避免破坏 URL 的结构或引起歧义。

示例：

const searchTerm = "Hello & World/Test String?";
const encodedSearchTerm = encodeURIComponent(searchTerm);
// 结果：Hello%20%26%20World%2FTest%20String%3F
// 注意：和号 (&)、斜杠 (/)、问号 (?) 都被编码了，因为它们在“searchTerm”这个组件中是数据的一部分。

const url = `https://www.example.com/search?q=${encodedSearchTerm}`;
// 最终 URL：https://www.example.com/search?q=Hello%20%26%20World%2FTest%20String%3F

---

总结与最佳实践

简单来说：

• encodeURI()：用于整个 URI，保留 URI 结构字符。
• encodeURIComponent()：用于 URI 的某个组件，编码几乎所有特殊字符。

在实际开发中，如果你要将用户输入或其他动态数据作为 URL 的一部分（特别是查询参数的值），务必使用 encodeURIComponent()。这能有效防止 URL 注入问题，并确保数据的正确传输。而 encodeURI() 的使用场景相对较少，通常仅用于对已经构成完整 URL 的字符串进行非 ASCII 字符的编码。

希望这篇短文能帮助你更好地理解这两个重要的 JavaScript 函数！