encodeURI、encodeURIComponent、decodeURI 、 decodeURIComponent、escape 和 unescape对字符串进行URI编码和解码，也为转义-详解

?

以下内容摘录自,并对部分原作者的代码进行了修正

作者：JSON_NULL
链接：https://www.jianshu.com/p/b2c6dc5fad0a

感谢作者，讲的真的很透

我们先来介绍一下encodeURI、encodeURIComponent、decodeURI 和 decodeURIComponent这四个方法。它们是对字符串进行URI编码和解码的，也称之为转义。下面分别对他们进行介绍。

encodeURI 方法

下面是引用了w3cshool网站上对?encodeURI?方法的介绍

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
该方法的目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,#?

?除上述介绍中明确说明不会被转义的字符外，URI中所有其他字符（如中文字符等）都会被转义。请看下面的代码段：

encodeURI("http://www.csdn.net/?name=橙-极纪元JJY.Cheng");

'http://www.csdn.net/?name=%E6%A9%99-%E6%9E%81%E7%BA%AA%E5%85%83JJY.Cheng'

encodeURIComponent 方法

还是引用w3cshool网站上对上的介绍

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。?

除上述介绍中明确说明不会被转义的字符外，URI中所有其他字符（如中文字符和ASCII的“;/?:@&=+$,# ”等）都会被转义。请看下面的代码段：

encodeURIComponent("http://www.csdn.net/?name=橙-极纪元JJY.Cheng");

'http%3A%2F%2Fwww.csdn.net%2F%3Fname%3D%E6%A9%99-%E6%9E%81%E7%BA%AA%E5%85%83JJY.Cheng'

通过比较我们会发现 encodeURIComponent 与 encodeURI 相比，多转换了在URI中具有特殊含义的字符：“;/?:@&=+$,#”。

decodeURI 和 decodeURIComponent

通过名字我们就能知道 decodeURI 是 encodeURI的逆过程，而 decodeURIComponent 是 encodeURIComponent 的逆过程，在这里就不多做介绍了，请看下面的代码段;?

?

encodeURI("http://www.csdn.net/?name=橙-极纪元JJY.Cheng")
//'http://www.csdn.net/?name=%E6%A9%99-%E6%9E%81%E7%BA%AA%E5%85%83JJY.Cheng'

decodeURI('http://www.csdn.net/?name=%E6%A9%99-%E6%9E%81%E7%BA%AA%E5%85%83JJY.Cheng')
//'http://www.csdn.net/?name=橙-极纪元JJY.Cheng'



encodeURIComponent("http://www.csdn.net/?name=橙-极纪元JJY.Cheng")
//'http%3A%2F%2Fwww.csdn.net%2F%3Fname%3D%E6%A9%99-%E6%9E%81%E7%BA%AA%E5%85%83JJY.Cheng'

decodeURIComponent('http%3A%2F%2Fwww.csdn.net%2F%3Fname%3D%E6%A9%99-%E6%9E%81%E7%BA%AA%E5%85%83JJY.Cheng')
//'http://www.csdn.net/?name=橙-极纪元JJY.Cheng'

转义规则

其实转义的规则是把字符的utf-8编码以十六进制显示，并在每个字节(8bits=2个十六进制位)前加字符‘%’。有兴趣的同学可以亲自去验证一下。

如上：

【橙-极纪元】

等于

【%E6%A9%99-%E6%9E%81%E7%BA%AA%E5%85%83】

escape 和 unescape

escape 方法

引用W3CSchool上面的介绍

该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。

escape?方法接受一个字符串(是字符串，不是二进制串)，他会根据字符编码占用的字节数不同而使用不同的方式显示编码。看下面的例子：

escape("http://www.csdn.net/?name=橙-极纪元JJY.Cheng")
//'http%3A//www.csdn.net/%3Fname%3D%u6A59-%u6781%u7EAA%u5143JJY.Cheng'

看出什么门道没？没看明白也没关系，下面我来解释一下：
其实 escape 的眼里所有字符都是Unicode编码的， 如果遇到的字符Unicode编码只占一个字节（其实就是Latin1字符集部分，[在这里说明一下，Unicode 字符集是 Latin1字符集的超集]），就以 "%"+Unicode编码值的十六进制表示来编码。如“:”被编码成“%3A”。如果遇到的字符Unicode编码占两个字节，就以"%u"+Unicode编码的十六进制表示来编码。如“仵”被编码成“%u4EF5”，有兴趣的同学可以亲自去查Unicode编码表来验证。关于占三四个字节的情况在此就不在讨论了，有兴趣的同学可以自己去深挖一下，挖出宝贝记得要跟我分享啊，哈哈……。

unescape 方法

unescape 方法执行的操作正是 escape 方法的逆过程，他会把所有“%XX”（XX是两位十六进制值）转换到Unicode中一字节能表示的部分(其实就是Latin1字符集中的字符)。unescape 函数是一个顶级 JavaScript 函数，并不与任何对象关联。

escape("http://www.csdn.net/?name=橙-极纪元JJY.Cheng")
//'http%3A//www.csdn.net/%3Fname%3D%u6A59-%u6781%u7EAA%u5143JJY.Cheng'

unescape('http%3A//www.csdn.net/%3Fname%3D%u6A59-%u6781%u7EAA%u5143JJY.Cheng')
//'http://www.csdn.net/?name=橙-极纪元JJY.Cheng'

---

延伸阅读

js对url和字符串,解码,编码,解密,加密_js url解密插件-CSDN博客

c#对js的encodeURI() 编码 decodeURI()解码 escape() 编码unescape()解码，decodeURIComponent() ,encodeURICompon加密解密_c# encodeuricomponent-CSDN博客

c# 解码 js的escape_c# escape-CSDN博客

?