如何在 JavaScript 中对 URL 进行编码和解码？

编码和解码 URI和 URI 组件是 Web 开发中的一项常见任务，同时使用查询参数向 API 发出 GET 请求。很多时候用查询参数构造一个 URL字符串，为了理解它，响应服务器需要解码这个 URL。浏览器会自动对 URL 进行编码，即将一些特殊字符转换为其他保留字符，然后发出请求。例如：空格字符“ ”转换为 + 或 %20。

例子：

• 打开 www.google.com 并编写搜索查询“geeks for geeks”。
• 搜索结果出现后，观察浏览器的 URL 栏。浏览器 URL 将包含 %20 或 + 符号代替空格。
• URL 将显示为：https://www.google.com/search?q=geeks%20for%20geeks 或 https://www.google.com/search?q=geeks+for+geeks

注意：浏览器自动将空格转换为 + 或 %20 符号。

还有许多其他特殊字符，通过硬编码转换它们每个都将是乏味的。 JavaScript 提供以下函数来执行此任务：
对 URL 进行编码：可以使用 Javascript 进行编码

• 编码URI函数
• 逃脱（）

1、encodeURI函数： encodeURI()函数用于对完整的URI进行编码。此函数对除 (, / ? : @ & = + $ #)字符之外的特殊字符进行编码。

句法：

encodeURI( complete_uri_string )

参数：此函数接受单个参数 complete_uri_string，用于保存要编码的 URL。

返回值：此函数返回编码后的 URI。

Javascript

const url = "https://www.google.com/search?q=geeks for geeks";
const encodedURL = encodeURI(url);
document.write(encodedURL)

输出：

https://www.google.com/search?q=geeks%20for%20geeks

encodeURIComponent()： encodeURIComponent()函数用于对URI 的某些部分或组成部分进行编码。该函数对特殊字符进行编码。此外，它还对以下字符进行编码： , / ? : @ & = + $ #

句法：

encodeURIComponent( uri_string_component )

参数：该函数接受单个参数uri_string_component，用于保存需要编码的字符串。

返回值：该函数返回编码后的字符串。

Javascript

const component = "geeks for geeks"
const encodedComponent = encodeURIComponent(component);
document.write(encodedComponent)

输出：

geeks%20for%20geeks

区别 encodeURIComponenet 和 encodeURI：

	encodeURIComponent	encodeURI
Definition	The encodeURIComponent() function is used to encode some parts or components of URI	The encodeURI() function is used to encode complete URI.
Syntax	encodeURIComponent( uri_string_component )	encodeURI( complete_uri_string )
Special Character Encoding	This function encodes the special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #	This function encode the special character except (, / ? : @ & = + $ #) characters.

2. escape()函数：该函数将字符串作为单个参数，对可以在支持ASCII字符的计算机网络上传输的字符串进行编码。编码是将纯文本转换为密文的过程。

句法：

escape( string )

参数：此函数接受单个参数：

返回值：返回一个编码的字符串。

注意： escape()函数只对特殊字符进行编码，此函数已弃用。

例外： @ - + 。 / * _

Javascript

const url = "https://www.google.com/search?q=geeks for geeks";
const encodedURL = encodeURI(url);// encoding using encodeURI
document.write(encodedURL)
document.write("<br>"+escape(url)); //encoding using escape
  

输出：

https://www.google.com/search?q=geeks%20for%20geeks
https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks

解码 URL：可以使用 Javascript 进行解码

• decodeURI()函数。
• unescape()函数。

1. decodeURI函数： decodeURI()函数用于对encodeURI()生成的URI进行解码。

句法：

decodeURI( complete_encoded_uri_string )

参数：此函数接受单个参数 complete_encoded_uri_string ，其中包含编码的字符串。

返回值：该函数返回解码后的字符串（原始字符串）。

示例：

Javascript

const url = "https://www.google.com/search?q=geeks%20for%20geeks";
const decodedURL = decodeURI(url);
document.write(decodedURL)

输出：

https://www.google.com/search?q=geeks for geeks

decodeURIComponent()

decodeURIComponent()函数用于对 encodeURIComponent() 生成的 URI 的某些部分或组件进行解码。

句法：

decodeURIComponent( encoded_uri_string_component )

参数：这个函数接受一个参数encoded_uri_string_component，它保存了编码的字符串。

返回值：此函数返回 URI字符串的解码组件。

示例：

Javascript

const component = "geeks%20for%20geeks"
const decodedComponent = decodeURIComponent(component);
document.write(decodedComponent)      

输出：

geeks for geeks

decodeURIComponent 和 decodeURI 的区别：

	decodeURIComponent	decodeURI
Definition	The decodeURIComponent() function is used to decode some parts or components of URI generated by encodeURIComponent().	Decoding in Javascript can be achieved using decodeURI function.
Syntax	decodeURIComponent( encoded_uri_string_component )	decodeURI( complete_encoded_uri_string )
Special Character Encoding	It takes encodeURIComponent(url) string so it can decode these characters.	It takes encodeURI(url) string so it cannot decoded characters (, / ? : @ & = + $ #)
Example	decodeURIComponent(“%41”) It returns “A” decodeURIComponent(“%26”): It returns “&”	decodeURI(“%41”): It returns “A” decodeURI(“%26”): It returns “%26”

2. unescape()函数：该函数将字符串作为单个参数，并使用它来解码由 escape()函数编码的字符串。字符串中的十六进制序列在通过 unescape()函数解码时被它们所代表的字符替换。

句法：

unescape(string)

参数：此函数接受单个参数：

• 字符串 ：此参数保存将被解码的字符串。

返回值：返回解码后的字符串。

注意：此函数仅解码特殊字符，此函数已弃用。

例外： @ - + 。 / * _

Javascript

const url = "https://www.google.com/search?q=geeks for geeks";
const encodedURL = encodeURI(url);
document.write(encodedURL)
document.write("<br>"+escape(url));
document.write("<br>"+decodeURI(encodedURL));
document.write("<br>"+unescape(encodedURL));

输出：

https://www.google.com/search?q=geeks%20for%20geeks
https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks
https://www.google.com/search?q=geeks for geeks
https://www.google.com/search?q=geeks for geeks