js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent

1. encodeURI与encodeURIComponent

encodeURI和encodeURIComponent都是用于对 url 进行编码的方法，它们可以将字符串编码为 URI（Uniform Resource Identifier, 统一资源标示符）格式，使其具有以下特点：
- 可以在所有计算机和网络设备上使用
- 能够进行全球化字符集的支持（包括的字符范围比 escape() 更广泛）
- 其输出具有优美的可读性

下面是两个示例：

1.1 encodeURI的示例

let url = "https://www.baidu.com/s?wd=" + encodeURI("JavaScript 教程");
console.log(url);
// 输出：https://www.baidu.com/s?wd=JavaScript%20%E6%95%99%E7%A8%8B

在这个示例中，我们使用了 encodeURI 对字符串 "JavaScript 教程" 进行了编码，用于构造百度搜索的 URL。

1.2 encodeURIComponent的示例

let url = "https://www.baidu.com/s?wd=" + encodeURIComponent("JavaScript 教程");
console.log(url);
// 输出：https://www.baidu.com/s?wd=JavaScript%20%E6%95%99%E7%A8%8B

在这个示例中，我们同样是构造百度搜索的 URL，但是使用了 encodeURIComponent 进行编码。与 encodeURI 不同的是，encodeURIComponent 会对更多字符进行编码，因为它是在 URL 参数中使用的。

2. decodeURI与decodeURIComponent

decodeURI和decodeURIComponent用于解码 URL 编码后的字符串，将其转化为原来的字符串。例如，将 %20 解码为空格。

下面是两个示例：

2.1 decodeURI的示例

let str = decodeURI("https://www.baidu.com/s?wd=JavaScript%20%E6%95%99%E7%A8%8B");
console.log(str);
// 输出：https://www.baidu.com/s?wd=JavaScript 教程

在这个示例中，我们使用了 decodeURI 对字符串 "https://www.baidu.com/s?wd=JavaScript%20%E6%95%99%E7%A8%8B" 进行了解码，并得到了原来的字符串 "https://www.baidu.com/s?wd=JavaScript 教程"。

2.2 decodeURIComponent的示例

let str = decodeURIComponent("https%3A%2F%2Fwww.baidu.com%2Fs%3Fwd%3DJavaScript%2520%25E6%2595%2599%25E7%25A8%258B");
console.log(str);
// 输出：https://www.baidu.com/s?wd=JavaScript 教程

在这个示例中，我们同样是将编码后的字符串解码为原来的字符串。与 decodeURI 不同的是，decodeURIComponent 对更多字符进行解码，包括 URL 参数中的特殊字符，如 %3A 表示冒号，%2F 表示斜杠。