encodeURI 与 encodeURIComponent 的不同之处，各自适用的场景是什么？

Question

看了网上的资料，感觉这两个编码唯一区别是：编码字符的范围不同（encodeURIComponent > encodeURI ）。

如果是这样，那岂不是任何情况下，只需要用encodeURIComponent就好了。

有哪些场景适合encodeURI，而不适合encodeURIComponent呢？

Answer 1

区别

encodeURI方法不会对下列字符编码 ASCII字母 数字 ~!@#$&*()=:/,;?+'
encodeURIComponent方法不会对下列字符编码 ASCII字母 数字 ~!*()'
所以encodeURIComponent比encodeURI编码的范围更大
encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会

场景

如果你需要编码整个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已经没法用了

当你需要编码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肯定要出问题，因为后面的/是需要编码的。

来源：https://www.zhihu.com/question/21861899/answer/20300871