详谈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 相关文章推荐
JavaScript Chart 插件整理
Jun 18 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
7个JS基础知识总结
Mar 05 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
小程序实现tab标签页
Nov 16 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
对javascript和select部件的结合运用
2006/10/09 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
JS回调函数深入理解
2019/10/16 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
python PyTorch预训练示例
2018/02/11 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
Collection和Collections的区别
2016/05/02 面试题
一帮一活动总结
2014/05/08 职场文书
学校交通安全责任书
2014/08/25 职场文书
捐助感谢信
2015/01/22 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
七一慰问简报
2015/07/20 职场文书