简单明了区分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 .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
深入理解javascript中的this
Feb 08 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
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python字符编码判断方法分析
2016/07/01 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
理财投资建议书
2014/03/12 职场文书
检讨书怎么写
2015/01/23 职场文书
故宫的导游词
2015/01/31 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android