详谈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 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
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抓即时股票信息
2006/10/09 PHP
20个PHP常用类库小结
2011/09/11 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
javascript onmouseout 解决办法
2010/07/17 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
python实现感知器算法详解
2017/12/19 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
OpenCV 模板匹配
2019/07/10 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
工艺工程师工作职责
2013/11/23 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
停车位租赁协议书
2014/09/24 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android