JavaScript 如何进行URL编码和解码

URI的编码和解码 在Web开发中是一个常见的任务，特别是在使用查询参数进行GET请求API时。很多时候需要构建一个带有查询参数的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编码：

• encodeURI函数
• escape()

JavaScript encodeURI函数：

encodeURI()函数用于对整个URI进行编码。该函数会对特殊字符进行编码，除了( ) , / ? : @ & = + $ #这些字符之外。

语法：

encodeURI( complete_uri_string )

Javascript

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

输出：

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

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

语法：

encodeURIComponent( uri_string_component )

输出：

geeks%20for%20geeks

encodeURIComponenet和encodeURI的区别：

JavaScript escape() 函数：此函数接受一个字符串作为参数，并对该字符串进行编码，以便在支持ASCII字符的计算机网络上传输。编码是将明文转换为密文的过程。

语法：

escape( string )

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

例外情况： @ – + . / * _

Javascript

const url = "https://www.google.com/search?q=geeks for geeks";
const encodedURL = encodeURI(url);// encoding using encodeURI
console.log(encodedURL)
console.log("<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()函数。

Javascript decodeURI() 函数：

decodeURI()函数用于解码由encodeURI()生成的URI。

语法：

decodeURI( complete_encoded_uri_string )

示例 : 这个示例描述了 decodeURI() 函数 的 Javascript 。

Javascript

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

输出：

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

JavaScript decodeURIComponent() 函数：decodeURIComponent() 函数用于解码由 encodeURIComponent() 生成的 URI 的某些部分或组件。

语法：

decodeURIComponent( encoded_uri_string_component )

示例 ：这个示例描述了Javascript中的decodeURIComponent()方法。

Javascript

const component = "geeks%20for%20geeks"
const decodedComponent = decodeURIComponent(component);
console.log(decodedComponent)

输出：

geeks for geeks

decodeURIComponent 和 decodeURI 的区别：

JavaScript unescape()函数****： 这个函数接受一个字符串作为单个参数，并用它来解码通过escape()函数编码的字符串。当通过unescape()函数解码时，字符串中的十六进制序列将被替换为它们所代表的字符。

语法：

unescape(string)

注意： 该函数只对特殊字符进行解码，该函数已被弃用。

异常： @ – + . / * _

Javascript

<script>
    const url = "https://www.google.com/search?q=geeks for geeks";
    const encodedURL = encodeURI(url);
    console.log(encodedURL)
    console.log(escape(url));
    console.log(decodeURI(encodedURL));
    console.log(unescape(encodedURL));
</script>

输出：

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