打开网易新闻 查看更多图片

URL 编码

有些字符不能出现在 URL 中(例如空格),其他的一些字符在 URL 中有特殊含义。我们需要转换特殊字符以使之符合 W3 URI 规范( RFC 3986)中定义的句法。这就意味着 URL 必须只能包含一个特殊的 ASCII 字符的子集:我们熟悉的字母和数字,以及一些在 URL 中用作控制字符的保留字符。下表展示了这些字符:

打开网易新闻 查看更多图片

在生成一个有效的 URL 时,你必须确保它只包含了上述字符。让 URL 使用上述字符会带来两个问题:

● 超出上述字符集的字符需要处理。例如,汉字 “上海+中國”需要使用上面的字符来编码。

● 有些字符是上述的保留字符,但是需要作为字面字符使用。例如 ? 在 URL 中用于标示 query string 的开始;如果你想使用字符串 “? and the Mysterions,” 那么你需要编码 ‘?’ 字符。

所有需要编码的字符会以一个 ‘%’ 符号外加一个两位的十六进制值来表示。例如,UTF-8 编码的 “上海+中國” 使用 URL 编码后变成了 “%E4%B8%8A%E6%B5%B7%2B%E4%B8%AD%E5%9C%8B”。字符串 “? and the Mysterians” 会被 URL 编码为 “%3F%20and%20the%20Mysterians”。

常见的需要编码的字符

一些必须被编码的字符是:

打开网易新闻 查看更多图片

JavaScript 中的 URL 编码处理

在 JavaScript 中 encodeURIComponent() 和 encodeURI() 这两个内置函数都可以进行 URL 编码,会把 URL 中的保留字符替换为它们的 UTF-8 编码后的字符。

大多数浏览器会自动进行 URL 编码,例如会把空格字符编码为 %20,不过总有一些例外。幸运的是浏览器提供了内置的 URL 编码和解码函数:encodeURI,encodeURIComponent 和 decodeURI,decodeURIComponent。问题是如何使用这些函数,以及它们之间的区别是什么。

首先介绍每个函数的用途以及如何使用它们。

encodeURI()

为一个字符串进行 URL编码很容易,只需要调用 encodeURI,传入要编码的字符串即可。此函数会返回编码后的 URL。

打开网易新闻 查看更多图片

decodeURI()

此函数会进行解码,调用 decodeURI 函数,传入要上述编码后的字符串,然后它会返回解码后的正常的字符串。

打开网易新闻 查看更多图片

encodeURIComponent()

encodeURIComponent 函数应该用于编码 query string 的参数值。encodeURI 和 encodeURIComponent 之间的区别是 encodeURIComponent 编码整个字符串,而 encodeURI 忽略协议前缀(’http://’)以及域名。encodeURIComponent 被设计用来编码所有的内容,而 encodeURI 会忽略 URL 中的域名部分。

打开网易新闻 查看更多图片

当你想要为 URL 中的参数值编码时,请选择 encodeURIComponent 函数。

打开网易新闻 查看更多图片

在 JavaScript 中为了更严格地遵循 RFC 3986,可以这样做:

打开网易新闻 查看更多图片

decodeURIComponent()

decodeURIComponent 函数会解码 encodeURIComponent 函数编码后的字符串,把它还原为正常的内容:

打开网易新闻 查看更多图片

结语

在本文中我们介绍了 URL 编码的基础知识,同时展示了如何在 JavaScript 中进行 URL 编码。encodeURI 和 encodeURIComponent 函数是非常使用的内置函数,可以帮我们快速并安全的进行 URL 编码,对于构建健壮的 Web 应用是必不可少的。