`
deng131
  • 浏览: 659995 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

HTML与javascript中常用编码

阅读更多
在日常的前端开发工作中,我们会经常的与HTML、javascript、css等语言打交道,和一门真正的语言一样,计算机语言也有它的字母表、语法、词法、编码方式等,在这里我简单的谈一下前端HTML与javascript日常工作中常碰到的编码问题。

在计算机中,我们储存的信息都是用二进制码表示的。我们认识的、屏幕上显示的英文、汉字等符号和储存用的二进制代码的互相转换,就是编码。

有两个基本概念需要说明,charset 和 character encoding:

charset ,字符集,也就是某个符号和某个数字映射关系的一个表,也就是它决定了107 是koubei 的 ‘a’,21475 是口碑的“口”,不同的表有不同的映射关系,如 ascii,gb2312,Unicode. 通过这个数字和字符的映射表,我们可以把一个二进制表示的数字转换成某个字符。
chracter encoding ,编码方式。例如,同是对于应“口”的 21475 这个数,我们是用 \u5k3e3 表示呢,还是用 %E5%8F%A3 来表示呢?这就是由 character encoding 来决定的。

对于 ‘koubei.com’ 这样的 字符串来说,是美国人的常用字符,他们就制定了一个 叫做ASCII 的字符集,全称是 american standard code of information interchange 美国标准信息交换码,用0–127这128个数字,(2的7次方,0×00-0×7f) 代表了123abc这样的常用的128个字符。一共是 7 bits,再加上第一个是符号位,要用来去补码反码表示负数什么的,一共8 bits 构成一个 byte。当年美国人就是小气了点,要是一开始就设计成一个 byte 是16 bits、32 bits,世界上会少很多问题,不过当时,估计他们觉得 8 bits 就够了,可以表示128个不同的字符呢!

介于计算机这玩意儿是美国人搞出来的,所以他们自己省事,把自家用的符号都编码好了,用的挺爽的。但当计算机开始国际化的时候,问题出来了,拿中国举例吧,汉字就好几万,怎么办?

现有的 8 bits 一个 byte 的系统是基础,不能破坏,不能去改到 16 bits之类的,否则改动太大了,只能走另一条路:用多个 ascii 的字符去表示一个其他字符,也就是 MBCS ( Multi-Byte Character System,多字节字符系统)。
有了这个 MBCS 的概念,我们可以表示更多个字符了,比如我们用 2 个 ascii 字符,就有 16 bits, 理论上有 2 的 16 次方 65536 个字符。但这些编码怎么分配到字符上呢?比如口碑的”口”的 Unicode 编码就是 21475,谁决定的呢?字符集,也就是刚刚介绍的charset。ascii就是最基础的一个字符集,在此之上,我们有类似于 gb2312, big5这样针对简体中文和繁体中文的MBCS的字符集等等。终于有个叫 Unicode Consortium 的机构,决定做一个囊括所有字符在内的字符集(UCS, Universal Character Set)和对应编码方式的标准,即 Unicode。从1991年开始,它发布了第一版 Unicode 国际标准,ISBN 0-321-18578-1 ,国际标准化组织 ISO 也参与了这个的定制,ISO/IEC 10646 : the Universal Character Set。总之,Unicode 是个基本覆盖了所有已经存在的地球上的符号的字符标准了,现在正在被越来越广泛的使用,ECMA 标准也规定,javascript语言的内部字符使用 Unicode 标准(这意味着,javascript的变量名、函数名等是允许中文的!)。

对于身在中国的开发者来说,可能碰到比较多的问题就是 gbk,  gb2312, utf-8 之间转换之类的问题了。严格的说这个说法不是很准确,gbk,gb2312是字符集 (charset),而 utf-8 是一种编码方式 (character encoding) ,是 Unicode 标准中 UCS 字符集的一种编码方式,因为使用 Unicode 字符集的网页主要用UTF-8编码,所以大家常常就把它们并列了,其实是不准确的。

有了 Unicode 后,至少人类文明没有碰到外星人之前,这是一把钥匙了,都用它吧。而现在使用最广泛 Unicode 的编码方式就是 UTF-8 (8-bit UCS/Unicode Transformation Format) 了,它有几个特别好的地方:
1,编码 UCS 字符集,全世界通用
2,是一种变长编码方式(variable-length character encoding),兼容 ascii
第二点是个很大的优点,它使得以前使用纯 ascii 编码的系统兼容,而且不会增加额外的存储量(假设定长的编码方式,规定每个字符由2个 bytes 组成,那么这时候 ascii 字符占用的存储空间将增大一倍)。

要把 UTF-8 说清楚,引入一个表会更方便了:

    U-00000000 – U-0000007F:    0xxxxxxx
    U-00000080 – U-000007FF:    110xxxxx 10xxxxxx
    U-00000800 – U-0000FFFF:    1110xxxx 10xxxxxx 10xxxxxx
    U-00010000 – U-001FFFFF:    11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
    U-00200000 – U-03FFFFFF:    111110xx 10xxxxxx 10xxxxxx 10xxxxxx  10xxxxxx
    U-04000000 – U-7FFFFFFF:    1111110x 10xxxxxx 10xxxxxx 10xxxxxx  10xxxxxx 10xxxxxx

要看懂这个表呢,我们看前两行就够了

U-00000000 – U-0000007F:
0xxxxxxx 第一行是这样的,意思是说,如果你发现一个utf-8编码的 byte 的二进制码是0xxxxxxx,是0开头的, 即十进制的0-127之间,那么他就是单独的这一 byte 代表一个字符,而且是拥有和 ascii 码完全一样的含义。其他所有的 utf8 编码的二进制值都是用1开头的1xxxxxxx,大于127的,而且都需要至少2 bytes才能代表一个符号。所以一个字节的第一位是一个开关,代表这个字符是不是一个 ascii 码。这个就是刚才谈到的兼容性,从英文定义上看,就是utf8编码的两个属性:

    UCS characters U+0000 to U+007F (ASCII) are encoded simply as bytes 0×00 to 0×7F (ASCII compatibility). This means that files and strings which contain only 7-bit ASCII characters have the same encoding under both ASCII and UTF-8.
    All UCS characters >U+007F are encoded as a sequence of several bytes, each of which has the most significant bit set. Therefore, no ASCII byte (0×00-0×7F) can appear as part of any other character.

然后我们看看第二行:

U-00000080 – U-000007FF:    110xxxxx 10xxxxxx
先看第一个字节:110xxxxx,它的含义是,我不是一个 ascii 码(因为第一位不为0),我是一个多 bytes 字符的第一个 byte (第二位为1),我参与表示的这个字符是由2个 bytes 组成的(第三位为0),从第四位开始,就是字符的信息储存的位置。
再看第二个字节:10xxxxxx,它的含义是:我不是一个 ascii 码(因为第一位不为0),我不是一个多 bytes 字符的第一个 byte (第二位为0),第三位开始是字符的信息储存的位置。

从这个例子中可以总结出来,utf-8编码方式中,在一长串连续的二进制 byte 码中,可能由2个至6个 bytes 来表示一个符号,那么相比较于用一个 byte 表示符号的 ascii 码,我们需要空间来储存两个额外信息: 一,这个符号开始位置,一个“starter”的位置,用生物学上的话来说,就是蛋白质翻译时候起始密码子AUG的位置了;二,这个符号使用的 bytes 数(其实如果每个符号都有 starter,这个长度是可以不提供的,但是提供长度信息增加了在部分 bytes 丢失时的容错能力)。解决方案是:用一个 byte 的第二位是否是1来代表这一 byte 是否是一个字符的起始 byte (因为一个 byte 里面的第一位刚才已经被使用了,0表示ascii码,1表示非ascii ),即,一个多字节符号的第一 个bytes一定是 11xxxxxx,一个192到255之间的二进制数。接下来,从第三位开始,提供长度信息,第三位是0表示这个符号是2字节的,第三位开始每多一个1,字符占用的 bytes 数加一。utf-8 最多定义到了 6 字节字符,需要比 110xxxxx 这样的表示2字节的starter多 4 个 1,所以这个starter就是 1111110x,如上表所示。
再看看英文定义的标准吧,表达的同样的意思:

    The first byte of a multibyte sequence that represents a non-ASCII character is always in the range 0xC0 to 0xFD and it indicates how many bytes follow for this character. All further bytes in a multibyte sequence are in the range 0×80 to 0xBF. This allows easy resynchronization and makes the encoding stateless and robust against missing bytes.

真正的信息位(即,真正的charset字符集中的数字信息),是直接用二进制的方式,依顺序放在上面这个表的’x'上的。用我们中国程序员接触最多的汉字来说吧,它们的编码区间是在 U-00000800 – U-0000FFFF 之间的,从上面的表中可以查到,这个区间的 utf-8 编码是用三个字节来表示的(这就是 utf-8 编码的汉字会比每个字符占用2 bytes的 EUC-CN 编码的 gb2312 字符集的汉字使用更多储存空间的原因),还是用 口碑的”口”字举例吧,口字在 Unicode 中的编号是这样的:
口: 21475 == 0×53e3 ==  二进制 101001111100011

在 javascript 中,run这段代码(使用 firebug 的 console,或者编辑一个HTML将下列代码插入一对 script 标签之间):

    alert(‘\u53e3′);  //get ‘口’
    alert(escape(‘口’));  // get ‘%u53E3′
    alert(String.fromCharCode(‘21475′));  // get ‘口’
    alert(‘口’.charCodeAt(0));  // get ’21475‘
    alert(encodeURI(‘口’));  //get ‘%E5%8F%A3′

可以看到,string直接量可以用\u+十六进制 Unicode 码的形式得到字符 ‘口’,而fromCharCode 方法接受 10 进制的 Unicode 码,得到字符 ‘口’。

其中第二个alert得到的是 ‘%u7545′ , 这是一种不标准的Unicode编码,是属于 URI 的 Percent encoding 一部分,但这种使用方法已经正式被 W3C 拒绝了,任何一个 RFC中都没有这个标准,ECMA-262 标准中规定了 escape 的这种行为,估计也是暂时的。
比较有意思的是第五次alert得到的 ‘%E5%8F%A3′ 这是什么呢?怎么得到的呢?

这就是在URI上用的比较多的 Percent encoding,百分号编码,RFC 3986 标准中规定的。

RFC 3986 规定,Percent encoding的非保留字如下:

    Unreserved characters, per RFC 3986 (January 2005)
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
    a b c d e f g h i j k l m n o p q r s t u v w x y z
    0 1 2 3 4 5 6 7 8 9 – _ . ~

也就是说,这些字出现在 URI 中的时候,不进行编码,因为他们和URI的格式没有关系,只是表示原义的字符

另外,保留字如下:

    Reserved characters, per RFC 3986 (January 2005)
    ! * ‘ ( ) ; : @ & = + $ , / ? % # [ ]

这些字符,是有特殊意义的,如果在不代表那些特殊意义而代表原意的时候出现,必须经过编码,如下:

    Reserved characters after percent-encoding
    ! * ‘ ( ) ; : @ & = + $ , / ? % # [ ]
    %21 %2A %27 %28 %29 %3B %3A %40 %26 %3D %2B %24 %2C %2F %3F %25 %23 %5B %5D

而 % 号后面就是一个2位的十六进制数,这个数,就是 Unicode 的 UTF-8 编码的另一种表现形式。

让我们详细还原一下’口’ 字为什么是 ‘%E5%8F%A3′ 吧。

刚才我们谈到 ‘口’ 的 Unicode 编码 21475 的二进制形式是:
101001111100011

刚才我们又聊到,对于一个的汉字,它的UTF-8编码的形式是:
U-00000800 – U-0000FFFF:    1110xxxx 10xxxxxx 10xxxxxx

现在我们做个填空题,把 ‘口’ 二进制码切开填进去替换掉 x:
101001111100011 = ----0101 --001111 --100011
101001111100011 = 1110xxxx 10xxxxxx 10xxxxxx
第一个字节少一位,左边加个0补齐,得到:
11100101 10001111 10100011

让我们把这三个二进制数转换成16进制,并且加上百分号,运行如下javascript代码:

    alert(
    ‘%’ + parseInt(‘11100101′, 2).toString(16) +
    ‘%’ + parseInt(‘10001111′, 2).toString(16) +
    ‘%’ + parseInt(‘10100011′, 2).toString(16)
    )  // get ‘%e5%8f%a3′

怎么样,得到 %e5%8f%a3 了吧。

另外javascript的内置函数 encodeURI、decodeURI、encodeURIComponent、decodeURIComponent 就是进行的 Percent Encode,只是在对待 : / ; ?等特殊字符的时候有区别。

另外,再介绍一下 HTML 中的 Numeric character reference, NCR编码
相信大家都知道,HTML中的特殊字符是需要编码的,比如 & 需要被编码为: &  还有 ® 这样的特殊字符。其实HTML也是可以利用 Unicode 编码来显示任何一个字符的,编辑一个如下的html文件:

    <html>
    <body>
    &#21475;
    &#021475;
    &#x53e3;
    </body>
    </html>

结果就是三个“口”字。

还有一种常用的编码是 base64 编码,base64编码本来是为了在 email 这样的非纯 8-bit 的传输层传输二进制数据而设计出来的,这样就可以在 email 中传递二进制的附件。它用 a-z A-Z 0-9 +/= 这64个字符来表示原有的数据,并且将连续的三个字符编码为四个,长度增加33%。
这个编码方式在一些比较超前的 javascript 应用中比较常用,例如 这个超级玛丽游戏 ,它里面的音乐就是写 javascript 文件中的。例如 这个 利用 canvas 作图的例子,里面的头像也是写在 javascript 源代码中的。这就是 RFC 2397 规定的 data URIs 协议,Firefox 浏览器支持,IE8也开始部分支持了,利用 data URIs 和 base64 编码,我们可以不借助任何外来的音乐、图像等多媒体文件而创造出丰富的效果。

以上就是我想介绍的 javascript 和 html 中常用到的编码和原理,最后还想提到一句,很多的黑客行为都和编码有关,用编码后的代码来通过一些简单的过滤,如下js代码:

    var a = ‘口碑’;
    \u0061 = ‘koubei.com’;
    alert(a);  //get ‘koubei.com’

当然,黑客们会有更专业的方式来逃避过滤、注入代码(如 sql injection, XSS 攻击等)。

谢谢大家的阅读,我是 stauren, 雅虎口碑UED团队的前端开发工程师粽子,这是我第一次在Koubei的UED blog上发表文章,如果有错误的地方请大家指出。同时欢迎访问我的个人blog :  http://stauren.net, 并且提供在线 Hex、NCR、Percent encode、Base64编码解码工
分享到:
评论

相关推荐

    JavaScript完全自学宝典 源代码

    1.4.html 使用JavaScript对网页中的内容进行验证。 1.5.html HMTL中调用.js文件。 1.6.html 使用“”标记,实现的滚动字幕效果。 1.7.html 使用JavaScript实现简单的字幕滚动。 1.8.html 使用...

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    90、原生JavaScript常用的正则表达式大收集 91、原生JavaScript实现窗体改变事件resize的操作(兼容所以的浏览器) 92、原生JavaScript用正则清除空格分左右 93、原生JavaScript判断变量是否空值 94、原生JavaScript...

    JavaScript详解(第2版)

    2.1 HTML文档与JavaScript 24 2.2 语法细节 27 2.2.1 区分大小写问题 27 2.2.2 自由形式及保留字 27 2.2.3 语句及分号 28 2.2.4 注释 28 ... 2.2.5 〈script〉标签   2.3 生成HTML 并输出显示   ...

    javascript在线编码查询工具

    HTML中可使用 囍 表示 囍 字符编码表 名称 范围 数量 查看 汉字 19968~40869 20902 查看 常用符号、数字、字符 33~126 94 查看 数字 48~57 10 查看 大写字母 65~90 26 查看 小写字母 97~122 26 查看 ...

    Javascript 与正则表达式

    Javascript 与正则表达式: 一些常用的正则表达式示例: 1、匹配所有的正数:^[0-9]+$ 2、匹配所有的小数:^\-?[0-9]*\.?[0-9]*$ 3、匹配所有的整数:^\-?[0-9]+$ 4、提取信息中的中文字符串: [\u4e00-\u9fa5]* ;...

    程序天下:JavaScript实例自学手册

    第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 ...22.13 用JavaScript实现编码解码 22.14 创建带属性...

    Javascript 常用函数

    blink 方法 将 HTML 的 &lt;BLINK&gt; 标识添加到 String 对象中的文本两端。 bold 方法 将 HTML 的 &lt;B&gt; 标识添加到String 对象中的文本两端。 ceil 方法 返回大于或等于其数值参数的最小整数。 charAt 方法 返回位于...

    《程序天下:JavaScript实例自学手册》光盘源码

    第1章 页面特效 1.1 HTML页面反向显示 ...22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...

    基于HTML和JavaScript的智慧养老社区平台后台管理系统源码+sql数据库+项目说明.zip

    基于HTML和JavaScript的智慧养老社区平台后台管理系统源码+sql数据库+项目说明.zip 【资源介绍】 智慧化养老社区平台后端,采用Ruoyi作为脚手架 内置功能 用户管理:用户是系统操作者,该功能主要完成系统用户配置...

    WEB01_HTML:听生活编码讲座,学习和编写HTML-CSS-JavaScript

    WEB01_HTML (入门)我有一个要制作的应用程序,但...2.标签HTML中最重要的是标记。 通过使用标签,我们可以在Internet上搜索内容并接收信息。 (作为参考,有一个开始标记&lt;&gt;和一个结束标记&lt;/&gt;。)3.基本标签清除

    JavaScript笔记

    [removed]标签:页面中专门集中编写JavaScript的区域 js的方法定义:function方法名([参数列表]){ 方法体 [return 返回值] } 注意:js中的方法可以直接写在代码中,不需要“类”包裹 使用方法:方法名()--&gt;...

    包含一些前端规范的集合

    Javascript编码规范、Javascript编码规范 - ESNext补充篇、HTML编码规范、CSS编码规范。

    html-tools:Komodo插件可帮助进行HTML编码(1.1)

    此用于Komodo Edit / IDE的插件简化了手工编码HTML的某些处理。 各种工具要么用更麻烦HTML代码替换选定的文本,要么在某些情况下插入HTML代码段。 还有一些其他工具可帮助您设置页面和一些常用首选项。 您可以在...

    php网络开发完全手册

    12.3.1 在HTML中嵌入JavaScript 184 12.3.2 变量 185 12.3.3 注释 185 12.3.4 函数的定义与调用 186 12.3.5 条件语句 186 12.3.6 循环语句 189 12.3.7 对象 191 12.3.8 事件 192 12.4 PHP动态生成JavaScript代码 193...

    WEB前端助手(FeHelper)_v6.2.crx

    对当前网页进行Javascript、CSS、HTML编码规范的检测,包括文件是否压缩、标签是否正确闭合、cookie管理等等 页面性能检测 对当前页面的性能进行检测,如HTTP响应时间、页面渲染时间、是否启用gzip压缩等等 栅格规范...

    各种各样的手册打包(jquery,css,php,linux,smarty)

    NET Framework 4.0 常用类库参考手册(节选).NET Framework 4.0 常用类库参考手册(节选) NHibernate文档 php (2) php php5 PHP5面向对象编程 phplib php_manual_zh php中文函数手册 PHP编码规范 PHP设计模式介绍 ...

    JAVAWeb全课程笔记( html版)

    JavaScript总结 DOM总结 tomcat服务器 servlet基础 Request&Response编程 Cookie&Session XML语言 JSP技术入门 EL表达式语言 JSTL标签库: JSP标准标签库 MVC程序架构思想&案例 [总结]Path路径问题 [总结]JavaWeb...

    使用JavaScript进行基本图形操作与处理

    另外canvas还提供了常用的图像格式转换功能,可以使用JavaScript简单快捷地更改图像的编码方式。出于安全考虑,浏览器通常不允许处理跨域图像,但利用特殊的手段是可以突破这一限制的。解决处理跨域图像出现的安全...

    javascript入门笔记

    Javascript,简称为 JS,是一款能够运行在 JS解释器/引擎 中的脚本语言 JS解释器/引擎 是JS的运行环境: 1、独立安装的JS解释器 - NodeJS 2、嵌入在浏览器中的JS解释器 JS的发展史: 1、1992年 Nombas 开发...

Global site tag (gtag.js) - Google Analytics