深入理解 URL 编码：为什么空格变成了 %20

你是否曾经复制过一个网址，结果发现里面全是 %20、%2F 之类的奇怪字符？这就是 URL 编码，也称为 百分号编码 (Percent-encoding)。

为什么我们需要它？

URL（统一资源定位符）只能使用 ASCII 字符集 通过互联网进行传输。然而，现代网址经常包含 ASCII 之外的字符（比如中文、Emoji），或者包含在 URL 中有特殊含义的字符（比如 ?、&、/）。

为了解决这个问题，我们使用 URL 编码。它将不安全的字符转换为可以通过互联网安全传输的格式。

它是如何工作的？

URL 编码将不安全的字符替换为 % 后跟两个十六进制数字。

例如：

• 空格 变成 %20
• ! 变成 %21
• / 变成 %2F
• 中 (中文) 变成 %E4%B8%AD (UTF-8 编码的十六进制)

亲自试一试

你可以使用下面的工具来测试不同字符是如何被编码的：

常见编码字符表

JavaScript 实现

在 JavaScript 中，主要有两个函数：

1. encodeURI(): 用于编码完整的 URI。它不会编码保留字符，如 /、?、:。
2. encodeURIComponent(): 用于编码 URI 组件（如查询参数）。它会编码所有非标准字符。

const url = 'https://example.com/search?q=hello world';

console.log(encodeURI(url));
// 输出: https://example.com/search?q=hello%20world

console.log(encodeURIComponent(url));
// 输出: https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world

总结

理解 URL 编码对于任何 Web 开发者来说都是必不可少的。它确保您的数据在网络传输过程中不会破坏 URL 的结构，保证了数据的完整性和安全性。