URL 编码解码处理的是网址里那些不能直接出现的字符。网址只允许一部分字符原样出现，中文、空格，以及 & ? = # 这类有特殊含义的符号，都必须先转义成 %XX 的形式，浏览器才认得。把网址或参数粘进来就能得到转义结果，反过来也能把一串 %E4 解码回可读文字。
它和 Base64 解决的问题不一样：Base64 是给数据换一种搬运格式，URL 编码则是让网址合法、不出歧义。下面把最容易搞混的几处一次讲清。
网址里为什么会出现 %E4 这种东西
网址在设计上只接受一小部分 ASCII 字符：字母、数字和少数符号可以原样出现，其余字符要么有特殊含义（比如 ? 表示查询开始、& 分隔参数、# 表示锚点），要么干脆不在允许范围内（比如中文和空格）。为了让网址保持纯文本、无歧义，这类字符要按字节逐个写成百分号加两位十六进制的形式，也就是常说的百分号编码。%E4 就是一个例子，它代表某个 UTF-8 字节，而不是 E4 这两个字。
延伸阅读：编码速查表
空格到底编成 %20 还是加号
这是最常被问的一处。在网址路径里，空格要写成 %20；但在表单提交（application/x-www-form-urlencoded）这种特定语境里，空格会写成加号，服务端读取时再把加号还原成空格。两种写法对应两套口径：如果你在拼一条普通网址，用 %20 最稳妥；如果你在模拟表单提交、或者对接的接口明确按表单格式解析，才会用到加号。麻烦在于，加号在普通网址里也可能表示字面意义的加号，不确认语境就混用，很容易两边对不上。
encodeURIComponent 和 encodeURI 差在哪，别用错
很多语言的 URL 编码函数都有两个版本，区别在于保留哪些字符。encodeURIComponent 编码得更彻底，它会把 : / ? # & = 这些符号也一并转义，适合用来编码单个参数的值——你希望这段文字原封不动地作为值传过去，不希望里面的 & 被当成参数分隔符。encodeURI 则保留 : / ? # [ ] @ 等结构符号，适合处理一整条网址，避免把网址的骨架也转义掉。一句话：给单个参数值编码用 encodeURIComponent，给整条网址编码用 encodeURI。
一个汉字为什么变成三个 %XX
百分号编码是按字节进行的，而一个汉字在 UTF-8 里占 3 个字节，所以通常会被编成 3 组 %XX。以「中」字为例，它编出来是 %E4%B8%AD；「文」字则是 %E6%96%87。理解了这一点，看到一串连续的 %E4 开头就不会觉得奇怪——那只是三个字节连在一起。反过来解码时，也要按同样的字符集把每三个字节还原成一个汉字，字符集对不上就会出现乱码。
带中文的链接、搜索关键词、接口参数怎么处理
三种最常见的场景：一是把中文关键词拼进搜索网址，比如把「在线工具」编成 %E5%9C%A8%E7%BA%BF%E5%B7%A5%E5%85%B7 再拼到参数后面；二是分享一条本身就含中文的链接，部分聊天软件和邮件客户端会把中文显示成乱码，先编码再发更保险；三是调用接口时，参数值里含 & 或空格，必须先编码，否则服务端会把一个参数错认成两个。这几种情况处理原则一样：只编码参数的值，别去动网址里本来就该保留的结构符号。
解码时的两个陷阱：百分号本身和双重编码
第一，百分号本身也是特殊字符，要表示一个真正的百分号得写成 %25。如果原文里本来就有 %25，解码一次会得到 %，再解一次才得到正确结果，多解或少解都会出错。第二，双重编码：有些系统会把已经编码过的字符串再编一次，于是 %E4 变成 %25E4，解码一次后剩下的还是编码态，看起来像没解开。遇到解不干净的情况，先确认它被编码了几层，再决定解几次。
参考资料
常见问题
%20 和加号有什么区别？
两者都可能代表空格，但语境不同：%20 用于网址路径等通用场合；加号表示空格只出现在表单提交（application/x-www-form-urlencoded）的语境里。拼普通网址用 %20 最稳妥。
为什么中文解码出来是乱码？
多半是字符集不一致：编码时用的是 UTF-8，解码时却按 GBK 或其他字符集还原。让编码和解码使用同一套字符集，通常就能得到正确文字。