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

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.