js的btoa 和 atob之Base64编码和解码

以下内容摘录自

作者:JSON_NULL
链接:https://www.jianshu.com/p/b2c6dc5fad0a

btoa 方法

btoa 是 Binary To ASCII 的简写,意思就是把二进制数据编码转换成Base64编码的ASCII字符串。且btoa(str) 方法是浏览器中的一个全局(顶级)方法。

atob 方法

btoa 相反 atob 是 ASCII To Binary 的简写,意思是把Base64格式的ASCII字符串进行Base64解码,得到原数据。atob 正是 btoa 方法的逆过程,并且它也是浏览器中的一个全局(顶级)方法。

你在处理时如果字符串里有中文,可以这样解决

!function(W){W.Base64 = {utf8ToBase64:function (str){return btoa(unescape(encodeURIComponent(str)));},base64ToUtf8: function(str){return decodeURIComponent(escape(atob(str)));}}
}(window);

调用

Base64.utf8ToBase64('橙-极纪元JJY.Cheng');
//编码结果
'5qmZLeaegee6quWFg0pKWS5DaGVuZw=='
Base64.base64ToUtf8('5qmZLeaegee6quWFg0pKWS5DaGVuZw==');
//解码结果
'橙-极纪元JJY.Cheng'

这样做可以有效解决下面错误提示:

Uncaught DOMException: Failed to execute 
'btoa' on 'Window': The string to be encoded 
contains characters outside of the Latin1 range.

译文:

未捕获的DOMException: Failed to execute 'btoa' on 'Window':要编码的字符串包含Latin1范围之外的字符。

详细问题请阅读

转换Base64编码报错Uncaught DOMException: Failed to execute ‘btoa‘ on ‘Window‘: The string to be encoded co-CSDN博客

为什么中文字符串转码后,就可以解决报错?

你可以看这篇文章

encodeURI、encodeURIComponent、decodeURI 、 decodeURIComponent、escape 和 unescape对字符串进行URI编码和解码,也为转义-详解-CSDN博客

看完后,可以看下面内容 

综合上面文章所述,我们可以清楚的知道,

encodeURI 和 encodeURIComponent 会把汉字等转换成UTF-8编码后对每个字节进行转义得到类似"%XX"(XX是两位十六进制值)的串。

而unescape 可以把所有 "%XX"(XX是两位十六进制值)的串,

解码到Latin1字符集上。

btoa 方法正好能够操作Latin1字符集上的字符转换成Base64编码。

于是乎以下代码段产生了:

function utf8ToBase64(str){return btoa(unescape(encodeURIComponent(str)));
}

而解码过程是编辑过程的逆过程,于是得到如下代码

function base64ToUtf8(str){return decodeURIComponent(escape(atob(str)));
}

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

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

相关文章

Python从入门到网络爬虫(函数详解)

前言 函数是变成语言中最常见的语法,函数的本质就是功能的封装。使用函数可以大大提高编程效率与程序的可读性。函数是能够实现特定功能的计算机代码而已,他是一种特定的代码组结构。 函数的作用 1.提升代码的重复利用率,避免重复开发相同代…

【排序算法】删除有序数组中的重复项 II

删除有序数组中的重复项 II 给你一个有序数组 nums ,请你 原地 删除重复出现的元素,使得出现次数超过两次的元素只出现两次 ,返回删除后数组的新长度。 不要使用额外的数组空间,你必须在 原地 修改输入数组 并在使用 O(1) 额外空…

js——json对象相互转化——js基础积累

js——json对象相互转化——js基础积累 需求场景解决步骤1:定义一个变量接收此字段,方便处理解决步骤2: { 外面的双引号要去掉解决步骤3:使用正则去除参数中的\\解决步骤4:如果此参数必须以{开头,以}结尾解…

一文快速了解超声功率放大器基础知识

超声功率放大器是一种电子设备,用于放大超声信号的能量。它在多个领域中发挥重要作用,包括医疗、工业、科学研究等。超声功率放大器通过将输入信号的能量放大到所需的级别,以便更好地驱动其他设备或实现特定的应用。下面就给大家介绍一下超声…

C++ 多态向上转型详解

文章目录 1 . 前言2 . 多态3 . 向上转型4 . 总结 【极客技术传送门】 : https://blog.csdn.net/Engineer_LU/article/details/135149485 1 . 前言 此篇博文详解C的多态向上转型平台 : Qt 2 . 多态 【Q】什么是多态? 【A】解释如下 : 通俗来说,就是多种形态,具体…

计算机创新协会冬令营——暴力枚举题目03

经过昨天两道题目的洗礼今天应该是更加的手到擒来吧。接招! 题目 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) …

