URL 编码(Percent Encoding)将特殊字符替换为 % 加两位十六进制数表示的字节值。
| 字符 | 编码 | 说明 |
|---|---|---|
| 空格 | %20 或 + | 在查询字符串中空格也可用 + 表示 |
| ! | %21 | 感叹号 |
| # | %23 | 哈希符,URL 中用于锚点 |
| $ | %24 | 美元符 |
| & | %26 | 参数分隔符,需编码 |
| = | %3D | 键值对分隔符,需编码 |
| ? | %3F | 查询字符串开始标记 |
| / | %2F | 路径分隔符(encodeURIComponent 编码,encodeURI 不编码) |
| 中文"你" | %E4%BD%A0 | UTF-8 多字节编码 |
| 函数 | 不编码的字符 | 适用场景 |
|---|---|---|
| encodeURI | A-Z a-z 0-9 - _ . ! ~ * ' ( ) ; / ? : @ & = + $ , # | 对完整 URL 编码,保留 URL 结构字符 |
| encodeURIComponent | A-Z a-z 0-9 - _ . ! ~ * ' ( ) | 对 URL 参数值编码,编码所有结构字符 |
| 场景 | 推荐函数 | 示例 |
|---|---|---|
| 编码查询参数值 | encodeURIComponent | q=encodeURIComponent("你好") → q=%E4%BD%A0%E5%A5%BD |
| 编码完整 URL | encodeURI | 保留 ://、/ 等结构 |
| 解码后端传来的参数 | decodeURIComponent | %E4%BD%A0%E5%A5%BD → 你好 |
| 表单数据提交 | application/x-www-form-urlencoded | 空格编码为 +,其余用 %XX |
RFC 3986 将 URL 字符分为两类: