前端开发中的字符编码

在前端开发过程中遇到各种编码，这些编码与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)); 

　　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与字符串的对照编码；

六、精彩案例

　　

// 为了控制台的演示方便, 变量没有添加 var 定义
// 实际编程中请避免

// 字符串
str = "中文";
// 获取字符
char0 = str.charAt(0); // "中"

// 数字编码值
code = str.charCodeAt(0); // 20013
// 编码互转
str0 = String.fromCharCode(code); // "中"

// 转为16进制数组
code16 = code.toString(16); // "4e2d"

// 变成字面量表示法
ustr = "\u"+code16; // "u4e2d"

// 包装为JSON
jsonstr = '{"ustr": "'+ ustr +'"}'; //'{"ustr": "u4e2d"}'

// 使用JSON工具转换
obj = JSON.parse(jsonstr); // Object {ustr: "中"}
//
ustr_n = obj.ustr; // "中"

七、小技巧

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

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

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