详谈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自动显示最后更新时间
Mar 15 Javascript
符合标准的js表单提交的代码
Sep 13 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
react的hooks的用法详解
Oct 12 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php二维数组转成字符串示例
2014/02/17 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Python fileinput模块使用实例
2015/05/28 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
对Python信号处理模块signal详解
2019/01/09 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
工地资料员岗位职责
2013/12/31 职场文书
九年级政治教学反思
2014/02/06 职场文书
期中考试后的反思
2014/02/08 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
北京爱情故事观后感
2015/06/12 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
小学作文之描写天气
2019/08/15 职场文书