前端开发中的字符编码

在前端开发过程中遇到各种编码，这些编码与ASCII有什么关系？这些编码又具体运用在哪些方面？之前都没有系统的总结过。在这儿学习总结一下：

参考网站：http://developer.51cto.com/art/201605/511147.htm

编码基础：

字符码一般用十六进制来表示

ASCII编码是是一个7位二进制数，有2的7次方个，共128种类型，占一个字节（8位），最高位用奇偶校验位。

　　ASCII编码：数字 < 大写字母 < 小写字母，charCodeAt编码，fromCharCode解码

Unicode编码是ASCII编码的补充，占用两个字节，它前128个字符就是ASCII码，之后是扩展码。

　　通过string.charCodeAt(ind).toString(16)编码，想要把Unicode转换为字符串(解码)在前面加u

//中文互转
// 转为unicode 编码  
function encodeUnicode(str) {  
    var res = [];  
    for ( var i=0; i<str.length; i++ ) {  
    res[i] = ( "00" + str.charCodeAt(i).toString(16) ).slice(-4);  
    }  
    return "\u" + res.join("\u");  
}  
/*
*前端字符串拼接如果遇到反斜杠，就是转义。根据需求看是否需要转义，如果不需要转义就把反斜杠本身转义
*/
  
// 解码  
function decodeUnicode(str) {  
    str = str.replace(/\/g, "%");  
    return unescape(str);  
}

学习过程的疑问：

1、什么是宽字节？

2、url与uri的区别？

一、URL编码：

　　https://www.cnblogs.com/z-one/p/6542955.html

　　escape/unescape encodeURI/decodeURI encodeURIComponent/decodeURIComponent

　　escape/unescape 针对宽字节做Unicode编码，并对码值做16进制编码。example: 对汉字编码会形成形如”uxxxx”的结果；

　　 encodeURI/decodeURI与encodeURIComponent/decodeURIComponent首先针对宽字节进行utf-8编码,然后针对编码结果进行“％”替换，得到结果。

　　（将非英文字符(这里考虑下，为什么是非英文字符？)先转为UTF8的字节码，然后前面加个%进行拼接）

　　Unicode编码实现：

var decToHex = function(str) {  
    var res=[];  
    for(var i=0;i < str.length;i++)  
        res[i]=("00"+str.charCodeAt(i).toString(16)).slice(-4);  
    return "\u"+res.join("\u");  
}  
var hexToDec = function(str) {  
    str=str.replace(/\/g,"%");  
    return unescape(str);  
}  
var str=decToHex("
");  
alert("编码后："+str+"

解码后："+hexToDec(str));

View Code

　　utf-8编码的实现：

　　参考：http://www.jb51.net/article/87418.htm

二、base64编码：

　　base64编码在前端一般用于图片或者icon编码；

　　在大多数浏览器中都提供了ASCII字符的base64位编码函数，即window.btoa();需要提供一个非宽字节的编码参数；

　　对中文进行编码：

　　function unicodeToBase64(s){ return window.btoa(unescape(encodeURIComponent(s))) }

三、前端UTF8编码与后台GBK编码的兼容：

　　目前前端大都采用UTF8进行编码，不管是html、js抑或是css，而后端则由于历史原因大都采用GBK或GB2312进行解码，因此前端通过 parameter传递的URL编码的字符串就不可能直接在后台进行解码，为了更好的兼容性，前端可进行两次URL编码，即 encodeURIComponent（encodeURIComponent（“中国”）），这样后端接收到参数后，先使用GBK或GB2312解码，得到了UTF8编码后再使用UTF8解码即可。两次编码主要是利用“ASC字符使用GBK或GB2312编码不变”的特点完成，富有技巧。

四、HTML实体编码与进制编码

　　体编码有两种形式&实体名;或&entity_number;，由于浏览器对&实体名;的兼容性有差别，因此最好采用实体号的形式编码。

五、js编码

　　fromCharCode与charCodeAt，注意与chartAt与indexOf的区别（这个是当前字符串的索引与对应字符）;

　　这个编码是ASCLL与字符串的对照编码；

六、精彩案例

 1 // 为了控制台的演示方便, 变量没有添加 var 定义
 2 // 实际编程中请避免
 3 
 4 // 字符串
 5 str = "中文";
 6 // 获取字符
 7 char0 = str.charAt(0); // "中"
 8 
 9 // 数字编码值
10 code = str.charCodeAt(0); // 20013
11 // 编码互转
12 str0 = String.fromCharCode(code); // "中"
13 
14 // 转为16进制数组
15 code16 = code.toString(16); // "4e2d"
16 
17 // 变成字面量表示法
18 ustr = "\u"+code16; // "u4e2d"
19 
20 // 包装为JSON
21 jsonstr = '{"ustr": "'+ ustr +'"}'; //'{"ustr": "u4e2d"}'
22 
23 // 使用JSON工具转换
24 obj = JSON.parse(jsonstr); // Object {ustr: "中"}
25 //
26 ustr_n = obj.ustr; // "中"

View Code

七、小技巧

字符串转base64： window.btoa(string)

base64转字符串: window.atob(base64)

针对中文乱码可以使用encodeURIComponent/decodeURIComponent作为中转