encodeURI 和 encodeURIComponent 区别
encodeURI、decodeURI、encodeURIComponent、decodeURIComponent 两对都可以用来编码和解码的 URI, 但是他们的区别又在哪里呢?
最近写的一个 nodejs 的 md5 库, 在处理 URI 时使用的是 unescape() 函数, 而 MDN 文档 又显示 Deprecated。于是考虑用 decodeURIComponent() 替换 unescape(), 但发现还有命名相近的 encodeURI() 函数, 命名近乎相似, 于是找了写资料研究, 而研究这些就得先开始对 URI 进行研究。
统一资源标识符, 或叫做 URI, 是用来标识互联网上的资源(例如, 网页或文件)和怎样访问这些资源的传输协议(例如, HTTP 或 FTP)的字符串。除了 encodeURI、encodeURIComponent、decodeURI、decodeURIComponent 四个用来编码和解码 URI 的函数之外 ECMAScript 语言自身不提供任何使用 URL 的支持。(注: escape() 和 unescape() 将被遗弃, 尽量不要使用)
URI 组成形式
一个 URI 是由组件分隔符分割的组件序列组成。其一般形式是:
scheme: [// user:password @] host_ip [:port] [/] path [?search] [#others]
例如:
- ftp://root:123456@127.0.0.1:3000/folder1/file1
- mailto:i@huiyifyj.cn
- https://github.com/search?l=JavaScript&q=uri&type=Repositories
这些都属于 URI, 其中 : , / ; ? @ = + $ 等等都被当作分隔符的保留字符。
区别
encodeURI 和 decodeURI 函数操作的是完整的 URI; 这俩函数假定 URI 中的任何保留字符都有特殊意义, 所有不会编码它们。
encodeURIComponent 和 decodeURIComponent 函数操作的是组成 URI 的个别组件; 这俩函数假定任何保留字符都代表普通文本, 所以必须编码它们, 所以它们(保留字符)出现在一个完整 URI 的组件里面时不会被解释成保留字符了。
以上说明摘自ECMAScript标准, 为了容易读懂做了点编辑加工。
ECMA 对这四个函数还做了详细解释, 可能是为了写的更逻辑化一些, 采用了类似变量配合逻辑的写法来说明, 但是让初学者看得云里雾里的特别绕, 所以有必要把它写得更像是人读的东西, 例如下面的图解。
相关参考链接:
分清 URI、URL 和 URN
ECMAScript 内置对象#处理 URI 的函数属性
MDN web docs#unescape()
MDN web docs#Function properties
Difference between encodeURI and encodeURIComponent