JavaScript | encodeURI()、decodeURI() 及其组件函数

编码和解码 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 提供以下函数来执行此任务：

编码URI()

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

句法：

encodeURI( complete_uri_string )

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

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

例子：

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

编码URIComponent()

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

句法：

encodeURIComponent( uri_string_component )

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

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

例子：

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

输出：

geeks%20for%20geeks

解码URI()

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

句法：

decodeURI( complete_encoded_uri_string )

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

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

例子：

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字符串的解码部分。

例子：

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

输出：

geeks for geeks

应用：

• 正确转换提供给 API 的空格分隔查询参数。
• 在网络抓取中解码 URL 的查询参数以提取人类可读的字符串。