阅读 199

UTF-8如何转base64编码(base64编码的实现原理)

电脑中的存储是二进制编码,utf-8和base64是不同的编码方式,今天了解一下base64是怎么转换的,它的编码原理是啥

- utf-8和base64编码的区别

utf-8中的汉字是3个字节,每个字节8个位 3*8= 24 一共24个位

base64编码是一个汉字占了 4个字节,使用6个位的长度来保存这些位,8位不足则前方补俩0

- 如何将 utf-8编码 转成 base64编码

例如:使用 node 实现将 "晓露xl" 这几个字转成 base64编码

base64编码对照表

image.png

实现步骤:

> Buffer.from("晓露xl")
<Buffer e6 99 93 e9 9c b2 78 6c>

// 晓  e6 99  93
// 露 e9 9c b2
// x 78
// l 6c

// node中是16进制,需要先转成2进制
// 先转 "晓" 这个字
> (0xe6).toString(2)
'11100110'
> (0x99).toString(2)
'10011001'
> (0x93).toString(2)
'10010011'

// 拼接字符串
// '11100110'+ '10011001' +'10010011'

// 二进制字符串拼接之后  按照6位去分割
// '111001' + '101001'+'100110'+'010011'

// 高位补 0,凑足8位
// '00111001' + '00101001'+'00100110'+'00010011'

// 接下来把2进制转成10进制

> (0b00111001).toString(10)
'57'
> (0b00101001).toString(10)
'41'
> (0b00100110).toString(10)
'38'
> (0b00010011).toString(10)
'19'

//接下来 根据上面的base64编码对照表来对

57 -> 5
41 -> p
38 -> m
19 -> T
// 拼接起来的结果是 '5pmT'
// 下面验证下结果,是对的

> new Buffer("晓").toString('base64')
'5pmT'
// 之后剩下的字太长了,不练习了---,按照上面的步骤挨个做就行
复制代码

- 步骤总结:

  1. node 获取 16进制
  2. 转成2进制
  3. 二进制拼接之后,按照6位分割成4串字符串
  4. 字符串高位补0凑齐8位
  5. 二进制转成10进制
  6. 对照base64对照表进行查询,得到对应的结果
  7. 拼接对应的结果

- 下面,聊聊base64表能保存多少字符

base64需要6个位,最大可表示的数字是 0b111111 = 63,最小可表示0b000000 = 0,总共64个字符,和上面的base64编码表示对应的,保存大小写字符+/这64个字符

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
+ / 
复制代码

base64原理总结 到了这一步,可以看出来,base64只是使用6个位来映射对应的64个字符,它和utf-8比起来,1bit只有6位有效数字,浪费了2个位

为什么使用base64这种浪费字节的方式

(以下来这段自网上参考链接)

我们知道在计算机中的字节共有256个组合,对应就是ascii码,而ascii码的128~255之间的值是不可见字符。而在网络上交换数据时,比如说从A地传到B地,往往要经过多个路由设备,由于不同的设备对字符的处理方式有一些不同,这样那些不可见字符就有可能被处理错误,这是不利于传输的。所以就先把数据先做一个Base64编码,统统变成可见字符,这样出错的可能性就大降低了。
对证书来说,特别是根证书,一般都是作Base64编码的,因为它要在网上被许多人下载。电子邮件的附件一般也作Base64编码的,因为一个附件数据往往是有不可见字符的。 使用base64的初衷。是为了方便把含有不可见字符串的信息用可见字符串表示出来,以便复制粘贴;


base64使用场景举例

一个xml当中包含另一个xml数据,此时如果将xml数据直接写入显然不合适,将xml进行适当编码存入较为方便,事实上xml当中的字符一般都是可见字符(0-127之间),但是由于中文的存在,可能存在不可见字符,直接将字符打印在外层xml的数据中显然不合理,那么怎么办呢?可以使用base64进行编码,然后存入xml,解码反之其实还有个办法,将byte的值写在xml当中,空格或者,分开,这样也可以将byte数据传入,不过这样更浪费空间,并且不易保存.另一个,比如http协议当中的key value字段,必须进行URLEncode 不然出现的等号可能使解析失败 空格也会使http请求解析出现问题,比如 请求行就是以空格来划分的 POST /guowuxin/hehe HTTP/1.1 又比如有些文本协议不支持不可见字符的传递,只能用大于32的可见字符来传递信息(协议规定)

前端工作中使用base64的场景。

比较小的图片文件,可以转成base64编码,优点:

可以减少页面http请求次数,优化前端性能
避免跨域问题
复制代码

例如:

base64只是在图片较小的时候适用,因为它会增大占用的空间

IE7及以下浏览器不支持data url
图片太大编码字节过长,占用的空间会超过图片,反而会得不偿失,一般适用于小于3k的图片
如果把大图片编码到 html / css 中,会造成页面体积显著增加,明显影响网页的打开速度。
复制代码

参考链接:www.zhihu.com/question/36…

blog.csdn.net/lishuai_it_…

文章分类
前端
文章标签