简单明了区分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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 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中反射的应用
2013/06/18 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
javascript 写类方式之五
2009/07/05 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Python读取properties配置文件操作示例
2018/03/29 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
个人考核材料
2014/05/15 职场文书
民生工作实施方案
2014/05/31 职场文书
主要领导对照检查材料
2014/08/26 职场文书
写给父母的感谢信
2015/01/22 职场文书
怎样写家长意见
2015/06/04 职场文书
联村联户简报
2015/07/21 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript