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

一、这四个方法的用处

1、用来编码和解码URI的

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

2、URI组成形式

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

Scheme : First / Second ; Third ? Fourth

其中斜体的名字代表组件;“:”, “/”, “;”,“?”是当作分隔符的保留字符

3、有和不同?

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

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

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

4、图解四个函数的不同:

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

当 URI 里包含一个没在上面列出的字符或有时不想让给定的保留字符有特殊意义,那么必须编码这个字符。字符被转换成 UTF-8 编码,首先从 UT??F-16 转换成相应的代码点值的替代。然后返回的字节序列转换为一个字符串,每个字节用一个“%xx”形式的转移序列表示。(具体转换规则可以参考抽象操作EncodeDecode的说明

时间: 2024-08-07 08:39:37

一张图看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别的相关文章

一张图看懂360°全景和VR的区别

2016年开始,Facebook.谷歌.腾讯.阿里等互联网巨头都已开始抢食VR(虚拟现实)这块的大蛋糕,虚拟现实发展速度惊人.在这样强势发展的背景下,一些产品也开始打着VR的幌子,挂着VR的噱头卖起来360°全景视频. 面对越来越多的“VR产品”,无忧我房李熠将带领大家深入地对虚拟现实,进行了解并且告诉大家如何区分VR与360°全景视频. 一张图告诉你VR与360°全景的区别 什么是VR 通过先进的传感设备,VR产品能够让体验者获得沉浸于另外一个世界的体验,并且能够在这个虚拟世界中与虚拟环境实现

【Network】一张图看懂 Reactor 与 Proactor 模型的区别

首先来看看Reactor模式,Reactor模式应用于同步I/O的场景.我们以读操作为例来看看Reactor中的具体步骤: 读取操作: 1. 应用程序注册读就需事件和相关联的事件处理器 2. 事件分离器等待事件的发生 3. 当发生读就需事件的时候,事件分离器调用第一步注册的事件处理器 4. 事件处理器首先执行实际的读取操作,然后根据读取到的内容进行进一步的处理 下面我们来看看Proactor模式中读取操作和写入操作的过程: 读取操作: 1. 应用程序初始化一个异步读取操作,然后注册相应的事件处理

一张图看懂normal,static,sealed,abstract 的 区别

+-------------------------+---+--------+--------+--------+----------+ | Class Type | | normal | static | sealed | abstract | +-------------------------+---+--------+--------+--------+----------+ | Can be instantiated | : | yes | no | yes | no | | Can

一张图看懂offsetX, clientX, pageX, screenX的区别

1.具体含义见下图1 2.浏览器的兼任情况 原文地址:https://www.cnblogs.com/aiziyouhai/p/9610127.html

一张图看懂ANSYS17.0 流体 新功能与改进

一张图看懂ANSYS17.0 流体 新功能与改进 提交 我的留言 加载中 已留言 一张图看懂ANSYS17.0 流体 新功能与改进 原创2016-02-03ANSYS模拟在线模拟在线 模拟在线 微信号sim_ol 功能介绍这是数值模拟.仿真分析领域最大的公众号,没有之一!!! 点上方“模拟在线”查看更多“牛B”资讯! 感谢ANSYS公司对平台的友情支持,本次17.0的改进报告均为ANSYS提供(授权直接摘抄,确实给小编省事不少啊).本次首先带来是流体方面的改进和优化.后续陆续推送结构.电磁等各方

一张图看懂css的position里的relative和absolute的区别

position有以下属性:static.inherit.fixed.absolute.relative前三个好理解好区分:static:是默认状态,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).nherit:从父元素继承 position 属性的值.fixed:生成绝对定位的元素,相对于浏览器窗口进行定位.(即滚动浏览器的时候,元素永远固定显示在窗口可视区的某个位置). 比较常用而且会引起初学者迷惑的是absolute和r

一张图看懂原码、反码、补码、移码

前言 原码.反码.补码其实两年前就讲过,只是当时的理解太过肤浅或者直接说就是没有理解,因为对于数学比较发怵的我看到那么多的公式很是脑袋大,所以想要硬记也记不住.这次讲课的时候好歹知道了运算规则,但别人一问为什么,立马那个冏啊~好了,废话不多说了,开始进入正题(如果我的理解有偏差,恳请各位大虾不吝指出): 一张图胜过千言万语,下面的这张是本篇想要说的大概内容 原码 我们知道,计算机是以0和1进行运算的,而且内部只有加法运算器,但日常生活中使用的却是十进制,并且有正负之分.于是我们发明了原码:最高位

4张图看懂delphi 10生成ipa和在iPhone虚拟器上调试(教程)

4张图看懂delphi 10生成ipa和在iPhone虚拟器上调试(教程) (2016-02-01 03:21:06) 转载▼ 标签: delphi ios delphi10 教程 编程 分类: 编程学习 参见: delphi XE4生成ipa并部署到越狱iPad视频教程 os x el capitan / Xcode_7.2 / delphi 10 切换不同版本的模拟器.png在虚拟器上调试的正确设置.png域名设置.png记得选择的平台要选虚拟器.png

31张图看懂初高中所有英语语法

31张图看懂初高中所有英语语法