简单明了区分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使用prototype定义对象类型(转)[
Dec 22 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
JavaScript中Function详解
Feb 27 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
页面点击小红心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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
PHP7新特性简述
2017/06/11 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
python写入已存在的excel数据实例
2018/05/03 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Python tkinter实现日期选择器
2021/02/22 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
元旦晚会邀请函
2014/02/01 职场文书
普通党员对照检查材料
2014/09/24 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书