js encodeURIComponent和encodeURI

URI是什么？

统一资源标识符（Uniform Resource Identifier，URI)是一个用于标识某一互联网资源名称的字符串。 Web 上可用的每种资源 -HTML 文档、图像、视频片段、程序等 – 由一个通用资源标识符（Uniform Resource Identifier, 简称”URI”）进行定位。

为啥需要编码？

Http 协议中参数的传输是”key=value”这种键值对形式的，如果要传多个参数就需要用”&”符号对键值对进行分割。

如：”?name1=value1&name2=value2″

这样在服务端在收到这种字符串的时候，会用”&”分割出每一个参数，然后再用”=”来分割出参数值。

URL 是采用 ASCII 字符集进行编码的，根据 RFC3986 “%编码” 规范：”&”会被编码为”26″，”=”会被编码为”3D”。

URL 编码只是简单的在特殊字符的各个字节前加上%，如果参数值中包含”=”或”&”这种特殊字符会产生歧义，因此需要对参数进行 URL 编码。

如果需要传输的参数包含类似”（!$&'()*+,;=）”这种特殊字符时就需要进行编码。

encodeURIComponent

对URI的组成部分进行编码的方法，如URL中?后的一串。会转码除了语义字符之外的所有字符，即元字符也会被转码。

encodeURIComponent 会假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。

!'()*-._~0-9a-zA-Z 不会被编码

注：若整个链接被encodeURIComponent()转码，则该链接无法被浏览器访问，需要解码之后才可以正常访问。

使用场景： 当需要对 URL 的参数进行编码时，使用 encodeURIComponent。

例子：

encodeURIComponent('http://domain.com/?a=1&b=2');
// "http%3A%2F%domain.com%2F%3Fa%3D1%26b%3D2"

encodeURI

用作对一个完整的 URI 进行编码，不会对网址中的 ASCII 字母和数字及标点符号进行编码。

!#$&'()*+,/:;=?@-._~0-9a-zA-Z 不会被编码

使用场景： 当需要获取一个可用的 URL 地址时，使用此方法进行编码。

例子：

encodeURI('http://domain.com/demo first/'); 
// http://domain.com/demo%20first/

URL 元字符：

分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）

语义字符：

a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（'），圆括号（()）

区别总结