一张图看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别

时间 2019-11-29

标签一张看懂 encodeuri encodeuricomponent decodeuri decodeuricomponent 区别繁體版

原文原文链接

早前在博客园发的几篇基础文，都是图解系列，总结了一些JavaScript容易混淆的知识点，如今拿来在掘金分享一下吧。html

原文地址：一张图看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别函数

一、这四个方法的用处

用来编码和解码URI的

统一资源标识符，或叫作 URI，是用来标识互联网上的资源（例如，网页或文件）和怎样访问这些资源的传输协议（例如，HTTP 或 FTP）的字符串。除了encodeURI、encodeURIComponent、decodeURI、decodeURIComponent四个用来编码和解码 URI 的函数以外 ECMAScript 语言自身不提供任何使用 URL 的支持。ui

二、URI组成形式

一个 URI 是由组件分隔符分割的组件序列组成。其通常形式是：
Scheme : First / Second ; Third ? Fourth编码

其中斜体的名字表明组件；“:”, “/”, “;”，“?”是看成分隔符的保留字符。code

三、有和不一样？

encodeURI 和 decodeURI 函数操做的是完整的 URI；这俩函数假定 URI 中的任何保留字符都有特殊意义，全部不会编码它们。cdn

encodeURIComponent 和 decodeURIComponent 函数操做的是组成 URI 的个别组件；这俩函数假定任何保留字符都表明普通文本，因此必须编码它们，因此它们（保留字符）出如今一个完整 URI 的组件里面时不会被解释成保留字符了。htm

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

四、图解四个函数的不一样

ECMA对这四个函数还作了详细解释，多是为了写的更逻辑化一些，采用了相似变量配合逻辑的写法来讲明，可是让初学者看得云里雾里的特别绕，因此有必要把它写得更像是人读的东西……ip

当 URI 里包含一个没在上面列出的字符或有时不想让给定的保留字符有特殊意义，那么必须编码这个字符。字符被转换成 UTF-8 编码，首先从 UTF-16 转换成相应的代码点值的替代。而后返回的字节序列转换为一个字符串，每一个字节用一个“%xx”形式的转移序列表示。（具体转换规则能够参考抽象操做Encode和Decode的说明）资源