【JavaScript】JS 的 btoa 和 atob 全局函数

JavaScript 中,btoaatob 是两个处理 Base64 编码的全局函数,它们通常用于在浏览器环境中对二进制数据进行编码和解码。

不过,需要注意的是,这两个函数并非 JavaScript 标准规范(ECMAScript)的一部分,而是浏览器环境(如 Web API)提供的。

一、btoa()

btoa() 函数用于将二进制数据编码为 Base64 格式的 ASCII 字符串。它接受一个 DOMString(即,一个 UTF-8 格式的字符串)作为参数,并返回一个包含原始数据的 Base64 编码的 ASCII 字符串。

const binaryString = "Hello, World!";  
const base64String = btoa(binaryString);  
console.log(base64String); // 输出:SGVsbG8sIFdvcmxkIQ== 

PS:btoa() 只能对 ASCII 字符串进行编码,因此如果你尝试对非 ASCII 字符串(如包含中文字符的字符串)进行编码,可能会得到意外的结果或抛出错误。

二、atob()

atob() 函数用于解码通过 btoa() 编码的 Base64 字符串。它接受一个包含 Base64 编码数据的 ASCII 字符串作为参数,并返回一个包含原始数据的 DOMString。如果字符串不是一个有效的 Base64 编码,则会抛出一个错误

const base64String = "SGVsbG8sIFdvcmxkIQ==";  
const decodedString = atob(base64String);  
console.log(decodedString); // 输出:Hello, World!

在使用 btoa()atob() 时,请确保你的代码运行在支持这些函数的环境中(如浏览器)。如果你正在编写跨平台或服务器端 JavaScript 代码,可能需要使用其他库(如 Node.js 中的 Buffer 类)来处理 Base64 编码和解码。

三、优缺点

优点:

  • 方便性:它提供了一种简单的方法来将二进制数据(如字符串、Blob、ArrayBuffer 等)转换为 Base64
  • 编码的字符串,以便在网络中传输或在浏览器中存储。 兼容性:在现代浏览器中,btoa 函数的兼容性相对较好。

缺点:

  • 输入限制:btoa 只能接受 UTF-8 编码的字符串作为输入。如果你尝试使用其他编码的字符串或二进制数据(如
    ArrayBuffer),你需要先将其转换为 UTF-8 编码的字符串。 不支持二进制 Blob 或
  • ArrayBuffer:虽然可以使用一些技巧(如 FileReader API)将 Blob 或 ArrayBuffer 转换为
  • Base64 字符串,但 btoa 本身并不直接支持这些类型。 安全性:Base64
  • 编码不是一种加密方法,因此它不会增加数据的安全性。它只是将数据转换为一种可在文本中安全传输的格式。

使用场景

  • 数据传输:在不支持二进制的上下文中,如 HTTP 请求的 URL 或 JSON 格式,可以使用 Base64 编码传输二进制数据。
  • 图片数据:在 Web 页面中,可以通过 Base64 编码直接在 HTML中嵌入图片,而不需要使用<img>标签的src属性指向一个外部图片文件

注意事项

  • btoa和atob只能处理「纯文本数据」,不能用于编码二进制数据。 编码后的 Base64 字符串大小会比原始数据大约 33%。
  • btoa和atob是 Web 浏览器提供的函数,不是 ECMAScript 标准的一部分,因此在非浏览器环境中(如
    Node.js)不可用。

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

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

相关文章

MATLAB .m文件的命名规则

matlab的.m文件的命名规则&#xff1a; 文件名命名要用英文字符&#xff0c;首字符不能是数字或下划线。 文件名不能与matlab的内部函数名相同。 .m文件名的命名尽量不要是简单的英文单词&#xff0c;最好是由大小写英文/数字/下划线等组成。 原因是简单的单词命名容易与mat…

基于多尺度相关小波分解的单幅图像去雾和去噪方法(MATLAB)

小波变换具有优美的数学背景和强大的多分辨率分析能力。它集成和发展了短时傅里叶变换的思想并克服了其时间窗口不可变的缺点。小波变换通过使用具有局部感受野和多尺度的基函数。形成了同时具有局部和全局性质的信号表征。与DCT等全局变换相比&#xff0c;小波变换可以防止局部…

58、试除法求约数

试除法求约数 题目描述 给定n个正整数ai&#xff0c;对于每个整数ai,请你按照从小到大的顺序输出它的所有约数。 输入格式 第一行包含整数n。 接下来n行&#xff0c;每行包含一个整数ai。 输出格式 输出共n行&#xff0c;其中第 i 行输出第 i 个整数ai的所有约数。 数据…

oracle查看序列

在Oracle数据库中&#xff0c;查看序列的方式主要有以下几种&#xff1a; 查看当前用户下的所有序列名称&#xff1a; sql复制代码 SELECT sequence_name FROM user_sequences; 查看所有用户的序列&#xff1a; sql复制代码 SELECT sequence_name FROM all_sequences; 查看…

Java面试八股之Executors可以创建哪几种类型的线程池

Executors可以创建哪几种类型的线程池 newSingleThreadExecutor&#xff1a; 创建一个单线程的线程池&#xff0c;此线程池确保所有的任务都在同一个线程中按顺序执行。适用于需要保证任务顺序执行&#xff0c;或者在单线程中运行的任务。 newFixedThreadPool&#xff1a; …

知识蒸馏——讨论区

更多内容请了解&#xff1a; 知识蒸馏——基础知识 知识蒸馏——学生模型 知识蒸馏——代码实现 知识蒸馏——讨论区 知识蒸馏——讨论区 一、教师模型的预测结果&#xff08;软标签&#xff09;与传统标签的区别&#xff1f;二、教师模型的软标签与真实标签的关系三、为什么学…

