URL 参数为什么需要 encodeURIComponent 转码
理解 URL 编码规范和 JavaScript 编码函数的使用场景
问题
为什么在发送请求时，URL 参数需要使用 encodeURIComponent 进行转码？
解答
URL 字符限制
根据网络标准 RFC 1738 规定，URL 只能使用以下字符：
- 英文字母：
[0-9a-zA-Z] - 特殊字符：
$-_.+!*'(), - 保留字符（用于特定用途）
这意味着中文、空格等字符必须编码后才能在 URL 中使用。但 RFC 1738 没有规定具体编码方法，导致不同浏览器、操作系统可能产生不同的编码结果。
统一编码方案
为了保证服务器接收到格式统一的数据，应该在 JavaScript 中主动对 URL 进行编码，而不是依赖浏览器的自动处理。
JavaScript 编码函数对比
escape()（已废弃）
除了 ASCII 字母、数字和 @ * _ + - . / 外，对其他所有字符编码。不推荐使用。
encodeURI()
用于对整个 URL 编码，不会编码 URL 中有特殊含义的字符：; / ? : @ & = + $ , #
const url = 'http://example.com?name=张三&age=20';
encodeURI(url);
// http://example.com?name=%E5%BC%A0%E4%B8%89&age=20encodeURIComponent()
用于对 URL 的组成部分（如参数值）进行编码，会编码所有特殊字符，包括 ; / ? : @ & = + $ , #
const name = '张三';
const param = `name=${encodeURIComponent(name)}`;
// name=%E5%BC%A0%E4%B8%89
// 实际使用场景
const baseUrl = 'http://example.com';
const params = `?name=${encodeURIComponent('张三')}&redirect=${encodeURIComponent('http://other.com?id=1')}`;
const fullUrl = baseUrl + params;解码使用 decodeURIComponent()：
decodeURIComponent('%E5%BC%A0%E4%B8%89');
// 张三关键点
- URL 只能包含 ASCII 字母、数字和部分特殊字符，其他字符必须编码
encodeURI()用于编码整个 URL，不编码 URL 结构字符（如?&=）encodeURIComponent()用于编码 URL 参数值，会编码所有特殊字符- 在拼接 URL 参数时应使用
encodeURIComponent()，避免参数值中的特殊字符破坏 URL 结构 - 使用 JavaScript 主动编码可以保证不同环境下的编码结果一致
目录