URL 编码:百分号编码查询参数与路径

百分号编码用 %XX 替换不安全字符,使任意文本可以安全放入 URL。掌握需要转义哪些字符,以及如何将其解码还原。

什么是百分号编码

URL 中不允许出现的字符会被替换成一个百分号加两位十六进制数字。空格变成 %20,& 变成 %26。

encodeURIComponent 与 encodeURI

对单个查询参数值或路径段使用 encodeURIComponent —— 它会转义 /、?、& 与 =。只对整个 URL 使用 encodeURI,因为那些字符在那里是结构性的,必须保留。

加号与 %20 的陷阱

在查询字符串里,空格可能表现为加号(form 编码)或 %20。decodeURIComponent 不会把加号转回空格,所以解码 form 数据前要先把加号替换掉。

双重编码

对已经编码的字符串再做一次编码,会把 %20 变成 %2520。如果输出里看到 %25 序列,说明这个值被编码了两次 —— 反复解码,直到结果不再变化为止。

保留字符与未保留字符

RFC 3986 把 URL 字符分成保留字符(gen-delims,如 : / ? #,sub-delims,如 & =)和未保留字符(字母、数字、- . _ ~)。未保留字符永远不需要编码;保留字符只有在作为值出现、而不是作为 URL 结构时才需要编码。

编码整个 URL 与编码单个值的区别

encodeURI 用于整个 URL:它会保留 : / ? # & =,让 URL 结构完整。encodeURIComponent 用于要塞进路径段或查询参数的单个值 —— 它会转义那些结构字符,防止值越界到 URL 的其他位置。

用代码安全地拼出查询字符串

优先使用 URLSearchParams(浏览器)或 url.URLSearchParams(Node)而不是字符串拼接。这两个 API 会正确编码键和值、支持多值参数,并避免最常见的错误 —— 忘记编码一个恰好包含 & 或 = 的参数。