在前端开发过程中遇到各种编码,这些编码与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与字符串的对照编码;
六、精彩案例
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; // "中"
七、小技巧
字符串转base64: window.btoa(string)
base64转字符串: window.atob(base64)
针对中文乱码可以使用encodeURIComponent/decodeURIComponent作为中转