首页 » 前端开发 » 正文

encodeURI与encodeURIComponent的区别

encodeURIencodeURIComponent 都是用来进行URI编码的,对应的解码函数是decodeURIComponentdecodeURI。简单来说,encodeURIencodeURIComponent少做一些变化,即encodeURI对冒号(:)、正斜杠(/)、问号(?)和井号(#)不进行处理。具体情况请往下阅读:

encodeURIencodeURIComponent

两个方法都是对URI进行编码,以便发送给浏览器。有效的URI中不能包含某些字符,例如空格。而这个两个URI编码方法就可以对URI进行编码,他们用特殊的UTF-8编码替换所有无效的字符。如前文所述,encodeURI对冒号(:)、正斜杠(/)、问号(?)和井号(#)不进行处理,而encodeURIComponent会进行处理。来看例子:

var url = "http://www.Not a URL.com/illegal value.html#start";

//输出 http://www.Not%20a%20URL.com/illegal%20value.html#start
alert(encodeURI (url));

//输出 http%3A%2F%2Fwww.Not%20a%20URL.com%2Fillegal%20value.html%23start
alert(encodeURIComponent(url)); 

可以看到encodeURI 对于冒号、正斜杠、井号和问号都不进行处理,而encodeURIComponent都进行了处理。一般来说,我们使用encodeURIComponent方法比encodeURI更多,因为在实践中更常见的是对查询字符串参数而不是对基础的URI进行编码。[1]

decodeURIComponent和decodeURI

与encode对应的是decode,所以有decodeURIComponentdecodeURI函数。如果将encodeURI的结果传递给 decodeURI,则将返回原始字符串;同理,将encodeURIComponent的结果传递给decodeURIComponent,也会返回原始字符串。如下例子展示了其中一个情况:

var uriEncode = encodeURIComponent ("http://www.Not a URL.com");
var uriDecode = decodeURIComponent(uriEncode);
alert(uriEncode);  // 输出:http%3A%2F%2Fwww.Not%20a%20URL.com
alert(uriDecode); //  输出:http://www.Not a URL.com

关于URI

通用资源标识符(Uniform Resource Identifier, 简称”URI”)。URI一般由三部分组成:一、主机名;二、标志符;三、相对URI。更多详情请阅读参考资料[4]

最后需要了解的是,URI中对于以下字符不会进行转义:

26个字母、10个数字和字符-(减号),字符.(点号)和字符~(波浪号,键盘中1左边,点住shift出来的符号),这些字符不会在encodeURIencodeURIComponent中被转义。具体原因请阅读参考资料[5]

参考资料

[1] 《JavaScript高级程序设计(第2版)》 第5章7小结 P109
[2] MSDN-encodeURI 函数 (JavaScript)
[3] MSDN-encodeURIComponent 函数 (JavaScript)
[4] 百度百科-URI
[5] DOC88-URI中的字符

发表评论