Base64编码原理解析

文章目录

  • 一、Base64
    • Base64编码的原理如下:
      • 以字符串"hello world"为例,它的ASCII码为(下面👇是ASCII码对照表):
      • 将这些ASCII码转换为二进制(对照上表):
      • 将上述二进制数据分成每6位一组:
  • 二、javascript中 base64 编码与解码的方式
  • 总结


一、Base64

Base64编码是一种将二进制数据转换成ASCII字符的编码方式。它将每3个字节的二进制数据分成4个6位的组,然后将这些6位的值转换成可打印的ASCII字符。编码后的数据长度通常会比原始数据多出1/3。

Base64编码的原理如下:

  1. 将需要编码的数据(原始数据)分割成每3个字节一组(每个字节有8位),即24位。
  2. 将这24位数据分成4个6位的组。如果原始数据长度不是3的倍数,会有1或2个字节剩余,需要进行补零操作。
  3. 将每个6位的组转换为一个Base64字符。Base64字符集由A-Z、a-z、0-9、+和/共64个字符组成。

以字符串"hello world"为例,它的ASCII码为(下面👇是ASCII码对照表):

104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100

请添加图片描述

将这些ASCII码转换为二进制(对照上表):

01101000, 01100101, 01101100, 01101100, 01101111, 00100000, 01110111, 01101111, 01110010, 01101100, 01100100

将上述二进制数据分成每6位一组:

011010 010110 010101 101100 011011 000110 111100 100000 011101 110110 …

我们把前面2个拿来分析下原理,在 JavaScript 中,可以使用 parseInt 函数将二进制字符串转换为十进制数值,所以有下面的结果26,6 其他结果类似推导

let binary = '011010';
let decimal = parseInt(binary, 2);console.log(decimal); // 输出 26

011010 -> 26
000110 -> 6

转换的依据是Base64编码规则,其中将每6位二进制数转换为一个Base64字符。Base64字符集包含A-Z、a-z、0-9、+和/共64个字符。

将二进制数转换为Base64字符的步骤如下:

  1. 将6位二进制数转换为十进制数。
  2. 根据十进制数对应的字符在Base64字符集中找到对应的字符。
    在这里插入图片描述

根据上述步骤,可以得到:
011010 -> 26 -> ‘a’
000110 -> 6 -> ‘G’

因此,上述6位一组的数据转换为Base64字符是’aG’。

将上述6位一组的数据转换为Base64字符:
aGVsbG8gd29ybGQ=

所以,“hello world"字符串的Base64编码结果是"aGVsbG8gd29ybGQ=”

二、javascript中 base64 编码与解码的方式

在JavaScript中,可以使用btoa()函数进行Base64编码,使用atob()函数进行Base64解码。

编码示例:

let str = 'Hello World';
let encodedStr = btoa(str);
console.log(encodedStr); // "SGVsbG8gV29ybGQ="

解码示例:

let encodedStr = "SGVsbG8gV29ybGQ=";
let decodedStr = atob(encodedStr);
console.log(decodedStr); // "Hello World"

需要注意的是,btoa()atob()函数只能处理ASCII字符,如果需要编码和解码非ASCII字符,可以使用encodeURIComponent()decodeURIComponent()函数。

let str = '你好,世界';
let encodedStr = btoa(encodeURIComponent(str));
console.log(encodedStr); // "JUU0JUJEJUQwJUU1JUJFJUE2JUU3JTk1JThDJUU4JUJGJUE5"let encodedStr = "JUU0JUJEJUQwJUU1JUJFJUE2JUU3JTk1JThDJUU4JUJGJUE5";
let decodedStr = decodeURIComponent(atob(encodedStr));
console.log(decodedStr); // "你好,世界"

另外,还可以使用第三方库如Buffer来进行Base64编码和解码。

编码示例:

const Buffer = require('buffer').Buffer;let str = 'Hello World';
let encodedStr = Buffer.from(str).toString('base64');
console.log(encodedStr); // "SGVsbG8gV29ybGQ="

