javascript编码与解码: en(de)codeURI、en(de)codeURIComponent、(un)escape、btoa(atob)

1.背景

在电脑术语中，统一资源标识符（Uniform Resource Identifier，或URI)是一个用于标识某一互联网资源名称的字符串。 该种标识允许用户对网络中（一般指万维网）的资源通过特定的协议进行交互操作。URI由包括确定语法和相关协议的方案所定义。

统一资源定位符（或称统一资源定位器/定位地址、URL地址等，英语：Uniform / Universal Resource Locator，常缩写为URL），有时也被俗称为网页地址。如同在网络上的门牌，是因特网上标准的资源的地址（Address）

URL是一种具体的URI，它是URI的一个子集，它不仅唯一标识资源，而且还提供了定位该资源的信息。URI 是一种语义上的抽象概念，可以是绝对的，也可以是相对的，而URL则必须提供足够的信息来定位，是绝对的。 
网页的 URL 只能包含合法的字符。合法字符分成两类。

• URL 元字符：分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）
• 语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（'），圆括号（()）

除了以上字符，其他字符出现在 URL 之中都必须转义，规则是根据操作系统的默认编码，将每个字节转为百分号（%）加上两个大写的十六进制字母。

比如，UTF-8 的操作系统上，https://www.baidu.com/s?ie=UTF-8&wd=中国这个 URL 之中，汉字“中国”不是 URL 的合法字符，所以被浏览器自动转成https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD。“中”转成了%E4%B8%AD，“国” 转成了 %E5%9B%BD。这是因为“中”和“国”的 UTF-8 编码分别是E4 B8 AD和E5 9B BD，将每个字节前面加上百分号，就构成了 URL 编码。

2.encodeURI 和 encodeURIComponent

encodeURI()方法用于转码整个 URL。它的参数是一个字符串，代表整个 URL。它会将元字符和语义字符之外的字符，都进行转义。示例如下：

 
encodeURI("http://cfz.me?username=hello @风筝");
// "http://cfz.me?username=hello%20@%E9%A3%8E%E7%AD%9D"

encodeURIComponent( )方法用于转码 URL 的组成部分，会转码除了语义字符之外的所有字符，即元字符也会被转码。所以，它不能用于转码整个 URL。它接受一个参数，就是 URL 的片段。示例如下：

// 对URL中的特殊编码字符部分进行转码
'https://www.baidu.com/s?ie=UTF-8&wd='+encodeURIComponent('风筝')
//"https://www.baidu.com/s?ie=UTF-8&wd=%E9%A3%8E%E7%AD%9D"

// 对URL中的回调链接进行转码
'https://www.baidu.com/s?returnURL=' +encodeURIComponent('http://www.test.com/')
//"https://www.baidu.com/s?returnURL=http%3A%2F%2Fwww.test.com%2F"

 注：encodeURI和encodeURIComponent 的区别

它们都是编码URL，唯一区别就是编码的字符范围，其中

encodeURI方法不会对下列字符编码 ASCII字母 数字 ~!@#$&*()=:/,;?+'

encodeURIComponent方法不会对下列字符编码 ASCII字母 数字 ~!*()'

如果用encodeURIComponent 方法转码整个URL 会导致encodeURIComponent()转码过后的URL无法直接访问；所以encodeURIComponent()一般用于转码URL的部分参数；

​编码URL中的参数的时候，使用encodeURIComponent。

let param = "http://www.cnblogs.com/ym-kite/"; //param为参数
param = encodeURIComponent(param);
const url = "http://www.cnblogs.com?next=" + param;
// http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fym-kite%2F

2. decodeURI 和 decodeURIComponent

decodeURI()、decodeURIComponent()用于URL 片段的解码。它们分别是encodeURI()、encodeURIComponent()方法的逆运算，两个解码方法只接受一个入参，就是转码后的字符串；示例如下：

例如： 

//decodeURI
decodeURI("https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD")
//输出: https://www.baidu.com/s?ie=UTF-8&wd=中国

//decodeURIComponent
decodeURIComponent("http%3A%2F%2Fwww.test.com%2F")
//输出:"http://www.test.com/"

3.escape 和 unescape

escape 与 encodeURI 和 encodeURIComponent 类似，都是对字符串进行编码。不同点在于该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号（即： * @ - _ + . / ）进行编码，其他所有的字符都会被转义序列替换。

 
encodeURI("hello @风筝");// 编码了空格、中文
// "hello%20@%E9%A3%8E%E7%AD%9D" 

console.log(encodeURIComponent("hello @风筝")); // 编码了空格、@符合以及中文
// hello%20@%u98CE%u7B5D

console.log(escape("hello @风筝"));// 编码了空格、@符合以及中文
// hello%20@%u98CE%u7B5D

如上，encodeURI 和 encodeURIComponent 的编码结果几乎是一致的，但 escape 的中文编码却大相径庭。unescape 是 escape 的反函数，作用是用于解码 escape 编码后的字符串。

4.btoa 和 atob 

btoa：将ascii字符串或二进制数据转换成一个base64编码过的字符串，该方法不能直接作用于Unicode字符串。

atob：将已经被base64编码过的数据进行解码。

注意：因为btoa仅将ascii字符串或二进制数据进行编码，不能作用于unicode字符串，所以对中文的base64编码会报错：

 
btoa("hello @风筝");
// InvalidCharacterError: 'btoa' failed: The string to be encoded contains characters outside of the Latin1 range.

如果要对中文进行base64编码，只需要将中文进行 encodeURIComponent 进行编码之后再进行 base64编码即可。

 
btoa(encodeURIComponent("hello @云淡然"));
// "aGVsbG8lMjAlNDAlRTQlQkElOTElRTYlQjclQTElRTclODQlQjY="

完整的utf8编码字符串进行base64编码示例：

 
// 完整的utf8字符串base64编码与解码 
function uft8ToBase64(utf8) {	
    return btoa(encodeURIComponent(utf8));
} 
function base64ToUtf8(base64) {	
    return decodeURIComponent(atob(base64));
} 
var base64 = uft8ToBase64("hello @云淡然");
// "aGVsbG8lMjAlNDAlRTQlQkElOTElRTYlQjclQTElRTclODQlQjY=" 

base64ToUtf8(base64);
// "hello @云淡然"

应用场景：

/** 记录当前搜索参数到url中 */
   const keepParams = (params: CommonSearchParams) => {
      const data = {
        type: isSimple.value ? 'simple' : 'advanced',
        params,
        total: totalNum.value,
      };
      lockWatch = true;
      router.replace({
        name: 'home',
        query: {
        // 先转为json字符串，再转为base64；注意：btoa不支持直接编码中文字符，先encode中文
        data: btoa(encodeURIComponent(JSON.stringify(data))), 
        },
      }).finally(() => {
        nextTick(() => {
          lockWatch = false;
        });
      });
    };