简单明了区分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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 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
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
PHP递归算法的简单实例
2019/02/28 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
独特的python循环语句
2016/11/20 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
软件测试工程师面试问题精选
2016/10/28 面试题
经典的毕业生自荐信范文
2014/04/14 职场文书
高中教师考核方案
2014/05/18 职场文书
群众路线领导对照材料
2014/08/23 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2016年清明节寄语
2015/12/04 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
html5表单的required属性使用
2021/07/07 HTML / CSS