encodeURI和encodeURIComponent的异同

先了解一下使用背景，某个页面https://openapi.com，它接受一个redirect参数，使用的参数查询库querystring.js用来获取链接上redirect的值，
然后重新跳转到redirect。

在未编码的情况下，访问链接https://openapi.com?redirect=https://mysite.com?name=cnblog，获取到的redirect为https://mysite.com，而不是https://mysite.com?name=cnblog，重定向后的页面https://mysite.com就丢失了name参数。

解决方案之一就是先把回跳链接https://mysite.com?name=cnblog编码，页面https://openapi.com获取到的是编码后的redirect，接着对redirect进行解码操作再重定向到redirect。

encodeURI和encodeURIComponent都可以用来对URL进行编码，两者之间的差别宏观上讲就是encodeURIComponent可编码的范围更大。

对英文问号?的编码情况：

encodeURI("?") // 原封不动返回?
encodeURIComponent("?") // 返回编码后的 %3F

对上述链接https://mysite.com?name=cnblog的编码情况：

encodeURI("https://mysite.com?name=cnblog") // 原封不动返回 https://mysite.com?name=cnblog
encodeURIComponent("https://mysite.com?name=cnblog") // 基本上除了单词其他字符都被编码了 https%3A%2F%2Fmysite.com%3Fname%3Dcnblog

所以，前端在重定向跳转时如果需要编码，常常使用encodeURIComponent方法。

题外话：编码原理
编码原理比较简单，先将需要编码的字符，转换为ASCII编码对照表中的值，用16进制表示，最后在最前面加上一个百分号%就ok了。
比如问号?在ASCII编码对照表中，用10进制表示为63，用16进制表示为3F，最终得到的编码为%3F。