JavaScript URL 编码解码：escape、encodeURI 与 encodeURIComponent 详解

前言

在 Web 项目开发中，通过 URL 传递参数是常见操作，尤其是涉及中文参数或复杂 URL 地址时，若处理不当极易在后台服务端引发解析错误。本文旨在系统梳理 URI 编解码的核心概念，探讨 URL 编码的必要性，并详细对比分析 JavaScript 中三组关键的编解码函数：escape/unescape、encodeURI/decodeURI 以及 encodeURIComponent/decodeURIComponent，帮助开发者选择正确的编码策略。

一、为什么要进行 URL 编码

URL 编码的根本原因在于避免 URL 中特定字符引发的语义歧义。以下场景典型地展示了未编码可能带来的问题：

1. 场景一：路径包含中文

标准 URL 规范不允许直接包含非 ASCII 字符。当客户端浏览器与服务端支持的字符集不一致时，直接传递中文会导致乱码或请求失败，因此必须进行编码处理。

https://code-nav.top/download/3?type=视频教程

2. 场景二：参数值包含特殊分隔符

URL 查询字符串通常采用 key=value 键值对形式，并以 & 符号分隔多个参数，例如 /s?q=abc&ie=utf-8。若某个 value 值本身包含 = 或 & 符号，服务器在解析时将无法正确区分参数边界，导致解析错误。因此，必须对这类引起歧义的 & 和 = 符号进行编码转义。

依据 RFC 标准，部分符号在 URI 中属于保留字符或非法字符，不能直接传递，必须按照特定格式进行编码。下文将列举需要编码的具体字符类型。

二、需要编码的字符范围

根据 RFC3986 文档规定，URL 中仅允许直接包含英文字母（a-zA-Z）、数字（0-9）以及四个特殊字符：连字符（-）、下划线（_）、点（.）和波浪号（~）。此外，所有保留字符也必须保持原样。因此，未经编码的 URL 中只能出现普通英文字符、数字、$-_.+!*'() 等特殊字符以及保留字符。凡是不在此列表中的字符（如中文、空格等），均必须经过编码后方可出现在 URL 中。

不安全的字符

上述提到的未编码字符若直接出现在 URL 中，可能会改变 URL 的语义结构，导致服务器无法正确识别请求路径或参数，从而引发错误。

三、JavaScript 中的三种编码方式

第一种：escape 和 unescape

escape() 函数并不适用于 URL 编码，其设计初衷是返回字符的 Unicode 编码值。具体规则如下：

该函数会对 ASCII 字母、数字以及标点符号 "@ * _ + - . /" 之外的所有字符进行编码。位于 u0000 到 u00ff 范围内的字符会被转换为 %xx 格式，其余字符则转换为 %uxxxx 格式。对应的解码函数为 unescape()。

编码示例：

"https://code-nav.top/download/3?type=" + escape('视频教程')

解码示例：

"https://code-nav.top/download/3?type=" + unescape('%u89C6%u9891%u6559%u7A0B')

使用注意事项：

首先，无论网页原始编码格式如何，JavaScript 编码函数处理后的结果均为 Unicode 字符。这意味着 escape() 和 unescape() 的输入与输出默认均基于 Unicode 编码，这一特性同样适用于后续介绍的函数。

其次，escape() 不会对加号（+）进行编码。然而，在 HTML 表单提交时，空格通常会被转换为 + 号，服务器端处理数据时会将 + 号还原为空格。因此，若使用 escape() 编码包含空格的字符串，直接传递可能导致服务端解析出的空格与预期不符，使用时需格外谨慎。

第二种：encodeURI 和 decodeURI

encodeURI() 是 JavaScript 中专门用于对完整 URL 进行编码的函数。其编码规则如下：

该函数旨在对 URL 的各个组成部分进行个别编码。除了常见的 ASCII 符号外，它不会对 URL 中具有特殊语义的符号（如 ; / ? : @ & = + $ , #）进行编码。编码后的输出为 UTF-8 格式，每个字节前添加 % 符号，并以十六进制转义序列（%xx）对生成的 1 字节、2 字节或 4 字节字符进行编码。对应的解码函数为 decodeURI()。

编码示例：

encodeURI('https://code-nav.top/download/3?type=视频教程')

解码示例：

decodeURI('https://code-nav.top/download/3?type=%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B')

第三种：encodeURIComponent 和 decodeURIComponent

与 encodeURI() 的主要区别在于，encodeURIComponent() 用于对整个 URL 字符串（包括参数部分）进行编码。在 encodeURI() 中不被编码的符号（; / ? : @ & = + $ , #），在 encodeURIComponent() 中均会被编码。

具体规则如下：

对应的解码函数为 decodeURIComponent()。

编码示例：

encodeURIComponent('https://code-nav.top/download/3?type=视频教程')

解码示例：

decodeURIComponent('https%3A%2F%2Fcode-nav.top%2Fdownload%2F3%3Ftype%3D%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B')

特别注意：若参数中包含特殊字符且未正确编码，可能会导致请求中断或解析错误。

三、总结与建议

官方已不再推荐使用 escape 函数，该函数基本已被淘汰。在对 URL 进行编码时，应避免使用此方法，推荐优先使用 encodeURI 和 encodeURIComponent。

后续两个函数的主要区别在于：

encodeURI() 假设其参数是 URI 的一部分（如协议、主机名、路径或查询字符串），因此它不会转义用于分隔 URI 各部分的标点符号；而 encodeURIComponent() 则会转义所有特殊字符，适用于编码 URL 中的参数值。

以上就是 JavaScript 对 URL 进行编码和解码的三种方式的详细内容，更多关于 JS URL 编码解码的资料请关注本站其它相关文章！