首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在JavaScript中将字符串转换为base64。不推荐使用btoa和atob

在JavaScript中将字符串转换为base64,可以使用以下方法:

  1. 使用TextEncoder API:TextEncoder是一个全局对象,它提供了将字符串编码为字节数组的功能。然后,可以使用Uint8Array的from方法将字节数组转换为base64字符串。
代码语言:txt
复制
const encoder = new TextEncoder();
const data = encoder.encode("Hello, World!");
const base64 = btoa(String.fromCharCode.apply(null, data));
console.log(base64);
  1. 使用自定义函数:如果浏览器不支持TextEncoder API,可以使用自定义函数来实现字符串到base64的转换。以下是一个示例函数:
代码语言:txt
复制
function stringToBase64(str) {
  let base64 = "";
  for (let i = 0; i < str.length; i++) {
    const charCode = str.charCodeAt(i);
    const binary = String.fromCharCode(charCode);
    base64 += btoa(binary);
  }
  return base64;
}

const base64 = stringToBase64("Hello, World!");
console.log(base64);

这两种方法都可以将字符串转换为base64,但是不推荐使用btoa和atob函数,因为它们在处理非ASCII字符时可能会出现问题,并且在某些浏览器中不可靠。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

javascript 使用btoaatob来进行Base64码和解码

avascript原生的api本来就支持,Base64,但是由于之前的javascript局限性,导致Base64基本中看不中用。...好了,前言说了一大堆,开发者需要重视: 一.我们来看看,javascript中如何使用Base64码 var str = 'javascript'; window.btoa(str) //转码结果..."amF2YXNjcmlwdA==" window.atob("amF2YXNjcmlwdA==") //解码结果 "javascript" 二.对于转码来说,Base64码的对象只能是字符串,因此来说...var str = "China,中国" window.btoa(str) Uncaught DOMException: Failed to execute ‘btoa’ on ‘Window’: The...很明显,这种方式是不行的,那么如何让他支持汉字呢,这就要使用window.encodeURIComponentwindow.decodeURIComponent var str = "China,中国

1.3K20

【JS】2026- JavaScript 中的 btoa atob 全局函数

浏览器兼容性: 2.注意事项 btoaatob只能处理「纯文本数据」,不能用于编码二进制数据。 编码后的 Base64 字符串大小会比原始数据大约 33%。...btoaatob是 Web 浏览器提供的函数,不是 ECMAScript 标准的一部分,因此非浏览器环境中(如 Node.js)不可用。...3.相同点不同点 atobbtoa有以下相同点不同点: 相同点: 「编码方式」:两者都使用 Base64 编码方式。...「浏览器兼容性」:仅支持浏览器使用,它们都是 Web 浏览器提供的内置函数。 「文本操作」:btoa()atob()函数都只能处理纯文本字符串,不能直接处理二进制数据。...不同点: 以表格形式展示btoa()atob()函数的不同点: btoa() atob() 作用 将文本字符串换为 Base64 编码 将 Base64 编码的字符串解码为文本 使用场景 编码文本以便在不支持二进制的环境中传输

