encodeURI和encodeURIComponent的区别

一、区别：

encodeURI是对url中的查询字符串部分进行转义

encodeURIComponent对整个url进行转义，包括空格、英文冒号、斜杠等

至于decodeURI和decodeURIComponent，只要知道decodeURI和encodeURI是互逆操作，decodeURIComponent和encodeURIComponent是互逆操作就可以了

二、应用：

1.如果是简单的http地址，如 http://www.w3school.com.cn/My first/?uname=张三&pwd=123456，使用encodeURI编码就行，这样浏览器拿到编码（utf8）后的地址就能正常打开页面（现在大多数浏览器都会自动进行编码，ie11还不行）

2.如果是比较复杂的http地址，如 http://www.w3school.com.cn/My first/?newUrl=http地址

需要通过url传地址，然后跳转到新的地址，那这个要传递的地址（http地址）需要使用encodeURIComponent进行编码

应用场景

1、如果只是编码字符串，不和URL有半毛钱关系，那么用escape。

2、如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。

比如：

encodeURI("http://www.cnblogs.com/season-huang/some other thing");

编码后会变为

"http://www.cnblogs.com/season-huang/some%20other%20thing";

其中，空格被编码成了%20。但是如果你用了encodeURIComponent，那么结果变为

"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing"

看到了区别吗，连 “/” 都被编码了，整个URL已经没法用了。

3、当你需要编码URL作为的参数的时候，那么encodeURIComponent是最好方法。

var param = "http://www.cnblogs.com/season-huang/"; //param为参数
param = encodeURIComponent(param);
var url = "http://www.cnblogs.com?next=" + param;
console.log(url) //"http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2F"

看到了吧，参数中的 “/” 可以编码，如果用encodeURI肯定要出问题，因为后面的/是需要编码的。