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=article

encodeURIComponent()

用于编码 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 形式输出，每个字节前加 %