URL 编码解码 - component/uri 双模式与参数拆解

URL 里只能出现有限的字符集，中文、空格、& = ? # 等都要转成百分号编码（% 加十六进制字节）才能在地址中安全传输。工具提供两种模式：component（encodeURIComponent）连 : / ? 一起转义，适合参数值；uri（encodeURI）保留这些结构符，适合处理整条地址。

两种模式混用是常见的乱码来源 —— 在参数值上用了 uri 模式，& 与 = 会被原样留下，直接把 query 结构切断。解码时遇到不完整的百分号序列（如 %E4%BD）会明确报错，因为这类输入不构成合法的 UTF-8 字节序列，静默输出乱码反而更难排查。

这个工具解决你的问题了吗？

使用步骤

选模式：只处理参数值用 component；处理整条 URL 用 uri。
粘贴内容后点编码或解码，结果即时显示在下方。
解码时若粘贴的是完整 query string（含 & 或 =），工具会按参数逐个拆解，+ 按空格处理。
解码出的中文若还要拼回 URL，记得重新编码后再使用。

计算原理与示例

两种编码模式的区别

component 模式（encodeURIComponent）会转义字母数字与 - _ . ! ~ * ' ( ) 之外的所有字符，包括 : / ? = & #，适合编码单个参数值；uri 模式（encodeURI）保留 URL 结构符，只转义非 ASCII 字符与空格，适合编码整条地址。

解码规则

解码按所选模式调用对应的 decode 函数。遇到不完整的百分号序列（如 %E4%BD）或裸百分号（如 100%）会直接报错，因为它们不是合法的 UTF-8 编码，强行解码只会得到乱码。

参数拆解

解码模式下若输入形如 query string（含 = 或 &），会自动按 & 分隔、= 分键值逐个拆解，+ 按空格处理（表单惯例），重复键按出现顺序全部保留。

代码示例

JavaScript 编码与解码

// 参数值（会转义 : / ? = &）
encodeURIComponent("a=1&b=中文")     // a%3D1%26b%3D%E4%B8%AD%E6%96%87

// 整条地址（保留 : / ? = &）
encodeURI("https://a.com/p?x=中文")  // https://a.com/p?x=%E4%B8%AD%E6%96%87

// 解码
decodeURIComponent("%E4%B8%AD%E6%96%87") // 中文

PHP PHP 里的两种编码

<?php
echo urlencode("a=1 b");        // a%3D1+b（+ 代表空格）
echo rawurlencode("a=1 b");     // a%3D1%20b（%20 代表空格）
var_dump(urldecode("a%3D1+b")); // string(5) "a=1 b"

常见问题

encodeURI 与 encodeURIComponent 有什么区别？

encodeURI 用于整条 URL，保留 : / ? # & = 等结构符不转义；encodeURIComponent 用于参数值，把这些结构符也一并转义，防止值里的 & 被误当成参数分隔符。编码参数值务必用后者，否则值中含 & 或 = 时会破坏 URL 结构。

空格为什么变成 %20 或 + ？

%20 是 URL 标准的空格编码；+ 是 HTML 表单（application/x-www-form-urlencoded）的空格简写，两者语义相同但出现场景不同。本工具编码输出 %20，解码时把 + 也按空格处理，两种来源的字符串都能正确还原。

哪些字符不会被编码？

component 模式下不转义的只有 A-Z a-z 0-9 和 - _ . ! ~ * ' ( )；uri 模式额外保留 ; / ? : @ & = + $ , # 这些 URL 结构符。中文、emoji、空格、引号等在任何模式下都会被转义成 %XX 序列。

解码报错「百分号序列不完整」怎么办？

说明输入不是合法的编码串：常见于 % 后面不足两位十六进制（如 100%）、UTF-8 多字节序列被截断（如 %E4%BD 只有中文三个字节中的两个）。检查字符串是否被二次截断，或先确认它确实是编码后的内容再解码。

中文在 URL 里是怎么传输的？

浏览器先把中文按 UTF-8 编成字节序列（「中」是 E4 B8 AD 三个字节），再把每个字节写成 %XX 形式。所以「中」编码后是 %E4%B8%AD。解码时按相反顺序还原，这也是为什么截断字节会导致解码失败。

编码结果会被上传吗？

不会。编码、解码、参数拆解全部在浏览器里用原生函数完成，内容不经过任何服务器，断网可用。可以放心处理含 token、签名的接口地址。

什么时候该编码，什么时候该解码？

把中文、特殊字符拼进 URL 或参数前先编码；从 URL、日志、抓包结果里看到 %XX 串想还原成可读文字时用解码。判断技巧：内容里出现大量 %E4 %E5 %E6 开头的三字节序列，多半是编码后的中文。

延伸阅读

Base64 与 URL 编码：%E4%B8%AD 是什么

来自本站原创文章，讲清这个工具背后的算法与口径。