URL 参数编码的必要性
理解为什么需要使用 encodeURIComponent 对 URL 参数进行编码
问题
为什么在发送请求时，URL 参数需要使用 encodeURIComponent 进行编码？
解答
URL 字符限制
根据网络标准 RFC 1738 规定，URL 中只能使用以下字符：
- 字母数字：
[0-9a-zA-Z] - 特殊字符：
$-_.+!*'(), - 保留字符（用于特定目的）
这意味着中文、空格等字符必须编码后才能在 URL 中使用。
编码方案的混乱
RFC 1738 没有规定具体的编码方法，导致不同浏览器、操作系统、字符集可能产生不同的编码结果。为了保证编码的一致性，应该在 JavaScript 中主动编码，而不是依赖浏览器的自动处理。
JavaScript 编码函数对比
escape()（已废弃）
除了 ASCII 字母、数字和 @ * _ + - . / 外，对其他字符进行编码。不推荐使用。
encodeURI()
用于编码完整的 URL，不会编码 URL 中有特殊含义的字符：; / ? : @ & = + $ , #
const url = 'https://example.com/search?q=前端开发&type=article';
console.log(encodeURI(url));
// https://example.com/search?q=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&type=articleencodeURIComponent()
用于编码 URL 的组成部分（如参数值），会编码所有特殊字符，包括 ; / ? : @ & = + $ , #
const param = '前端开发&框架';
console.log(encodeURIComponent(param));
// %E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%26%E6%A1%86%E6%9E%B6
// 实际使用场景
const keyword = '前端开发&框架';
const url = `https://example.com/search?q=${encodeURIComponent(keyword)}`;解码使用 decodeURIComponent()：
const encoded = '%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%26%E6%A1%86%E6%9E%B6';
console.log(decodeURIComponent(encoded));
// 前端开发&框架关键点
- URL 只能包含 ASCII 字母、数字和部分特殊字符，其他字符必须编码
- 使用 JavaScript 主动编码可以避免浏览器编码不一致的问题
encodeURI()用于完整 URL，不编码 URL 结构字符（如?&=）encodeURIComponent()用于参数值，会编码所有特殊字符，防止参数值中的特殊字符破坏 URL 结构- 编码后的字符以 UTF-8 形式输出，每个字节前加
%
目录