encodeURI 和 encodeURIComponent 区别

js Apr 25, 2019
encodeURI、decodeURI、encodeURIComponent、decodeURIComponent 两对都可以用来编码和解码的 URI, 但是他们的区别又在哪里呢?

最近写的一个 nodejs 的 md5 库, 在处理 URI 时使用的是 unescape() 函数, 而 MDN 文档 又显示 Deprecated。于是考虑用 decodeURIComponent() 替换 unescape(), 但发现还有命名相近的 encodeURI() 函数, 命名近乎相似, 于是找了写资料研究, 而研究这些就得先开始对 URI 进行研究。

统一资源标识符, 或叫做 URI, 是用来标识互联网上的资源(例如, 网页或文件)和怎样访问这些资源的传输协议(例如, HTTP 或 FTP)的字符串。除了 encodeURIencodeURIComponentdecodeURIdecodeURIComponent 四个用来编码和解码 URI 的函数之外 ECMAScript 语言自身不提供任何使用 URL 的支持。(: escape()unescape() 将被遗弃, 尽量不要使用)

URI 组成形式

一个 URI 是由组件分隔符分割的组件序列组成。其一般形式是:

scheme: [// user:password @] host_ip [:port] [/] path [?search] [#others]

例如:

这些都属于 URI, 其中 : , / ; ? @ = + $ 等等都被当作分隔符的保留字符。

区别

encodeURIdecodeURI 函数操作的是完整的 URI; 这俩函数假定 URI 中的任何保留字符都有特殊意义, 所有不会编码它们。

encodeURIComponentdecodeURIComponent 函数操作的是组成 URI 的个别组件; 这俩函数假定任何保留字符都代表普通文本, 所以必须编码它们, 所以它们(保留字符)出现在一个完整 URI 的组件里面时不会被解释成保留字符了。

以上说明摘自ECMAScript标准, 为了容易读懂做了点编辑加工。

ECMA 对这四个函数还做了详细解释, 可能是为了写的更逻辑化一些, 采用了类似变量配合逻辑的写法来说明, 但是让初学者看得云里雾里的特别绕, 所以有必要把它写得更像是人读的东西, 例如下面的图解。

encode-decode-picture



相关参考链接:

分清 URI、URL 和 URN
ECMAScript 内置对象#处理 URI 的函数属性
MDN web docs#unescape()
MDN web docs#Function properties
Difference between encodeURI and encodeURIComponent

huiyifyj

你记得也好, 最好你忘掉...