JavaScript字符串在传输过程中的编解码

水深无声 2022-05-18 01:18 169阅读 0赞

###### *最近更新时间：2018年7月27日17:45:57* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：字符串编解码

#### 编码规范 ####

<table> 
 <thead> 
  <tr> 
   <th>编码字符集</th> 
   <th>大小</th> 
   <th>支持字符集</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ASCII</td> 
   <td>1个字节</td> 
   <td>英文</td> 
  </tr> 
  <tr> 
   <td>Unicode</td> 
   <td>2个字节（生僻字4个）</td> 
   <td>所有语言</td> 
  </tr> 
  <tr> 
   <td>UTF-8</td> 
   <td>1-6个字节(英文字母1个字节，汉字3个字节，生僻字4-6个字节)</td> 
   <td>所有语言</td> 
  </tr> 
 </tbody> 
</table>

###### 编码规则历史 ######

*  编码字符集，简称字符集，如Unicode(UTF-8、UTF-16、UTF-32)、ASCII

> ASCII码一共规定了128个字符的编码，比如空格"SPACE"是32（二进制00100000），大写的字母A是65（二进制01000001）。这128个符号（包括32个不能打印出来的控制符号），只占用了一个字节的后面7位，最前面的1位统一规定为0。  
> 中国制定GB2312编码编中文，日本制定Shift\_JIS编码编日文，韩国制定编码Euc-kr编韩文，在多语言混合的文本中，显示出乱码。  
> 因此，Unicode应运而生。Unicode把所有语言都统一到一套编码里，这样就不会再有乱码问题了，现代操作系统和大多数编程语言都直接支持Unicode。  
> 新的问题又出现了：如果统一成Unicode编码，乱码问题从此消失了。但是，如果你写的文本基本上全部是英文的话，用Unicode编码比ASCII编码需要多一倍的存储空间，在存储和传输上就十分不划算。  
> 所以，本着节约的精神，又出现了把Unicode编码转化为“可变长编码”的UTF-8编码。UTF-8编码把一个Unicode字符根据不同的数字大小编码成1-6个字节，常用的英文字母被编码成1个字节，汉字通常是3个字节，只有很生僻的字符才会被编码成4-6个字节。如果你要传输的文本包含大量英文字符，用UTF-8编码就能节省空间。  
> UTF-8编码有一个额外的好处，就是ASCII编码实际上可以被看成是UTF-8编码的一部分，所以，大量只支持ASCII编码的历史遗留软件可以在UTF-8编码下继续工作。

[参考一][Link 1]  
[参考二][Link 2]

#### base64 ####

> Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。  
> Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。  
> 编码为Base64的字符串具有不可读性，需要解码后才能阅读。

> window.btoa(str) 创建一个 base-64 编码的字符串。该方法使用 “A-Z”, “a-z”, “0-9”, “+”, “/” 和 “=” 字符来编码字符串。  
> window.atob(encodedStr) 解码使用 base-64 编码的字符串。

*  原生JS实现其编码与解码(老的浏览器不支持btoa()和atob()) TODO

[待完善][Link 3]  
[待完善][Link 4]  
[参考一][Link 5]  
[参考二][Link 6]

#### ASCII标准表 ####

<table> 
 <thead> 
  <tr> 
   <th>Bin</th> 
   <th>Oct</th> 
   <th>Dec</th> 
   <th>Hex</th> 
   <th>缩写/字符</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>01000001 - 01011010</td> 
   <td>101 - 132</td> 
   <td>65 - 90</td> 
   <td>41 - 5A</td> 
   <td>A - Z</td> 
   <td>大写字母A - Z</td> 
  </tr> 
  <tr> 
   <td>01100001 - 01111010</td> 
   <td>141 - 172</td> 
   <td>97 - 122</td> 
   <td>61 - 7A</td> 
   <td>a - z</td> 
   <td>小写字母a - z</td> 
  </tr> 
 </tbody> 
</table>

#### 前后端通信采用buffer传输数据的方案 ####

//buffer是类二进制数组，以number类型存储数据在类似为数组的数据结构中，buffer.byteLength是长度
    var buffer = new Uint8Array(len);//8位无符号整型数组
    buffer[i] = num;//num必须是数字，其他任何类型无法写入，如果强行写入，存入的是0
    //需求一：传递字符串，编解码为Unicode码
    //编码
    var data = "wanshaobo";
    var buffer = new Uint8Array(9);
    data.charCodeAt(i);//119 97 110 ...
    console.log(buffer);//[119,97,110,...]
    //解码
    var data = [119,97,110,...];
    data.forEach((item)=>{ 
    	String.fromCharCode(item);//"w","a","n",...
    	//String.fromCharCode.call(null, item);
    });
    String.fromCharCode.apply(null, data);//"wan..."

#### 规范化方法 ####

// ArrayBuffer转为字符串，参数为ArrayBuffer对象
    function ab2str(buf) { 
      return String.fromCharCode.apply(null, new Uint8Array(buf));
    }
    
    // 字符串转为ArrayBuffer对象，参数为字符串
    function str2ab(str) { 
      var buf = new ArrayBuffer(str.length); // 每个字符占用2个字节
      var bufView = new Uint8Array(buf);
      for (var i = 0, strLen = str.length; i < strLen; i++) { 
        bufView[i] = str.charCodeAt(i);
      }
      return buf;
    }

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Link 1]: https://www.cnblogs.com/kingstarspe/p/ASCII.html
[Link 2]: https://www.cnblogs.com/zhaokunbokeyuan256/p/7680337.html
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#readAsArrayBuffer%28%29
[Link 5]: https://baike.baidu.com/item/base64
[Link 6]: https://blog.csdn.net/yuchenli923/article/details/70170596
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460