简单明了区分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 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
js表头排序实现方法
Jan 16 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
js实现漫天星星效果
Jan 19 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 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
discuz安全提问算法
2007/06/06 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP闭包实例解析
2014/09/08 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
vue 插槽简介及使用示例
2020/11/19 Vue.js
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
法国体育用品商店:GO Sport
2019/10/23 全球购物
应用心理学个人求职信范文
2013/12/11 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
教学质量评估实施方案
2014/03/17 职场文书
论语读书笔记
2015/06/26 职场文书
三八妇女节致辞
2015/07/31 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android