帮助你区别 encodeURI 与 encodeURIComponent 的使用场景
# 背景
最近在公司做预览功能时，遇到对请求参数进行编码的场景。那么问题来了：
- 为什么要对链接或参数进行编码？
- 何时需要编码？
- encodeURI 与 encodeURIComponent 有啥区别呢？
下面来一起看看吧~
# 为啥需要编码
Http 协议中参数的传输是"key=value"这种键值对形式的，如果要传多个参数就需要用"&"符号对键值对进行分割。如"?name1=value1&name2=value2"，这样在服务端在收到这种字符串的时候，会用"&"分割出每一个参数，然后再用"="来分割出参数值。
URL 是采用 ASCII 字符集进行编码的，根据 RFC3986 "%编码" 规范："&"会被编码为"26"，"="会被编码为"3D"。
如果参数值中包含"="或"&"这种特殊字符会产生歧义，因为 URL 编码只是简单的在特殊字符的各个字节前加上%，所以需要对参数进行 URL 编码。
如果需要传输的参数可能包含类似"（!$&'()* ,;=）"这种特殊字符时就需要进行编码了。
下面来看看标题所说的两种编码方式。
我们注意到两种方式都包含一个 URI，那么 URI 是啥？
统一资源标识符（Uniform Resource Identifier，URI)是一个用于标识某一互联网资源名称的字符串。 Web 上可用的每种资源 -HTML 文档、图像、视频片段、程序等 - 由一个通用资源标识符（Uniform Resource Identifier, 简称"URI"）进行定位。
# encodeURI
用作对一个完整的 URI 进行编码，不会对网址中的 ASCII 字母和数字及标点符号进行编码。
- !#$&'()* ,/:;=?@-._~0-9a-zA-Z 不会被编码
使用场景： 当需要获取一个可用的 URL 地址时，使用此方法进行编码。
例子：
代码语言：javascript复制encodeURI('http://xuedingmiao.com/My first/');
// http://xuedingmiao.com/My first/# encodeURIComponent
是对统一资源标识符（URI）的组成部分进行编码的方法，从字面意思来看 URIComponent 是 URL 组成部分、组件，所以这个方法是对组成部分进行编码而不是整体。
encodeURIComponent 会假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串），在 encodeURI 中不被编码的符号"; / ? : @ & = $ , #"，encodeURIComponent 都会进行编码。
- !'()*-._~0-9a-zA-Z 不会被编码
使用场景： 当需要对 URL 的参数进行编码时，使用 encodeURIComponent。
例子：
代码语言：javascript复制encodeURIComponent('http://xuedingmiao.com/?a=1&b=2');
// "http://xuedingmiao.com/?a=1&b=2"# 区别总结
编码方式 | 适用场景 | 安全字符 |
|---|---|---|
encodeURI | 对完整 URI 编码 | 82 个：!#$&'()* ,/:;=?@-._~0-9a-zA-Z |
encodeURIComponent | 对 URI 组件编码 | 71 个：!'()*-._~0-9a-zA-Z |
- 可以看到 encodeURIComponent 编码的字符范围比 encodeURI 的大
# 参考资料
- encodeURI
- encodeURIComponent
- 百分比编码
