详谈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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
一步步教你利用Docker设置Node.js
Nov 20 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
JavaScript文档对象模型DOM
Nov 20 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编程开发“虚拟域名”系统
2006/10/09 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
php 的反射详解及示例代码
2016/08/25 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python处理二进制数据的方法
2015/06/03 Python
python pycharm的安装及其使用
2019/10/11 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
公司开业庆典主持词
2014/03/21 职场文书
出生公证委托书
2014/04/03 职场文书
激励口号大全
2014/06/17 职场文书
房产授权委托书范本
2014/09/22 职场文书
社会实践单位意见
2015/06/05 职场文书
护士岗位竞聘书
2015/09/15 职场文书
婚庆答谢词大全
2015/09/29 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
nginx之内存池的实现
2022/06/28 Servers