4K11
  • Base64编码知识详解

    我们进行前端开发时,针对项目优化,常会提到一条:针对较小图片,合理使用Base64字符串替换内嵌,可以减少页面http请求。 并且还会特别强调下,必须是小图片,大小不要超过多少KB,等等。...编解码方法 btoa atob JavaScript提供了两个原生方法,用来处理Base64编码:btoa() atob()。 btoa():将字符串或二进制值转换成Base64编码字符串。...注意:btoa方法只能直接处理ASCII码的字符,对于非ASCII码的字符,则会报错。 atob():对base64 编码的字符串进行解码。...注意:atob方法如果传入字符串参数不是有效的Base64编码(如非ASCII码字符),或者其长度不是4的倍数,会报错。.........Ii8+PC9nPjwvc3ZnPg==); } 当我们使用vue或react框架时,也可以通过url-loader来配置,图标Base64的大小: .loader('url-loader

    2.1K11

    URL存储解锁数据管理的新思路,重新定义数据传输与共享(@vuerepl)

    base64编码压缩算法。...存储阶段,数据首先经过base64编码,然后使用zlib压缩算法进行压缩。压缩后的数据再转换为二进制字符串,最终使用btoa方法将二进制字符串编码为Base64字符串。...压缩和解压缩使用了开源框架 fflate – 号称是目前最快、最小、最通用的纯 JavaScript压缩和解压库。...,因为js内置的btoaatob方法不支持Unicode字符串,而我们的代码内容显然不可能只使用ASCII的256个字符 const binary = strFromU8(zipped, true...) return btoa(binary) } btoa() 方法可以将一个二进制字符串(例如,将字符串中的每一个字节都视为一个二进制数据字节)编码为 Base64 编码的 ASCII 字符串

    30240

    atobbtoa的趣谈 原

    不了解的人突然看到window对象的atobbtoa 函数,估计会认为哪个臭小子添加全局函数了。 你如果告诉他这是原生函数,他一定会怒骂:哪个脑残给api起个这样的名子。...直观看有这几点: “123” 经过  atob 变短了,  结过btoa 变长了 。 先atobbtoa,字符变了 。 但是先btoa,后atob,字符不变。...引用MDN: Base64是一组相似的二进制到文本(binary-to-text)的编码规则,使得二进制数据解释成radix-64的表现形式后能够用ASCII字符串的格式表示出来。...atob() 函数能够解码通过base-64编码的字符串数据。相反地,btoa() 函数能够从字符串或二进制数据创建一个base-64编码的ASCII字符串。...简单一句:Base64编码将数据转为“安全字符”用于传输,编码会使内容变长1/3! btoa就是进行Base64编码,atob是解码。 有问题就是:它不支持Utf-8中的所有字符,会有异常。

    1.5K20

    base64是什么?怎么用的?

    Base64是一种将二进制数据转换为ASCII字符的编码方式。 它可以用于文本协议中传输二进制数据,例如在电子邮件中传输图片或在网页中嵌入图像等。...Base64编码使用64个字符集(A-Z、a-z、0-9"+"、"/")来表示二进制数据。...使用Base64编码: 1:将字符串换为对应的ASCII码: 72 101 108 108 111 44 32 87 111 114 108 100 33 2:将ASCII码转换为8位二进制数: 01001000...使用Base64编码后的结果是 "SGVsbG8sIFdvcmxkIQ==" 使用Base64编码时,可以使用编程语言中提供的内置函数或库来进行编码和解码操作。...例如,JavaScript中,可以使用 btoa() 函数进行编码,使用 atob() 函数进行解码。在其他编程语言中也有类似的函数或库可用。

    48930

    【基础知识】497- 一文读懂Base64编码

    四、如何进行 base64 编码和解码 JavaScript 中,有两个函数被分别用来处理解码编码 base64 字符串btoa():该函数能够基于二进制数据 “字符串” 创建一个 base64...atob():该函数能够解码通过 base64 编码的字符串数据。...Semlinker 对于 atob btoa 这两个方法来说,其中的 a 代表 ASCII,而 b 代表 Blob,即二进制。...因此 atob 表示 ASCII 到二进制,对应的是解码操作。而 btoa 表示二进制到 ASCII,对应的是编码操作。...了解方法中 a b 分别代表的意义之后,以后的工作中,我们就不会用错了。 五、总结 Base64 是一种数据编码方式,目的是为了保障数据的安全传输。

    1.8K21

    js api 之 fetch、querySelector、form、atobbtoa

    js api 之 fetch、querySelector、form、atobbtoa 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/11095862.html...js api即为JavaScript内置函数,本章就说说几个比较实用的内置函数,内容大致如下: fecth http请求函数 querySelector 选择器 form 表单函数 atobbtoa...Base64函数 Base64atobbtoa 以前,在前端,我们是引入Base64.js后调用api实现数据的Base64的编码和解码的运算,现在新的ES标准为我们提供了Base64 的支持,...主要用法如下: 编码:window.btoa(param); 输入> window.btoa("hello"); 输出> "aGVsbG8=" 解码:window.atob(param)...输入:window.atob("aGVsbG8="); 输出:"hello" DOM选择器之 querySelector DOM选择器jQuery中用的十分广泛,极大地方便了前端开发,现在你有了

    1.5K30

    初探Base64

    使用的字符是A-Z,a-z,0-9,还有'/' '+'以及' = '作为后缀用途。...原则建议如下: 1,有特殊用途,无法其他图片合在一起做成雪碧图的 2,使用与小图片,因为打的图片换成Base64对于CSS体积增大明显 3,更新需求不高(如果图片三天两头的更新,那要把前端累死了...) 关于Base64的转码 — js原生支持Base64的转码: // 将binary数据字符串格式内容转换成Base64的ASCII码 window.btoa() //将Base64的ASCII码格式内容转换成...binary数据字符串 window.atob() 由于DOMString 是16位编码的字符串,所以如果有字符超出了8位ASCII编码的字符范围时,大多数的浏览器中对Unicode字符串调用 window.btoa...var decodeStr = window.decodeURIComponent(window.atob(ASCIIStr)) // 凛就是我鸭,哈哈哈 so,关于Base64有了初步的了解,各位宝宝们试着项目中用用吧

    1K20
    领券