JavaScript字符集编码与解码详谈


Posted in Javascript onFebruary 02, 2017

一、字符集

1)字符与字节(Character)

字符是各种文字和符号的总称,包括乱码;一个字符对应1~n个字节,一字节对应8位,每位用0或1表示。

2)字符集(Character Set)

字符集是多个字符的集合,每个字符集包含的字符个数不同,常见字符集名称:ASCII字符集、GB2312字符集、Unicode字符集等。

3)字符集编码(Character Encoding)

字符集编码就是将符号转换为计算机可读的二进制,解码就是把二进制转换为人类可读的符号。

字符集大多对应一种编码方式(例如GBK对应GBK编码),但Unicode编码有多种,包括UTF-8、UTF-16、UTF-32和UTF-7。

目前网页用的最多的就是“UTF-8”,UTF-8使用一至四个字节为每个字符编码,是ASCII的一个超集,所以现存的ASCII文本不需要转换

二、浏览器进制

1)HTML属性中使用十进制和十六进制

十进制在HTML中可使用“8”,十六进制,则使用“Z”,比十进制多了个x,进制码中也多了a~f这6个字符来表示10~15。

2)CSS属性中使用十进制和十六进制

CSS兼容HTML的进制形式,除此之外,十六进制还可以使用“\6c”的形式来表示。

3)JavaScript编码封装

可以直接通过eval执行字符串八进制和十六进制两种编码方式,其中八进制用“\56”表示,十六进制用“\x5c”表示。

如果代码中应用了汉字并且需要进行进制编码,那么只能进行十六进制Unicode编码,其表示形式为:“\u4ee3\u7801”。

在“Web前端黑客技术揭秘”中经封装了两个方法来做编码和解码,主要用到了下面两个方法,具体代码可查看此处。

核心代码是:“str.charCodeAt(char).toString(进制)”与“String.fromCharCode(parseInt(code,进制))”

charCodeAt() 方法返回0到65535之间的整数,表示给定索引处的UTF-16代码单元

静态String.fromCharCode() 方法返回使用指定的Unicode值序列创建的字符串。

还可以通过一个在线网页进行编码解码“MonyerJS”。

4)HTML自动解码机制

例如在网页中输入16进制的“Hello”,自动就会解码为“hello”。

还有一些比较熟知的空格“ ”也是这种机制。

三、浏览器编码

JavaScript中有三对可以对字符串编码解码的函数,分别是:

escape/unescape、encodeURI/decodeURI、encodeURIComponent/decodeURIComponent。

主要的区别还是不编码的字符个数。

1)escape不编码的字符有69个

*、+、-、.、/、@、_、0~9、a~z、A~Z而且escape对0~255以外的unicode值进行编码时输出%u****格式。

2)encodeURI不编码的字符有82个

!、#、$、&、'、(、)、*、+、,、-、.、/、:、;、=、?、@、_、~、0~9、a~z、A~Z

3)encodeURIComponent不编码的字符有71个

!、'、(、)、*、-、.、_、~、0~9、a~z、A~Z

Javascript 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
JS实现购物车特效
Feb 02 #Javascript
jQuery实现复选框的全选和反选
Feb 02 #Javascript
jQuery制作图片旋转效果
Feb 02 #Javascript
浅谈javascript中的 “ && ” 和 “ || ”
Feb 02 #Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 #Javascript
javascript实现简易计算器
Feb 01 #Javascript
javascript实现右下角广告框效果
Feb 01 #Javascript
You might like
php文件缓存类汇总
2014/11/21 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP序列化操作方法分析
2016/09/28 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python爬取网易云音乐热门评论
2017/03/31 Python
Python实现读取json文件到excel表
2017/11/18 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
在python中修改.properties文件的操作
2020/04/08 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
重大事项社会稳定风险评估方案
2014/06/15 职场文书
咖啡店创业计划书
2014/08/15 职场文书
公司授权委托书样本
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
学生检讨书范文
2015/01/27 职场文书