简单明了区分escape、encodeURI和encodeURIComponent


Posted in Javascript onMay 26, 2018

一、前言

讲这3个方法区别的文章太多了,但是大部分写的都很绕。本文试图从实践角度去讲这3个方法。

二、escape和它们不是同一类

简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读。
编码之后的效果是%XX或者%uXXXX这种形式。
其中 ASCII字母、数字、@*/+ ,这几个字符不会被编码,其余的都会。
最关键的是,当你需要对URL编码时,请忘记这个方法,这个方法是针对字符串使用的,不适用于URL。
事实上,这个方法我还没有在实际工作中用到过,所以就不多讲了。

三、最常用的encodeURI和encodeURIComponent

对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。
它们都是编码URL,唯一区别就是编码的字符范围,其中
encodeURI方法不会对下列字符编码  ASCII字母、数字、~!@#$&*()=:/,;?+'
encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、~!*()'
所以encodeURIComponent比encodeURI编码的范围更大。
实际例子来说,encodeURIComponent会把 http://  编码成  http%3A%2F%2F 而encodeURI却不会。 

四、最重要的,我该什么场合用什么方法

区别上面说的很清楚了,接下来从实际例子来说说把。

1、如果只是编码字符串,不和URL有半毛钱关系,那么用escape。
2、如果你需要编码整个URL,然后需要使用这个URL,那么用encodeURI。

比如
encodeURI("https://3water.com/season-huang/some other thing");

编码后会变为

"https://3water.com/season-huang/some%20other%20thing";

其中,空格被编码成了%20。但是如果你用了encodeURIComponent,那么结果变为

"http%3A%2F%2F3water.com%2Fseason-huang%2Fsome%20other%20thing"

看到了区别吗,连 "/" 都被编码了,整个URL已经没法用了。

3、当你需要编码URL中的参数的时候,那么encodeURIComponent是最好方法。

var param = "https://3water.com/season-huang/"; //param为参数
param = encodeURIComponent(param);
var url = "https://3water.com?next=" + param;
console.log(url) //https://3water.com?next=http%3A%2F%2F3water.com%2Fseason-huang%2F

看到了把,参数中的 "/" 可以编码,如果用encodeURI肯定要出问题,因为后面的/是需要编码的。

Javascript 相关文章推荐
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
js调用css属性写法
Sep 21 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
js实现简单的计算器功能
Jan 16 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
页面点击小红心js实现代码
May 26 #Javascript
js input输入百分号保存数据库失败的解决方法
May 26 #Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 #Javascript
jQuery插件jsonview展示json数据
May 26 #jQuery
jQuery插件Validation表单验证详解
May 26 #jQuery
jQuery创建及操作xml格式数据示例
May 26 #jQuery
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 #Javascript
You might like
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP二维数组去重算法
2016/12/17 PHP
完美的php分页类
2017/10/24 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
js a标签点击事件
2017/03/30 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python内置函数 next的具体使用方法
2017/11/24 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
Python线程threading模块用法详解
2020/02/26 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
keras得到每层的系数方式
2020/06/15 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
会议主持人开场白台词
2015/05/28 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
python中subplot大小的设置步骤
2021/06/28 Python
python入门学习关于for else的特殊特性讲解
2021/11/20 Python