JavaScript使用escape()、encodeURI()和decodeURI()实现URI编码解码

JavaScript使用escape()、encodeURI()和decodeURI()实现URI编码解码

URI是统一资源标识符，URI包含了绝对URI和相对URI两种方式。其中，绝对URI包含协议、主机名、文件名和查询参数，而相对URI只需要相对于当前文件所属的路径进行命名即可。

URI编码就是为了解决URI含有特殊字符而无法被正确显示、传递和处理的问题。在JavaScript中，我们可以使用三个函数来实现URI编码解码，分别是：escape()、encodeURI()和decodeURI()。

escape()

escape()函数可以将字符串中的非ASCII码字符和一些特殊字符（如空格、+、-、/、;等）转换成十六进制编码，以便于在URI中正常传输和显示。

示例代码：

var str = "Hello, 世界!";
var encoded = escape(str);
console.log(encoded); // "Hello%2C%20%E4%B8%96%E7%95%8C%21"

在上面的代码中，使用escape()函数将字符串中的中文和空格编码成了URI格式。其中，逗号和叹号等非特殊字符并没有被编码。

encodeURI()

encodeURI()函数则是更智能的URI编码函数，它只对URI不合法的字符进行编码，不会对协议名、主机名、路径和查询参数中的特殊字符进行编码。

示例代码：

var uri = "http://www.example.com/路径/文件名.html?参数=值#哈希值";
var encoded = encodeURI(uri);
console.log(encoded); // "http://www.example.com/%E8%B7%AF%E5%BE%84/%E6%96%87%E4%BB%B6%E5%90%8D.html?%E5%8F%82%E6%95%B0=%E5%80%BC#%E5%93%88%E5%B8%8C%E5%80%BC"

在上面的代码中，使用encodeURI()函数对一个URI进行了智能编码。可以注意到，只有路径中的中文和特殊字符被编码，其他的部分并没有被编码。

decodeURI()

decodeURI()函数则用于将URI中的编码字符串进行解码还原成原始字符串。

示例代码：

var encoded = "http://www.example.com/%E8%B7%AF%E5%BE%84/%E6%96%87%E4%BB%B6%E5%90%8D.html?%E5%8F%82%E6%95%B0=%E5%80%BC#%E5%93%88%E5%B8%8C%E5%80%BC";
var decoded = decodeURI(encoded);
console.log(decoded); // "http://www.example.com/路径/文件名.html?参数=值#哈希值"

在上面的代码中，使用decodeURI()函数将编码后的URI字符串还原成了原始字符串。

总结来看，escape()函数可以将所有字符编码，但是对于URI而言，它并不智能，会把很多有效的字符都编码，导致URI过长而不便传输和阅读。而encodeURI()函数则是智能编码，只对URI不合法的字符进行编码，更加适合处理URI编码的问题。最后，使用decodeURI()函数可以对编码后的URI字符串进行还原，还原成原始字符串。