URL 编解码：我终于搞懂了为什么网址里会有 %20 和 %E4%BD%A0

有次对接第三方接口，对方要求把参数放到 URL 路径里，比如 /api/user/张三。我直接拼上去，结果报错 404。排查了半天才发现，“张三”这两个中文字符没有编码，浏览器自动转成了乱七八糟的东西。后来我写了一个 URL 编解码工具，每次调试接口前先编码一遍，省了很多事。这篇文章把 URL 编码的原理、工具用法、以及我踩过的坑分享出来。

本文工具由 VidDown 提供 —— 一个完全免费、无需登录、纯前端处理的在线工具集。除了 URL 编解码，还提供视频解析下载、JSON 格式化、PDF 合并、HTTP 状态码检测等 20+ 实用功能。所有操作在浏览器本地完成，不上传任何数据。
🌐 主站：https://viddown.cn
🔧 本文专属工具：URL 编解码工具

一、这个工具能做什么？

URL 编解码工具用于将字符串转换为 URL 安全格式（百分号编码），或反向还原。

• 编码（encodeURIComponent）：将特殊字符（中文、空格、&、=、? 等）转换为 %XX 格式，便于放入 URL 参数或路径中。
• 解码（decodeURIComponent）：将编码后的字符串还原为原始文本。
• 一键复制：编码/解码结果可快速复制到剪贴板。
• 本地处理：所有操作使用 JavaScript 原生方法，不上传服务器。

适用场景：
- 拼接 GET 请求参数时，对参数值进行编码（防止特殊字符破坏 URL 结构）。
- 调试接口时，快速解码后端返回的编码字符串。
- 处理表单数据（application/x-www-form-urlencoded）。
- 理解浏览器地址栏中 %20 等符号的含义。

二、URL 编码是什么？

💡 术语解释：URL 编码（也叫百分号编码）是一种将不安全字符转换为 % + 两位十六进制数的格式。因为 URL 中只允许英文字母、数字、-、_、.、~ 等少量字符，其他字符（如中文、空格、&、=、#）必须被编码。

常见编码示例：

两种编码方式

JavaScript 提供两种编码函数，容易混淆：

本工具使用 encodeURIComponent / decodeURIComponent，因为这是最常用、最安全的参数编码方式。

三、如何使用这个工具？

3.1 编码

1. 在输入框中输入原始文本，例如 name=张三&age=18。
2. 点击 「编码」 按钮。
3. 输出框显示编码结果：name%3D%E5%BC%A0%E4%B8%89%26age%3D18。

3.2 解码

1. 粘贴一段编码后的字符串，例如 hello%20world%21。
2. 点击 「解码」 按钮。
3. 输出框显示原始文本：hello world!。

3.3 复制与清空

• 点击 「复制结果」 可将当前输出内容复制到剪贴板。
• 点击 「清空」 可同时清空输入和输出框。

四、实战场景

场景1：拼接 GET 请求参数

假设要请求 https://api.example.com/search，参数 keyword 的值是 手机&电脑（包含特殊字符 &）。如果不编码，URL 会变成：https://api.example.com/search?keyword=手机&电脑

服务器会误认为有两个参数：`keyword=手机` 和 `电脑=`（无值）。**正确做法**：对参数值编码。

使用本工具对 `手机&电脑` 编码，得到 `%E6%89%8B%E6%9C%BA%26%E7%94%B5%E8%84%91`。
最终 URL：
https://api.example.com/search?keyword=%E6%89%8B%E6%9C%BA%26%E7%94%B5%E8%84%91

场景2：路径中包含中文

如果 API 设计为 /user/张三，直接拼接会导致浏览器无法识别。对 张三 编码得到 %E5%BC%A0%E4%B8%89，请求 /user/%E5%BC%A0%E4%B8%89 即可。

场景3：调试时快速解码

后端日志中返回了 redirect_uri=https%3A%2F%2Fexample.com%2Fcallback，肉眼很难看出来。粘贴到工具点击「解码」，得到 redirect_uri=https://example.com/callback。

五、技术实现：浏览器本地处理

工具使用 JavaScript 原生方法，完全在本地运行，不发送任何数据到服务器。

