如何通过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 相关文章推荐
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
原生js+canvas实现验证码
Nov 29 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
PHP parse_url 一个好用的函数
2009/10/03 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python动态加载变量示例分享
2014/02/17 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
医学专业毕业生个人求职信
2013/12/25 职场文书
农村婚礼证婚词
2014/01/08 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers