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 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
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
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
微信小程序 navbar实例详解
2017/05/11 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
webpack4.x打包过程详解
2018/07/18 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
JS回调函数深入理解
2019/10/16 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
3分钟学会一个Python小技巧
2018/11/23 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
Python 求向量的余弦值操作
2021/03/04 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