• 前端开发中的字符编码


    在前端开发过程中遇到各种编码,这些编码与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作为中转

  • 相关阅读:
    局域网无法访问vmware虚拟机WEB服务器解决办法
    zipimport.ZipImportError: can't decompress data; zlib not available 解决办法
    如何在win下使用linux命令
    《redisphp中文参考手册》php版
    Python关键字参数与非关键字参数(可变参数)详解
    Python与 PHP使用递归建立多层目录函数
    第一场个人图论专题
    poj_2762,弱连通
    word宏的问题
    fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
  • 原文地址:https://www.cnblogs.com/fqlGlog/p/7246386.html
Copyright © 2020-2023  润新知