如何通过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 相关文章推荐
jquery弹出层类代码分享
Dec 27 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
微信小程序一周时间表功能实现
Oct 17 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 Token(令牌)设计
2008/03/15 PHP
改变Apache端口等配置修改方法
2008/06/05 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
很可爱的输入框
2008/08/03 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python字符串的一些操作方法总结
2019/06/10 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
禁毒主题班会教案
2015/08/14 职场文书
大学班长竞选稿
2015/11/20 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android