2024,这将是量子计算的真正挑战

2023年,一项项量子计算纪录被打破。 谷歌量子AI团队证明了将多个量子比特分组合成为一个逻辑量子比特的纠错方法可以提供更低的容错率。以往的纠错研究随着比特数的增加,错误率会提高,都是“越纠越错”,而这次谷歌首次实现了“越纠…

Python Pillow(PIL)库的用法介绍

在Python编程中,图像处理是一个非常重要的应用领域。Pillow(Python Imaging Library,也被称为PIL)是一个强大的库,用于处理图像,包括图像的读取、编辑、保存等操作。本文将详细介绍Pillow库的用法。 一、安…

2024.1.3C语言补录 宏函数

在C语言中,宏函数可以使用预处理器指令 #define 来定义。宏函数与常规函数类似,但它们在预处理阶段进行替换,而不是在运行时。 定义:#define 宏名称(参数列表) 宏体 其中: #define 是预处理器指令,用于定义宏。宏名…

Python入门-实战练习-基于函数

1.编写函数 实现计算列表中元素的最大值 需求: 随机产生10个元素,存储到列表中,编写函数获取这个列表中元素的最大值 (不能使用内置函数 max()) def get_max(lst):xlst[0] # x存储的是元素的最大值# 遍历for i in range(1,len(lst)):if ls…

【springboot+mybatis实现CURD模版项目-Jesus】

springbootmybatis实现CURD模版项目-Jesus STEP 1 项目创建 1.1 新建Spring Initializr项目   1.2 选择需要的依赖 springboot有2.7.2直接选272STEP 2 配置更改 2.1更改maven配置   2.2 检查项目配置jdk、sdk、jre版本一致   2.3 检查pom文件,Maven-Reload pr…

Go语言中的乐观锁与悲观锁

改变一个数值的三个步骤 把想修改的数值从某个地方取出来将取出来的数值修改为期望值把修改后的数值保存到原来的地方 问题 如果在做第2步时,有另一个过程(进程或线程)对同一个数值进行同样的操作(取值、修改)&…

grep笔记240103

常用选项:: -i:忽略大小写进行匹配。 -v:反向匹配,只打印不匹配的行。 -n:显示匹配行的行号。 -r:递归查找子目录中的文件。 -l:只打印匹配的文件名。 -c:只打印匹配的行…

11-2 RHEL8配置YUM软件仓库及安装拼音输入法

配置本地YUM源 一、虚拟机关机>>虚拟机设置>>CD/DVD,关联ISO镜像文件,勾选“启动时连接”,点确定 二、开启虚拟机, 使用root用户登录。用df -h 命令可以看到光驱已经正常连接了。如果看不到/dev/sr0,需…

探索 Vue 实例方法的魅力:提升 Vue 开发技能(下)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

Unity 关于点击不同物品移动并触发不同事件

关于点击不同物品触发不同事件 可以实现在界面中点击不同的物体,移动到物品附近位置,然后触发对应的事件。 首先建立一个公共管理的类: public class InteractionObject : MonoBehaviour {private NavMeshAgent PlayerAgent;private bool …

铁塔基站数字化管理监测解决方案

截至2023年10月,我国5G基站总数达321.5万个,占全国通信基站总数的28.1%。然而,随着5G基站数量的快速增长,基站的能耗问题也逐渐日益凸显,基站的用电给运营商带来了巨大的电费开支压力,降低5G基站的能耗成为…

vue +WebSDK_V3.3.0/本地调试和打包成dist部署还有所不同!!

1.在index.html中引入js文件 <!-- 实时对讲 --><script src"./static/js/jquery-1.7.1.min.js"></script><script src"./static/js/jsVideoPlugin-1.0.0.min.js"></script><script id"videonode" src"./s…

Object-c初步学习 四

1.category的用法 不修改对象源文件的方式下&#xff0c;给类添加方法 为Student类添加方法 // // NSObjectStudyCategory.h // #import <Foundation/Foundation.h> #import "Student.h" #pragma mark 类名后面的&#xff08;test&#xff09;代表Category…

CCF录用率怎么看?如何挑选合适的会议

写在前面 写此文是因为有同学问我如何确定自己能投稿的会议。首先&#xff0c;不建议直接用他人汇总好的数据&#xff08;截稿时间和录用率&#xff09;&#xff0c;如果遇到更新不及时的很有可能耽误自己的工作。 平常&#xff0c;我都会自己收集预计投稿时间的会议信息&…