// 编码
function encode(text) {
    return encodeURIComponent(text);
}

// 解码
function decode(text) {
    return decodeURIComponent(text);
}

// 示例
const original = "name=张三&age=18";
const encoded = encodeURIComponent(original);
console.log(encoded); // name%3D%E5%BC%A0%E4%B8%89%26age%3D18
const decoded = decodeURIComponent(encoded);
console.log(decoded); // name=张三&age=18

六、踩坑汇总（我全遇到过）

1. 混淆 encodeURI 和 encodeURIComponent

错误：想编码参数值，用了 encodeURI，结果 /、?、& 等字符没有被编码，导致参数结构混乱。
示例：
encodeURI("name=张三&age=18") → "name=%E5%BC%A0%E4%B8%89&age=18"（& 没编码）
encodeURIComponent("name=张三&age=18") → "name%3D%E5%BC%A0%E4%B8%89%26age%3D18"（正确）

解决：编码参数值用 encodeURIComponent；编码整个 URL（包含协议、域名、路径）用 encodeURI。

1. 忘记编码导致参数解析错误

现象：用户输入包含 & 或 =，拼接 URL 后后端收到的参数被截断或合并。
解决：永远不要信任用户输入，所有外部数据放入 URL 前必须编码。

1. 解码时遇到 URIError: URI malformed

原因：输入的字符串不是合法的百分号编码格式，比如 %XX 中的 XX 不是十六进制数，或者 % 后面不足两位。
解决：检查待解码字符串是否被意外截断或多次编码。例如 %25 是 % 的编码，再次解码会报错。

1. 多次编码导致乱码

现象：对已编码的字符串再次编码，导致 % 被编码成 %25，变成二次编码。
示例：
第一次编码 你好 → %E4%BD%A0%E5%A5%BD
第二次编码 → %25E4%25BD%25A0%25E5%25A5%25BD
解码一次后仍是 %E4%BD%A0%E5%A5%BD，需要解码两次才恢复原文。

解决：调用解码前确认只编码了一次。如果不知道编码次数，可以循环解码直到不再变化（但有风险）。

1. 服务器端编码与前端不一致

原因：不同编程语言的 URL 编码函数默认字符集不同（PHP 的 rawurlencode 符合 RFC 3986，Java 的 URLEncoder 编码空格为 +）。
解决：统一使用 UTF-8 编码，且前后端约定相同的编码方式（推荐 RFC 3986，空格编码为 %20）。

七、与命令行工具对比

Python 命令行示例

# 编码
python -c "import urllib.parse; print(urllib.parse.quote('你好世界'))"
# 输出: %E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

# 解码
python -c "import urllib.parse; print(urllib.parse.unquote('%E4%BD%A0%E5%A5%BD'))"
# 输出: 你好

八、一点小建议

• 永远对用户输入进行编码，无论是 GET 参数还是 POST 表单，防止注入和解析错误。
• 统一使用 encodeURIComponent 而非 encodeURI，除非你明确需要保留 URL 语义字符。
• 解码前确认字符串格式，避免 URIError。
• 使用在线工具验证：在拼接复杂 URL 前，先用本工具测试编码/解码结果。

注意空格：encodeURIComponent 将空格编码为 %20，而 application/x-www-form-urlencoded 表单传统上编码为 +，两者不兼容。现代 API 通常接受 %20。

九、总结

URL 编解码是 Web 开发中最基础也最容易出错的一环。VidDown 的这个工具让你不用写代码就能快速编码/解码，适合调试接口、构造 URL、分析网络请求。

如果你还没试过，现在就去 https://viddown.cn/tools/url-encode/ 体验一下。

下次你手动拼接 URL 遇到乱码时，先停下来，把参数编码再放进去，世界就清净了。

附录：常见字符编码速查表

关于 VidDown
VidDown 还提供视频解析下载、JSON 格式化与差异对比、PDF 合并压缩、IP 子网分析、Cron 表达式生成、HTTP 状态码检测等 20+ 工具。所有工具完全免费、无需登录、纯前端本地处理，不泄露隐私。
🔗 主站：https://viddown.cn

版权声明：本文为 VidDown 原创，欢迎分享，请保留出处。