YOLOv5改进 | Conv篇 | 利用YOLOv10提出的UIB模块二次创新C3(附代码 + 完整修改教程)

一、本文介绍 本文给大家带来的改进机制是利用利用YOLOv10提出的UIB模块二次创新C3助力YOLOv5进行有效涨点,其中C2fUIB模块所用到的CIB模块是一种紧凑的倒置块结构,它采用廉价的深度卷积进行空间混合,并采用成本效益高的点卷积进行通道混合。本文针对该方法给出多种使用方法…

每日两题 / 34. 在排序数组中查找元素的第一个和最后一个位置 33. 搜索旋转排序数组(LeetCode热题100)

34. 在排序数组中查找元素的第一个和最后一个位置 - 力扣&#xff08;LeetCode&#xff09; 根据二分函数&#xff0c;得到>target和<target的两个&#xff0c;分别是答案的l和r class Solution { public:vector<int> searchRange(vector<int>& nums,…

Python | Leetcode Python题解之第130题被围绕的区域

题目&#xff1a; 题解&#xff1a; class Solution:def solve(self, board: List[List[str]]) -> None:if not board:returnn, m len(board), len(board[0])que collections.deque()for i in range(n):if board[i][0] "O":que.append((i, 0))board[i][0] &q…

github有趣项目:Verilog在线仿真( DigitalJS+edaplayground)

DigitalJS https://github.com/tilk/digitaljs这个项目是一个用Javascript实现的数字电路模拟器。 它旨在模拟由硬件设计工具合成的电路 像 Yosys&#xff08;这里是 Github 存储库&#xff09;&#xff0c;它有一个配套项目 yosys2digitaljs&#xff0c;它可以转换 Yosys 将文…

前端学习日记Vue3---Day1

声明式渲染 使用简洁的模板语法&#xff0c;将数据与 DOM&#xff08;文档对象模型&#xff09;关联起来。通过这种方式&#xff0c;可以实现数据驱动的界面更新&#xff0c;简化开发流程。 示例 <!DOCTYPE html> <html lang"en"> <head><me…

awk的应用

步骤一&#xff1a;awk的基本用法 1&#xff09;基本操作方法 格式1&#xff1a;awk [选项] [条件]{指令} 文件 格式2&#xff1a;前置指令 | awk [选项] [条件]{指令} 其中&#xff0c;print 是最常用的编辑指令&#xff1b;若有多条编辑指令&#xff0c;可用分号分隔。 …

【多视图聚类】COMPLETER:Incomplete Multi-view Clustering via Contrastive Prediction

CVPR 2021 0.摘要 在本文中&#xff0c;我们研究了不完全多视图聚类分析中的两个具有挑战性的问题&#xff0c;即i&#xff09;如何在没有标签的帮助下学习不同视图之间的信息性和一致性表示&#xff0c;以及ii&#xff09;如何从数据中恢复缺失的视图。为此&#xff0c;我们…

PHP发票真假API在线文档、票据ocr识别、医疗票据查验

翔云人工智能开放平台提供详细的发票查验API在线开发文档&#xff0c;不仅包含了PHP语言&#xff0c;还包含Java、python、go、C#、C等众多的主流开发语言&#xff0c;便于有需要的用户快速的将发票查验功能集成到自己的系统或者应用中&#xff0c;极大的缩短了企业的开发时间和…

四大运营商频段-2024

四大运营商频段-2023 中国移动900MHz(Band8),889-904/934-949MHz&#xff1a;1.8GHz(Band3),1710-1735/1805-1830MHz&#xff1a;1.9GHz(Band39),1885-1915MHz&#xff1a;2GHz(Band34),2010-2025MHz&#xff1a;2.3GHz(Band40),2320-2370MHz&#xff1a;2.6GHz(Band41,n41),25…

英伟达开源新利器NV-Embed向量模型,基于双向注意力的LLM嵌入模型,MTEB 56项任务排名第一

前言 文本嵌入模型能够将文本信息转化为稠密的向量表示&#xff0c;并在信息检索、语义相似度计算、文本分类等众多自然语言处理任务中发挥着关键作用。近年来&#xff0c;基于解码器的大型语言模型 (LLM) 开始在通用文本嵌入任务中超越传统的 BERT 或 T5 嵌入模型&#xff0c…

Centos 7之Hadoop搭建

介绍 Hadoop Distributed File System简称 HDFS&#xff0c;是一个分布式文件系统。HDFS 有着高容错性&#xff08;fault-tolerent&#xff09;的特点&#xff0c;并且设计用来部署在低廉的&#xff08;low-cost&#xff09;硬件上。而且它提供高吞吐量&#xff08;high throu…

Java的扩展性

Java的扩展性主要体现在其面向对象编程的特性上&#xff0c;以及通过抽象、继承、接口和多态等机制来实现代码的重用和扩展。以下是关于Java扩展性的详细描述&#xff1a; 一、基本概念 面向对象编程&#xff1a;Java是一种完全面向对象的编程语言&#xff0c;它支持将现实世…

三分钟“手撕”队列与习题

代码放开头&#xff0c;方便大家查阅 目录 一、实现代码 二、什么是队列 三、队列常见方法 入队push&#xff08;&#xff09; 出队 四、Queue使用 Java自带的Queue 双端队列 五、习题 循环队列 用队列实现栈 用栈实现队列 一、实现代码 package demo2;publi…

怎么做 Redis 容灾

Redis容灾通常指的是数据备份和恢复机制&#xff0c;以确保在发生故障时可以尽快恢复服务。Redis提供了几种方法来保证数据的高可用性&#xff1a; 1. 使用RDB快照&#xff1a;通过配置文件设置定时快照&#xff0c;可以在指定的时间间隔保存数据集到磁盘。 2. 使用AOF日志&a…