浅谈escape、encodeURI、encodeURIComponent的区别

现在开发都是使用流行的框架(比如:jQuery,angular等),很少用到原生的 XMLHttpRequest() 或 ActiveXObject(“Microsoft.XMLHTTP”)了。最近写跨域的 JSONP请求,发现网上竟然还没有 POST 提交的方法(正常下是不可能的,因为JSONP是通过在网页中插入 script的 element实现的)。可以 通过 内嵌 iframe的方式,post 上传数据。请求完成时,iframe的onload事件再去调用 JSONP 即可完成 曲线的 JSONP post方式提交数据。对于中文编码的问题,使用了encodeURIComponent。之前前辈告诫转码只用encodeURIComponent就可以了,escape转码后,提交的哦服务器端是乱码的。escape、encodeURI、encodeURIComponent这三个函数的区别一直不是很了解,看文字头都大了。实际做个简单的实验,还是可以很容易看出他们三个的区别的。

//编码
str = "miao://qiyuan/.cn?query=A&data=中文 Hello&message=HAHA+"
//"miao://qiyuan/.cn?query=A&data=中文 Hello&message=HAHA+"
escape(str)
//"miao%3A//qiyuan/.cn%3Fquery%3DA%26data%3D%u4E2D%u6587%20Hello%26message%3DHAHA+"
encodeURI(str)
//"miao://qiyuan/.cn?query=A&data=%E4%B8%AD%E6%96%87%20Hello&message=HAHA+"
encodeURIComponent(str)
//"miao%3A%2F%2Fqiyuan%2F.cn%3Fquery%3DA%26data%3D%E4%B8%AD%E6%96%87%20Hello%26message%3DHAHA%2B"


//解码:encodeURI
str2 = encodeURI(str)
//"miao://qiyuan/.cn?query=A&data=%E4%B8%AD%E6%96%87%20Hello&message=HAHA+"
decodeURI(str2)
//"miao://qiyuan/.cn?query=A&data=中文 Hello&message=HAHA+"
decodeURIComponent(str2)
//"miao://qiyuan/.cn?query=A&data=中文 Hello&message=HAHA+"
unescape(str2)
//"miao://qiyuan/.cn?query=A&data=中文 Hello&message=HAHA+"

//解码:encodeURIComponent
str2 = encodeURIComponent(str)
//"miao%3A%2F%2Fqiyuan%2F.cn%3Fquery%3DA%26data%3D%E4%B8%AD%E6%96%87%20Hello%26message%3DHAHA%2B"
decodeURI(str2)
//"miao%3A%2F%2Fqiyuan%2F.cn%3Fquery%3DA%26data%3D中文 Hello%26message%3DHAHA%2B"
decodeURIComponent(str2)
//"miao://qiyuan/.cn?query=A&data=中文 Hello&message=HAHA+"
unescape(str2)
//"miao://qiyuan/.cn?query=A&data=中文 Hello&message=HAHA+"

//解码:escape
str2 = escape(str)
//"miao%3A//qiyuan/.cn%3Fquery%3DA%26data%3D%u4E2D%u6587%20Hello%26message%3DHAHA+"
decodeURI(str2)
//异常: Uncaught URIError: URI malformed(…)
decodeURIComponent(str2)
//异常: Uncaught URIError: URI malformed(…)
unescape(str2)
//"miao://qiyuan/.cn?query=A&data=中文 Hello&message=HAHA+"

注意:decodeURI不是只能编码 URI 格式的数据

str = "猫七=苗+启源"
//"猫七=苗+启源"

//encodeURIComponent
str2 = encodeURIComponent(str)
//"%E7%8C%AB%E4%B8%83%3D%E8%8B%97%2B%E5%90%AF%E6%BA%90"
decodeURI(str2)
//"猫七%3D苗%2B启源"
decodeURIComponent(str2)
//"猫七=苗+启源"

//encodeURI
str2 = encodeURI(str)
//"%E7%8C%AB%E4%B8%83=%E8%8B%97+%E5%90%AF%E6%BA%90"
decodeURI(str2)
//"猫七=苗+启源"
decodeURIComponent(str2)
//"猫七=苗+启源"

escape(string)函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
返回值:已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。
说明:该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: – _ . ! ~ * ‘ ( ) 。其他所有的字符都会被转义序列替换。

encodeURI(URIstring) 函数可把字符串作为 URI 进行编码。
返回值:URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。
说明:该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: – _ . ! ~ * ‘ ( ) 。
备注:该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#

encodeURIComponent(URIstring)
返回值:URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。
说明:该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: – _ . ! ~ * ‘ ( ) 。
备注:其他字符(比如 :;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注