由atob引发的学习
在浏览器window对象中,按照首字母排序,第一个方法是alert
(用于弹窗提示)。第二个是atob
,还有一个和它对应的方法——btoa
。
其中
a
表示ASCII
码,b
表示base64
什么是ASCII
码
ASCII ((American Standard Code for Information Interchange): 美国信息交换标准代码)是基于拉丁字母的一套电脑编码系统,主要用于显示现代英语和其他西欧语言。它是最通用的信息交换标准,并等同于国际标准ISO/IEC 646。ASCII第一次以规范标准的类型发表是在1967年,最后一次更新则是在1986年,到目前为止共定义了128个字符。
ASCII 码使用指定的7 位或8 位二进制数组合来表示128 或256 种可能的字符。
标准ASCII
码
标准ASCII 码也叫基础ASCII码,使用7 位二进制数(剩下的1位二进制为0)来表示所有的大写和小写字母,数字0 到9、标点符号,以及在美式英语中使用的特殊控制字符。
大小规则
常见ASCII码的大小规则:09<AZ<a~z。
- 数字比字母要小。如 “7”<“F”;
- 数字0比数字9要小,并按0到9顺序递增。如 “3”<“8” ;
- 字母A比字母Z要小,并按A到Z顺序递增。如“A”<“Z” ;
- 同个字母的大写字母比小写字母要小32。如“A”<“a” 。
几个常见字母的ASCII码大小: “A”为65;“a”为97;“0”为 48。
JS中ASCII码转换
将字符转为ASCII码(charCodeAt)
JS中,String.prototype.charCodeAt()方法返回 0
到 65535
之间的整数,表示给定索引处的 UTF-16 代码单元。
语法
str.charCodeAt(index)
参数
-
index
一个大于等于
0
,小于字符串长度的整数。如果不是一个数值,则默认为0
。
返回值
指定 index
处字符的 UTF-16 代码单元值的一个数字;如果 index
超出范围,charCodeAt()
返回 NaN
。
开头的 128 个 Unicode 编码单元和 ASCII 字符编码一样。
将ASCII码转为字符(fromCharCode)
静态 String.fromCharCode()
方法返回由指定的 UTF-16 代码单元序列创建的字符串。
语法
String.fromCharCode(num1[, ...[, numN]])
参数
-
num1, ..., num*N*
一系列 UTF-16 代码单元的数字。范围介于
0
到65535
(0xFFFF
)之间。大于0xFFFF
的数字将被截断。不进行有效性检查。
返回值
一个长度为 N
的字符串,由 N
个指定的 UTF-16 代码单元组成。
什么是base64
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。
为什么会有base64
由于HTTP协议是文本协议,所以在HTTP协议下传输二进制数据需要将二进制数据转换为字符数据。然而直接转换是不行的。因为网络传输只能传输可打印字符。
问: 什么是“可打印字符”呢?
答: 在ASCII码中规定,031、128这33个字符属于控制字符,32127这95个字符属于可打印字符,也就是说网络传输只能传输这95个字符,不在这个范围内的字符无法传输。
问: 那么该怎么才能传输其他字符呢?
答: 其中一种方式就是使用Base64。Base64一般用于在HTTP协议下传输二进制数据。
base64实现原理
Base64的索引与对应字符的关系如下表所示:
base64表
如果将索引转换为对应的二进制数据的话需要至多6个Bit(2^6=64)。然而ASCII码需要8个Bit来表示,那么怎么使用6个Bit来表示8个Bit的数据呢?
6个Bit当然不能存储8个Bit的数据,但是4*6
个Bit可以存储3*8
个Bit的数据啊!
我们以编码 Man
为例,来直观的感受一下编码过程。Man
由 M、a 和 n 3 个字符组成,它们对应的 ASCII 码为 77、97 和 110。
Man
这个字符串的长度刚好是 3,我们可以用 4 个 base64 单元来表示。但如果待编码的字符串长度不是 3 的整数倍时,应该如何处理呢?
如果要编码的字节数不能被 3 整除,最后会多出 1 个或 2 个字节,那么可以使用下面的方法进行处理:先使用 0 字节值在末尾补足,使其能够被 3 整除,然后再进行 base64 的编码。
以编码字符 A 为例,其所占的字节数为 1,不能被 3 整除,需要补 2 个字节,具体如下图所示:
base64 编码的应用
在 HTML 中嵌入 base64 编码的图片
在编写 HTML 网页时,对于一些简单图片,通常会选择将图片内容直接内嵌在网页中,从而减少不必要的网络请求,但是图片数据是二进制数据,该怎么嵌入呢?绝大多数现代浏览器都支持一种名为 Data URLs
的特性,允许使用 base64 对图片或其他文件的二进制数据进行编码,将其作为文本字符串嵌入网页中。
但需要注意的是:如果图片较大,图片的色彩层次比较丰富,则不适合使用这种方式,因为该图片经过 base64 编码后的字符串非常大,会明显增大 HTML 页面的大小,从而影响加载速度。
保存base64图片
这里以node为例
const fs = require('fs')
// 图片base64字符串
const imgData = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...`
// 去掉base64的头
let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
// 转换为buffer
let dataBuffer = Buffer.from(base64Data, 'base64');
// 这里是png图片的base64字符串
fs.writeFile("image.png", dataBuffer, err => console.log(err))
JS中base64编码和解码
在 JavaScript 中,有两个函数被分别用来处理解码和编码 base64 字符串:
- btoa():该函数能够基于二进制数据 “字符串” 创建一个 base64 编码的 ASCII 字符串。
- atob(): 该函数能够解码通过 base64 编码的字符串数据。
atob、btoa的实现
直接上polyfill吧
// Polyfill from https://github.com/MaxArt2501/base64-js/blob/master/base64.js
(function() {
// base64 character set, plus padding character (=)
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// Regular expression to check formal correctness of base64 encoded strings
b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;
window.btoa = window.btoa || function(string) {
string = String(string);
var bitmap, a, b, c,
result = "",
i = 0,
rest = string.length % 3; // To determine the final padding
for (; i < string.length;) {
if ((a = string.charCodeAt(i++)) > 255 ||
(b = string.charCodeAt(i++)) > 255 ||
(c = string.charCodeAt(i++)) > 255)
throw new TypeError("Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.");
bitmap = (a << 16) | (b << 8) | c;
result += b64.charAt(bitmap >> 18 & 63) + b64.charAt(bitmap >> 12 & 63) +
b64.charAt(bitmap >> 6 & 63) + b64.charAt(bitmap & 63);
}
// If there's need of padding, replace the last 'A's with equal signs
return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result;
};
window.atob = window.atob || function(string) {
// atob can work with strings with whitespaces, even inside the encoded part,
// but only \t, \n, \f, \r and ' ', which can be stripped.
string = String(string).replace(/[\t\n\f\r ]+/g, "");
if (!b64re.test(string))
throw new TypeError("Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.");
// Adding the padding if missing, for semplicity
string += "==".slice(2 - (string.length & 3));
var bitmap, result = "",
r1, r2, i = 0;
for (; i < string.length;) {
bitmap = b64.indexOf(string.charAt(i++)) << 18 | b64.indexOf(string.charAt(i++)) << 12 |
(r1 = b64.indexOf(string.charAt(i++))) << 6 | (r2 = b64.indexOf(string.charAt(i++)));
result += r1 === 64 ? String.fromCharCode(bitmap >> 16 & 255) :
r2 === 64 ? String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255) :
String.fromCharCode(bitmap >> 16 & 255, bitmap >> 8 & 255, bitmap & 255);
}
return result;
};
})()
这里出现了一些不太常用的运算符 <<
、 >>
、 |
、&
运算符 | 用法 | 描述 |
---|---|---|
按位与( AND) | a & b |
对于每一个比特位,只有两个操作数相应的比特位都是1时,结果才为1,否则为0。 |
按位或(OR) | a | b |
对于每一个比特位,当两个操作数相应的比特位至少有一个1时,结果为1,否则为0。 |
按位异或(XOR) | a ^ b |
对于每一个比特位,当两个操作数相应的比特位有且只有一个1时,结果为1,否则为0。 |
按位非(NOT) | ~ a |
反转操作数的比特位,即0变成1,1变成0。 |
左移(Left shift) | a << b |
将 a 的二进制形式向左移 b (< 32) 比特位,右边用0填充。 |
有符号右移 | a >> b |
将 a 的二进制表示向右移 b (< 32) 位,丢弃被移出的位。 |
无符号右移 | a >>> b |
将 a 的二进制表示向右移 b (< 32) 位,丢弃被移出的位,并使用 0 在左侧填充。 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体