如何通过JS实现转码与解码


Posted in Javascript onFebruary 21, 2020

这篇文章主要介绍了如何通过JS实现转码与解码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

escape 和 unescape

escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。

采用unicode字符集对指定的字符串除0-255以外进行编码。所有的空格符、标点符号、特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)。比如,空格符对应的编码是%20。

escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z。

escape()函数用于js对字符串进行编码。

encodeURI 和 decodeURI

把URI字符串采用UTF-8编码格式转化成escape各式的字符串。

encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z

encodeURI()用于整个url编码

encodeURIComponent 和 decodeURIComponent

与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。

因此,"; / ? : @ & = + $ , #",这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。至于具体的编码方法,两者是一样。把URI字符串采用UTF-8编码格式转化成escape格式的字符串。

encodeURIComponent() 用于参数的传递,参数包含特殊字符可能会造成间断。

总结

escape编码字符串

简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读。

编码之后的效果是%XX或者%uXXXX这种形式。

其中 ASCII字母 数字 @*/+ 等字符不会被编码,其余的都会。

最关键的是,当需要对URL编码时,忘记这个方法,这个方法是针对字符串使用的,不适用于URL。

URL编码encodeURI和encodeURIComponent

对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。它们都是编码URL,唯一区别就是编码的字符范围,其中

encodeURI方法不会对下列字符编码 ASCII字母 数字 ~!@#$&*()=:/,;?+'

encodeURIComponent方法不会对下列字符编码 ASCII字母 数字 ~!*()'

所以encodeURIComponent比encodeURI编码的范围更大。

实际例子来说,encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。

如果只是编码字符串,不和URL有半毛钱关系,那么用escape。

如果你需要编码整个URL,然后需要使用这个URL,那么用encodeURI。
比如

encodeURI(http://www.cnblogs.com/some other thing);

编码结果:

http://www.cnblogs.com/some%20other%20thing

其中,空格被编码成了%20。但是如果用了encodeURIComponent,那么结果变为

http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing

连 "/" 都被编码了,整个URL已经没法用了。

当需要编码URL中的参数的时候,那么encodeURIComponent是最好方法

var param = "http://www.cnblogs.com/"; //param为参数
param = encodeURIComponent(param);
var url = "http://www.cnblogs.com?next=" + param;
console.log(url) //http://www.cnblogs.com?next=http%3A%2F%2Fwww.cnblogs.com%2F

参数中的 "/" 可以编码,如果用encodeURI肯定要出问题,因为后面的/是需要编码的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
AngularJS实现多级下拉框
Mar 25 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 #Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 #Javascript
JS实现判断移动端PC端功能
Feb 21 #Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 #Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 #Javascript
纯js实现无缝滚动功能代码实例
Feb 21 #Javascript
vue中实现动态生成二维码的方法
Feb 21 #Javascript
You might like
第一个无线电台是由谁发明的
2021/03/01 无线电
福利彩票幸运号码自动生成器
2006/10/09 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python发布模块的步骤分享
2014/02/21 Python
Python使用minidom读写xml的方法
2015/06/03 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
python excel多行合并的方法
2020/12/09 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
企业车辆管理制度
2014/01/24 职场文书
银行委托书范本
2014/04/04 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
欧元符号 €
2022/02/17 杂记