JavaScript字符集编码与解码机制详解

字符集基础概念

一、字符集

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采用1至4个字节对每个字符进行编码，它是ASCII的超集，因此现有的ASCII文本无需转换即可直接使用。

浏览器中的进制表示

二、浏览器进制

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

在HTML中，十进制编码可使用“8”的形式表示，而十六进制则使用“Z”，即在十进制基础上增加前缀“x”。十六进制码中额外包含a至f这6个字符，用于表示数值10至15。

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

CSS兼容HTML中的进制表示形式。此外，十六进制在CSS中还可以使用“\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编码函数对比

三、浏览器编码

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