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

介绍

在网络传输中，URL 是经常被使用到的。URL 包含了很多特殊字符，例如：“:”、“/”、“?”、“#”、“[”、“]”、“@”、“!”、“$”、“&”、“’”、“(”、“)”、“*”、“+”、“,”、“;”、“=”、“%”、“{}”、“|”、“^”、“~”、“\”。

如果 URL 中包含了任何一个特殊字符，那么浏览器都会对其进行编码。编码后的 URL 能够保证在网络传输中不会出现问题。

那么如何在 JavaScript 中对 URL 进行编码和解码呢？接下来会介绍两种方法。

方法一：使用 encodeURI 和 decodeURI 函数

在 JavaScript 中，可以使用 encodeURI 和 decodeURI 函数对 URL 进行编码和解码。

• encodeURI

var url = "https://www.google.com/search?q=JavaScript编码";
var encodedURL = encodeURI(url);

console.log(encodedURL);
// "https://www.google.com/search?q=JavaScript%E7%BC%96%E7%A0%81"

• decodeURI

var encodedURL = "https://www.google.com/search?q=JavaScript%E7%BC%96%E7%A0%81";
var url = decodeURI(encodedURL);

console.log(url);
// "https://www.google.com/search?q=JavaScript编码"

需要注意的是，encodeURI 函数不会对 URL 中的特殊字符“/”、“?”、“#”、“&” 进行编码。如果需要对这些字符进行编码，可以使用 encodeURIComponent 函数。

方法二：使用 URLSearchParams 对象

在 ES6 中，JavaScript 提供了 URLSearchParams 对象，可以方便地对 URL 进行编码和解码。

• URLSearchParams 对象的使用

var params = new URLSearchParams("?q=JavaScript编码");

console.log(params.get("q"));
// "JavaScript编码"

• URLSearchParams 对象的编码和解码

var params = new URLSearchParams("?q=JavaScript编码");
var encodedParams = params.toString();

console.log(encodedParams);
// "q=JavaScript%E7%BC%96%E7%A0%81"

var decodedParams = decodeURIComponent(encodedParams);

console.log(decodedParams);
// "q=JavaScript编码"

需要注意的是，URLSearchParams 对象只能对查询字符串进行编码和解码。如果需要对整个 URL 进行编码和解码，则需要结合其他方法进行使用。

总结

本文介绍了两种方法，使用 encodeURI 和 decodeURI 函数以及使用 URLSearchParams 对象对 URL 进行编码和解码。需要注意的是，编码和解码的方法根据实际情况选择，例如 URLSearchParams 对象只能对查询字符串进行编码和解码。

参考文献：

• MDN 编解码URI
• MDN URLSearchParams