JavaScript 中使用 escape、encodeURI、encodeURIComponent 编码解码

1、函数出现时间

escape() javascript 1.0
encodeURI() javascript 1.5
encodeURIComponent() javascript 1.5

2、函数功能介绍

（1）escape()

• 功能：将字符串转换为一种以 %xx 格式表示的编码形式，使用 ISO Latin 字符集。它会将大部分特殊字符、标点符号和非 ASCII 字符编码为 %xx 形式。
• 不编码的字符：这些字符包括 *、+、-、.、/、@、_ 以及所有的数字和字母（0-9、a-z、A-Z）。
• 反向编码函数：unescape()，但请注意，escape() 和 unescape() 方法已经被废弃，不推荐使用，因为它们无法正确处理所有字符。

（2）encodeURI()

• 功能：用于编码整个 URI，将字符串转换为适合在 URI 中传输的形式，使用 UTF-8 编码。它不会对 URI 中的保留字符进行编码。
• 不编码的字符：这些字符包括 !、#、$、&、'、(、)、*、,、-、.、/、:、;、=、?、@、_、~ 以及所有的数字和字母（0-9、a-z、A-Z）。因为这些字符在 URI 中有特殊含义，不需要被编码。
• 反向编码函数：decodeURI()。

（3）encodeURIComponent()

• 功能：用于编码 URI 中的组成部分，将字符串转换为适合在 URI 中传输的形式，使用 UTF-8 编码。与 encodeURI() 不同，它会对 URI 中的更多字符进行编码，包括 URI 中的一些特殊字符。
• 不编码的字符：这些字符包括 !、'、(、)、*、-、.、_、~ 以及所有的数字和字母（0-9、a-z、A-Z）。
• 反向编码函数：decodeURIComponent()。

总之，对于 URI 编码，应优先选择 encodeURIComponent()，因为它能够正确处理更多的特殊字符，并确保整个 URI 都得到正确的编码。

3、测试demo

var url = "http://localhost:8080/pro?a=1&b=张三&c=aaa";
var url1 = escape(url);
http%3A//localhost%3A8080/pro%3Fa%3D1%26b%3D%u5F20%u4E09%26c%3Daaa         

var url2 = encodeURI(url);
http://localhost:8080/pro?a=1&b=%E5%BC%A0%E4%B8%89&c=aaa   

var url3 = encodeURIComponent(url);
http%3A%2F%2Flocalhost%3A8080%2Fpro%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26c%3Daaa   

var vurl2 = unescape(url2);
http://localhost:8080/pro?a=1&b=张三&c=aaa

var vurl3 = decodeURI(url3);
http://localhost:8080/pro?a=1&b=张三&c=aaa

var vurl1 = decodeURIComponent(url1);
http://localhost:8080/pro?a=1&b=张三&c=aaa     

4、使用场景

（1）escape()

用于js对字符串进行编码，不常用。

（2）encodeURI()

用于整个url跳转。

比如：

// 转化前
location.href = "http://localhost:8080/pro?a=1&b=张三&c=aaa";
// 转化后
location.href = "http://localhost:8080/pro?a=1&b=%E5%BC%A0%E4%B8%89&c=aaa"

本例中只是将中文转成%...，传过去再解码就可以拿到中文

（3）encodeURIComponent()

用于参数的传递，参数包含特殊字符可能会造成间断。

比如：

var paramUrl = "http://localhost:8080/aa?a=1&b=2&c=3";
var url = "http://localhost:8080/pp?a=1&b="+ paramUrl ;

应该使用encodeURIComponent()进行转码，

结果：
http://localhost:8080/pp?a=1&b=http%3A%2F%2Flocalhost%3A8080%2Faa%3Fa%3D1%26b%3D2%23%26c%3D3