详谈js对url进行编码和解码(三种方式的区别)


Posted in Javascript onAugust 16, 2017

Javascript语言用于编码的函数,一共有三个,最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了,但是由于历史原因,很多地方还在使用它,所以有必要先从它讲起。

escape 和 unescape

实际上,escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282,也就是说在Unicode字符集中,"春"是第6625个(十六进制)字符,"节"是第8282个(十六进制)字符。

它的具体规则是,除了ASCII字母、数字、标点符号"@ * _ + - . /"以外,对其他所有字符进行编码。在u0000到u00ff之间的符号被转成%xx的形式,其余符号被转成%uxxxx的形式。对应的解码函数是unescape()。

还有两个地方需要注意。

首先,无论网页的原始编码是什么,一旦被Javascript编码,就都变为unicode字符。也就是说,Javascipt函数的输入和输出,默认都是Unicode字符。这一点对下面两个函数也适用。

其次,escape()不对"+"编码。但是我们知道,网页在提交表单的时候,如果有空格,则会被转化为+字符。服务器处理数据的时候,会把+号处理成空格。所以,使用的时候要小心。

例如:

编码:

escape('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果:"http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"

escape('张')
结果:"%u5F20"

解码:

unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果:"http://www.baidu.com?name=zhang@xiao@jie&order=1"

unescape("%u5F20")
结果:"张"

encodeURI 和 decodeURI

encodeURI()是Javascript中真正用来对URL编码的函数。

它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #",也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。

它对应的解码函数是decodeURI()。

注:需要注意的是,它不对单引号'编码。

例如:

编码:

encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果:http://www.baidu.com?name=zhang@xiao@jie&order=1

解码:

decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果:http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1

encodeURIComponent 和 decodeURIComponent

最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。

因此,"; / ? : @ & = + $ , #",这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。至于具体的编码方法,两者是一样。

它对应的解码函数是decodeURIComponent()。

例如:

编码:

encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果:"http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1"

解码:

decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
http://www.baidu.com?name=zhang@xiao@jie&order=1

以上这篇详谈js对url进行编码和解码(三种方式的区别)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
Node.js 的模块知识汇总
Aug 16 #Javascript
vue绑定设置属性的多种方式(5)
Aug 16 #Javascript
jQuery中each循环的跳出和结束实例
Aug 16 #jQuery
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 #Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 #Javascript
基于js 本地存储(详解)
Aug 16 #Javascript
基于Vue实例生命周期(全面解析)
Aug 16 #Javascript
You might like
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
Python实现简易Web爬虫详解
2018/01/03 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python3.7 sys模块的具体使用
2019/07/22 Python
python 默认参数相关知识详解
2019/09/18 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Django中template for如何使用方法
2021/01/31 Python
python爬虫如何解决图片验证码
2021/02/14 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
怎样写好自我评价呢?
2014/02/16 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
学校端午节活动方案
2014/08/23 职场文书
铅球加油稿100字
2014/09/26 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2016春节慰问信范文
2015/03/25 职场文书
社区敬老月活动总结
2015/05/07 职场文书