escape,encodeURI,encodeURIComponent有什么区别?

迷南。 2023-02-10 01:19 36阅读 0赞

首先，`escape/unescape` 已经废弃，应当避免使用。

>  *  The deprecated escape() method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use encodeURI or encodeURIComponent instead.
>  *  The deprecated unescape() method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like escape. Because unescape is deprecated, use decodeURI or decodeURIComponent instead.

根据 `MDN` 的说明，`escape` 应当换用为 `encodeURI` 或 `encodeURIComponent`；`unescape` 应当换用为 `decodeURI` 或 `decodeURIComponent`。

那么， `encodeURI/decodeURI` 与`encodeURIComponent/decodeURIComponent` 的区别是什么？

encodeURI会对`非ACSII`、数字以及`- _ . ! ~ * ' ( )`符号和URI分隔符`;/?:@&=+$,#`之外的所有字符进行转码。

encodeURI(“http://www.baidu.com/pa th/我的”)
    // http://www.baidu.com/pa%20th/%E6%88%91%E7%9A%84

`encodeURIComponent`与`encodeURI`的作用几乎相同，区别在与`encodeURIComponent`会对URI分隔符`；/？@$=+#`等进行转码。

encodeURIComponent(“http://www.baidu.com/pa th/我的”)
    // http%3A%2F%2Fwww.baidu.com%2Fpa%20th%2F%E6%88%91%E7%9A%84

### 一些场景 ###

1.  一般需要get请求的方式在地址栏中拼接一些参数，但是参数中如果出现`#，/,&`这些字符，就必须要用`decodeURIComponent`了，不然这些特殊字符会导致我们接收参数的错误
    
        // 传code=2020dba#abc 到 http://www.xxx.com
        var codeVal = encodeURI('2020dba#abc');
        var url = 'http://www.xxx.com?code=' + codeVal;
        console.log(url);
        // http://www.xxx.com?code=2020dba#abc
        
        // http://www.xxx.com接收参数
        console.log(location.search)  //"?code=2020dba";
    
    这时候拿到的code参数明显是错误的，被特殊字符\#截断了，下面用decodeURIComponent方法：
    
        var codeVal = encodeURI('2020dba#abc');
        var url = 'http://www.baidu.com?code=' + codeVal;
        console.log(url);
        // http://www.xxx.com?code=2020dba%23abc
        
        // http://www.xxx.com接收参数
        console.log(location.search)  //?code=2020dba%23abc;
        decodeURIComponent("?code=2020dba%23abc")  //"?code=2020dba#abc"
2.  进行url跳转时可以整体使用encodeURI
    
        Location.href=encodeURI("http://localhost:8007/user/login?code=%E4%B8%AD%E5%9B%BD%E4%BA%BA");

### Base64 转码 ###

以下摘自[阮一峰老师博客][Link 1]

有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。另一个场景是，有时需要以文本格式传递二进制数据，那么也可以使用 Base64 编码。

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、`+`和`/`这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。

JavaScript 原生提供两个 Base64 相关的方法。

*  `btoa()`：任意值转为 Base64 编码
 *  `atob()`：Base64 编码转为原来的值

var string = 'Hello World!';
    btoa(string) // "SGVsbG8gV29ybGQh"
    atob('SGVsbG8gV29ybGQh') // "Hello World!"

注意，这两个方法不适合非 ASCII 码的字符，会报错。

btoa('你好') // 报错

要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。

function b64Encode(str) { 
      return btoa(encodeURIComponent(str));
    }
    
    function b64Decode(str) { 
      return decodeURIComponent(atob(str));
    }
    
    b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
    b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

### 总结 ###

encodeURI 和 encodeURIComponent 的区别在于需要转义的字符范围不一样：

`encodeURI`不编码字符有82个：`!` `'` `(` `)` `*` `-` `.` `_` `~` `0-9` `a-z` `A-Z` 和 URI分隔符`/` `:` `;` `=` `?` `@` `#` `$` `&` `+` `,`。

`encodeURIComponent`不编码字符有71个（不包括URL分隔符）：`!` `'` `(` `)` `*` `-` `.` `_` `~` `0-9` `a-z` `A-Z`

`encodeURI`和`encodeURIComponent`的编码方式都是相同的，先将中文等需要编码的字符进行进行`utf-8`编码，然后在 UTF-8 的每个字节码前加上一个 「%」的，所以如果给后台传递参数需要使用`encodeURIComponent`时需要后台解码对`utf-8`支持（`form`中的编码方式和当前页面编码方式相同）

实际使用上，**encodeURI**和**encodeURIComponent**的区别在于前者被设计来用于对完整URL进行URL Encode，于是URL中的功能字符，比如&, ?, /, =等等这些并不会被转义；而后者被设计来对一个URL中的值进行转义，会把这些功能字符也进行转义。

由此可知，前端开发中用到比较多的应该是 `encodeURIComponent/decodeURIComponent`。例如下面这个将 `URL Search` 中的参数转化为对象的方法：

### 参考 ###

[https://www.cnblogs.com/jhxk/articles/1634359.html][https_www.cnblogs.com_jhxk_articles_1634359.html]

[https://zaozaool.github.io/2015/10/01/JavaScript学习笔记之-encodeURI-encodeURIComponent-escape-decodeURI-decodeURIComponent-unescape区别/][https_zaozaool.github.io_2015_10_01_JavaScript_-encodeURI-encodeURIComponent-escape-decodeURI-decodeURIComponent-unescape]

[https://www.zhihu.com/question/21861899][https_www.zhihu.com_question_21861899]

[https://javascript.ruanyifeng.com/grammar/string.html\#toc6][Link 1]

[Link 1]: https://javascript.ruanyifeng.com/grammar/string.html#toc6
[https_www.cnblogs.com_jhxk_articles_1634359.html]: https://www.cnblogs.com/jhxk/articles/1634359.html
[https_zaozaool.github.io_2015_10_01_JavaScript_-encodeURI-encodeURIComponent-escape-decodeURI-decodeURIComponent-unescape]: https://zaozaool.github.io/2015/10/01/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E4%B9%8B-encodeURI-encodeURIComponent-escape-decodeURI-decodeURIComponent-unescape%E5%8C%BA%E5%88%AB/
[https_www.zhihu.com_question_21861899]: https://www.zhihu.com/question/21861899