解码示例:

const Buffer = require('buffer').Buffer;let encodedStr = "SGVsbG8gV29ybGQ=";
let decodedStr = Buffer.from(encodedStr, 'base64').toString();
console.log(decodedStr); // "Hello World"

总结

今天的内容,简单介绍什么是base64编码以及它编码的原理。接着举例了前端使用base64编码/解码的方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/631838.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flink的KeyedProcessFunction基于Event Time和Process Time的定时器用法实例分析

FLink处理函数简介 在Flink底层,我们可以不定义任何具体的算子(比如 map,filter,或者 window),而只是提炼出一个统一的【处理】(process)操作——它是所有转换算子的一个概括性的表…

一键式Excel分词统计工具:如何轻松打包Python脚本为EXE

一键式Excel分词统计工具:如何轻松打包Python脚本为EXE 写在最前面需求分析直接用Python打包为什么大?为什么要使用conda环境? 将Python脚本打包为一个独立的应用程序1. 编写Python脚本:初步功能实现2. 初步图形用户界面&#xff…

Spark基础学习--基础介绍

1. Spark基本介绍 1.1 定义 Spark是可以处理大规模数据的统一分布式计算引擎。 1.2 Spark与MapReduce的对比 在之前我们学习过MapReduce,同样作为大数据分布式计算引擎,究竟这两者有什么区别呢? 首先我们回顾一下MapReduce的架构&#xf…

CC工具箱使用指南:【三调名称转用地用海名称】

一、简介 三调地类和用地用海地类之间有点相似但并不一致。 在做规划时,拿到的三调,都需要将三调地类转换为用地用海地类,然后才能做后续的工作。 一般情况下,三调转用地用海存在【一对一,多对一和一对多】3种情况。…

JWT渗透姿势一篇通

文章前言 企业内部产品应用使用JWT作为用户的身份认证方式,在对应用评估时发现了新的关于JWT的会话安全带来的安全问题,后期再整理时又加入了之前遗留的部分JWT安全问题,至此汇总成一篇完整的JWT文章 简单介绍 JWT(JSON Web Token)是一种用…

直播间的秒杀狂热背后,猫眼电影如何接住10w+并发运营活动?

“倒数,5、4、3、2、1” “10万张!” “20秒没了” 上周末,张家辉和导演马浴柯带着新电影《怒潮》上了疯狂小杨哥的直播间,人数一度冲破80万人。 这次直播,是猫眼电影为新电影《怒潮》准备的一次宣传活动。 随着小…

洛谷P1161 开灯

这倒也是水题&#xff0c;我们可以建立一个数组&#xff0c;数组的下标就是编号&#xff0c;我们要注意的是浮点数乘法的结果要转化成整数&#xff0c;才能当做下标&#xff0c;因为题目给的是整数编号。 # include <stdio.h> int main() {int a[1000000] { 0 }, n, t,…

【linux】linux系统安装与更新软件

前言 linux系统安装软件有许多的方式&#xff0c;本文列举的是类似于windows从应用商店安装软件的方法。也是最常用最省事的方法。 但是呢linux系统是有许多发行版本的&#xff0c;不同版本的命令不同&#xff0c;但语法基本是一模一样。 概念插入 windows系统中&#xff0c…

IPv6自动隧道---6to4隧道

IPv6 over IPv4自动隧道特点 由于IPv4兼容IPv6隧道要求每一个主机都要有一个合法的IP地址,而且通讯的主机要支持双栈、支持IPv4兼容IPv6隧道,不适合大面积部署。目前该技术已经被6to4隧道所代替。 6to4隧道 集手动隧道和自动隧道的优点于一身,提出6to4的目的是为IPv4网络…

Linux如何创建文件

使用touch命令&#xff1a;使用touch命令可以创建一个新文件&#xff0c;如果文件已经存在&#xff0c;则只更新其访问时间和修改时间。例如&#xff0c;要创建一个名为test.txt的文件&#xff0c;请在终端中输入以下命令&#xff1a; touch test.txt使用echo命令&#xff1a;使…

