为什么 URL 需要编码
URL（统一资源定位符）有一套严格的字符规则：它只允许使用 ASCII 字母（A-Z、a-z）、数字（0-9）和少数保留字符。当我们需要在 URL 中传递中文、空格、特殊符号（如 &、=、#、%）时，直接放入会导致 URL 结构被破坏或无法解析。
URL 编码（也叫百分号编码，Percent-encoding）解决了这个问题：将不允许直接出现的字符，转换为 % 后跟两位十六进制数的形式。例如，中文字符"在"的 UTF-8 编码是 E5 9C A8，对应的 URL 编码就是 %E5%9C%A8。
URL 字符分类
理解 URL 中的字符分类，有助于判断何时需要编码：
- 非保留字符 — 字母、数字以及
- _ . ~，可以直接出现在 URL 中，无需编码 - 保留字符 —
: / ? # [ ] @ ! $ & ' ( ) * + , ; =，在 URL 中有特定语义，用于分隔符或参数时保留原义，作为普通字符传递时需要编码 - 其他字符 — 中文、空格、控制字符等，必须编码后才能出现在 URL 中
编码规则详解
URL 编码遵循以下规则：
- 将字符按照 UTF-8 编码转换为字节序列（中文通常占 3 字节）
- 每个字节以十六进制表示，前面加上百分号 %
- 空格通常编码为
%20（在表单数据中有时也写作 +，取决于上下文）
示例："你好 world" 编码后为 %E4%BD%A0%E5%A5%BD%20world。注意"好"的两个字节 E5 A5 BD 连续出现，组成完整的编码序列。
encodeURI 与 encodeURIComponent 的区别
在 JavaScript 中，这是最容易混淆的两个函数，它们的区别在实际开发中非常重要：
- encodeURI(url) — 用于编码整个 URL，不会编码 URL 中的语义字符（如
:/?#&），适合处理完整网址 - encodeURIComponent(component) — 用于编码 URL 的单个组成部分（如查询参数值），会对所有非字母数字字符编码，包括
&、=、#等
实战建议：拼接查询字符串时，参数名和参数值都应该用 encodeURIComponent，而不是 encodeURI。否则参数值中的 & 会破坏参数结构。
常见应用场景
1. 搜索参数传递
在 URL 中传递搜索关键词是最常见的场景：/search?q=%E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7，服务器解码后得到"在线工具"。
2. 重定向地址
登录后跳转的 callback URL 中，整个目标地址需要作为参数编码，否则其中嵌套的 ? 和 & 会与外层参数冲突。
3. 日志分析
Web 服务器日志中的 URL 通常是编码后的形式，解码后可以看到用户实际访问的路径和搜索内容，对 SEO 和运营分析很有价值。
常见误区
误区一：对已编码的 URL 重复编码
对 %E5%9C%A8 再次编码会得到 %25E5%259C%25A8（% 被编码为 %25），导致双重编码。一旦发生，解码一次只能还原到上一级，需要多次解码才能恢复。
误区二：混淆表单的 application/x-www-form-urlencoded
表单提交时空格编码为 +，而 URL 路径中的空格编码为 %20。处理时要注意上下文，否则可能得到不一致的结果。
快速编解码工具
日常开发中遇到编码后的 URL 或需要手动构造 URL 参数时，使用我们的 URL 编解码工具 可以快速完成转换，支持中文和特殊字符，结果一键复制。
URL 各部分的编码规则并不相同
一个完整 URL 由协议、域名、端口、路径、查询参数和片段组成，每一部分的编码规则不同。协议和域名通常只允许 ASCII 字符；路径中的斜杠是分隔符，不能随意编码；查询参数里 &、=、# 都有特殊含义；片段用于页面内定位。编码时只应对"内容"部分编码，不能把分隔符也一起转掉，否则 URL 结构会被破坏。
因此，处理整个 URL 和处理单个参数值要使用不同策略。例如路径中的中文可以编码，但不要把 / 编码；查询参数值中的空格和特殊字符必须编码，但 ? 和 & 作为分隔符应保留原义。混淆这些规则是参数丢失、跳转错误和 XSS 类问题的重要来源。
实战案例：构造安全的跳转地址
假设一个网站需要支持"登录后跳回原页面"，URL 通常写作 /login?redirect=/dashboard。如果用户在登录前访问的是 /search?keyword=在线工具&page=2，直接拼进 redirect 参数会破坏外层查询结构。正确做法是把整个目标地址用 encodeURIComponent 编码，得到 /login?redirect=%2Fsearch%3Fkeyword%3D...&page=2，服务端解码后再做安全校验，只允许跳转到站内地址。
这里有两个容易踩的坑：一是只编码了值的一部分，导致 ? 或 & 仍被当作外层参数；二是服务端收到后没有限制跳转目标，开放重定向可能被钓鱼利用。编码解决的是"结构正确"，服务端校验解决的是"目标安全"。
解码与排查技巧
遇到 URL 里出现 %25、%3F 等连续百分号时，大概率发生了双重编码。%25 解码一次是 %，再解码一次才得到真实字符。排查时可以用在线 URL 工具逐步解码，或者在前端控制台用 decodeURIComponent 验证。
日志分析中，访问日志通常保留原始编码 URL。先用工具解码，再对照页面路径和参数名，可以快速判断用户搜索词、筛选条件或来源地址是否异常。不要直接以编码串作为统计维度，因为同一内容可能有多种等价编码。
中文 URL 与 SEO
现代浏览器会自动把中文路径和参数转为百分号编码，搜索引擎也能理解编码后的 URL。对 SEO 而言，建议保持路径结构稳定，避免使用带大量参数或随机值的 URL。参数值编码应统一使用 UTF-8，否则不同来源的编码结果可能不一致，产生重复内容。
另外，URL 中的大小写、尾部斜杠和 # 片段都会影响规范化判断。可以通过 sitemap 和 canonical 标签明确首选地址，并保证所有内链使用同一写法。
常见问题速查
Q: 为什么我编码后的 URL 还是打不开？
先确认是否只对参数值编码、是否把 ? 和 & 保留为分隔符，再检查服务端是否按同一编码解码。双重编码和结构破坏是最常见的两个原因。
Q: 空格在 URL 里应该用 %20 还是 +？
在 URL 路径和查询参数的标准规则里通常使用 %20；HTML 表单的 application/x-www-form-urlencoded 使用 +。按上下文选择，不要混用。
Q: 如何把中文关键词放进分享链接？
用 encodeURIComponent 编码关键词后放入查询参数，分享出去的链接会自动包含可读的百分号编码，接收方解码即可还原。
Q: 解码时报 URIError 怎么办？
说明字符串里含有不完整的百分号序列，例如 % 后不是两位十六进制字符。先检查原始数据，不要用 try-catch 掩盖错误。
自查清单
- 参数名和参数值都使用 encodeURIComponent
- URL 分隔符不被意外编码
- 服务端跳转做站内白名单校验
- 日志分析前先统一解码
- 全站使用 UTF-8 编码 URL 参数
小结
URL 编码是 Web 开发的基础知识，规则简单但应用广泛。理解字符分类、掌握 encodeURI 和 encodeURIComponent 的区别，能帮你避免大量与参数传递相关的隐蔽 Bug。