【Spring源码分析】从源码角度去熟悉依赖注入(一)

从源码角度去熟悉依赖注入 一、全局出发引出各种依赖注入策略二、Autowired依赖注入源码分析属性注入源码分析&#xff08;AutowiredFieldElement.inject&#xff09;方法注入源码分析&#xff08;AutowiredMethodElement.inject&#xff09;流程图 其实在上篇阐述非懒加载单例…

UE5 独立程序的网络TCP/UDP服务器与客户端基础流程

引擎源码版&#xff0c;复制\Engine\Source\Programs\路径下的BlankProgram空项目示例。 重命名BlankProgram&#xff0c;例如CustomTcpProgram&#xff0c;并修改项目名称。 修改.Build.cs内容 修改Target.cs内容 修改Private文件夹内.h.cpp文件名并修改.cpp内容 刷新引擎 …

模拟StopWatch改写的一款耗时调试工具

StopWatch在单个文件的单个方法中确时还蛮好用的&#xff0c;但跨多个文件&#xff0c;多个方法的同一线程内调试就有明显的不舒服。一是要建立ThreadLocal共享StopWatch的实例。二是StopWatch的start和stop必须形成闭合。在方法嵌套的场景。比如要查看大方法执行时间&#xff…

性能测试中的基准测试

在性能测试中有一种测试类型叫做基准测试。这篇文章&#xff0c;就聊聊关于基准测试的一些事儿。 1、定义 通过设计合理的测试方法&#xff0c;选用合适的测试工具和被测系统&#xff0c;实现对某个特定目标场景的某项性能指标进行定量的和可对比的测试。 2、特质 ①、可重…

ChatGPT 如何解决 “Something went wrong. lf this issue persists ….” 错误

Something went wrong. If this issue persists please contact us through our help center at help.openai.com. ChatGPT经常用着用着就出现 “Something went wrong” 错误&#xff0c;不管是普通账号还是Plus账号&#xff0c;不管是切换到哪个节点&#xff0c;没聊两次就报…

Unity3D代码混淆方案详解

背景 Unity引擎使用Mono运行时&#xff0c;而C#语言易受反编译影响&#xff0c;存在代码泄露风险。本文通过《QQ乐团》项目实践&#xff0c;提出一种适用于Unity引擎的代码混淆方案&#xff0c;以保护代码逻辑。 引言 在Unity引擎下&#xff0c;为了防止代码被轻易反编译&a…

Vue created()和 activated()区别和作用调用顺序

目录 作用 区别 举个例子 调用顺序 作用 简单说都是用于页面初始化&#xff0c;土话说一进来页面&#xff0c;去进行数据加载或调用方法的 区别 首先activated 钩子只适用于被 <keep-alive> 包裹的组件。对于不被 <keep-alive> 包裹的组件&#xff0c;activate…

CSS实现的 Loading 效果

方式一、纯CSS实现 代码&#xff1a;根据需要复制 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>CSS Animation Library for Developers and Ninjas</title><style>/* ---------------…

2024年甘肃省职业院校技能大赛信息安全管理与评估 样题三 模块一

竞赛需要完成三个阶段的任务&#xff0c;分别完成三个模块&#xff0c;总分共计 1000分。三个模块内容和分值分别是&#xff1a; 1.第一阶段&#xff1a;模块一 网络平台搭建与设备安全防护&#xff08;180 分钟&#xff0c;300 分&#xff09;。 2.第二阶段&#xff1a;模块二…

ILI2130触控IC驱动

概述 ili2130触控网上有关的介绍很少&#xff0c;官网也没有有用的东西&#xff0c;所以记录一其驱动&#xff08;MCU驱动&#xff09;。此外ILI2520, ILI2521, ILI2322, ILI2323, ILI2316, ILI2326, ILI2130, ILI2131, ILI2132这几款触控IC使用的是同一个用户指导手册&#x…