logo标签列表

在JavaScript中将字符串转换为base64。btoa和atob已过时。

javascriptvisual-studio-codebase64
121

最近我一直在VS Code上开展项目，并突然开始在我的代码中收到通知，即btoa和atob现已被弃用。 除了VS Code外，我找不到任何资源来解决这个问题。如果确实如此，有什么替代方案吗？

2
这些函数绝对没有被弃用。如果您提供您看到的确切错误信息，会更有帮助。 - I wrestled a bear once.
1
根据VS Code的说法，它们已被弃用。建议使用Buffer.from(str, "base64")，但在JavaScript中不存在这个方法。 - Caleb Prenger
2
它在JavaScript中肯定存在，在 Node 中。btoa 是用于网络的。你的问题有web标签，所以我假设你正在使用网络，但是你的IDE似乎认为你正在编写Node。那么，到底是哪一个？ - I wrestled a bear once.
1
它们在HTML标准中仍然活跃并更新（今天更新）。这是同一个问题吗：base64 - How to encode base 64 string in ReactJS when btoa is deprecated?。在MDN上说：“请注意，btoa()期望传递二进制数据，并且如果给定的字符串包含任何UTF-16表示占用多个字节的字符，则会抛出异常。” - chrwahl
3
我曾经和一只熊搏斗，这是个好主意。我正在编写一个Vue项目，所以它可能认为我在尝试使用node进行编写。 - Caleb Prenger
更多上下文请参见：https://github.com/nodejs/node/issues/40754 - Roko C. Buljan
4个回答
139

Node 的 btoa() 和 atob() 函数是唯一被弃用的函数。然而，如果你正在处理 DOM 代码（前端），并看到这个弃用通知，可以使用 window 对象来解决这个问题。

window.atob()

更多信息请点击此处

92
TLDR: 这些函数 btoa 和 atob 在 Node JS 中已被弃用。如果你在编写网页浏览器的代码，只需在前面加上 window 即可摆脱这个弃用标记。
要进行编码：
window.btoa('test')

结果：dGVzdA==
解码
window.atob('dGVzdA==')

结果：测试
否则，您可以使用"yarn add buffer"或"npm i buffer"安装缓冲区以在浏览器上运行。缓冲区模块的API与Node的Buffer API完全相同。

这是一个使用JavaScript模块在浏览器上运行的React示例，但它可以在任何使用webpack、parcel甚至纯JavaScript和script src的现代JavaScript前端应用程序上运行：

//this will run on browser    
import React from "react";
import { Buffer } from 'buffer';
export default function App() {

  const encodeBase64 = (data) => {
    return Buffer.from(data).toString('base64');
  }
  const decodeBase64 = (data) => {
    return Buffer.from(data, 'base64').toString('ascii');
  }

  return <div>
    {'encoded test to base64 = ' + encodeBase64('test')}<br />
    {'decoded dGVzdA== to ascII = ' + decodeBase64('dGVzdA==')}
  </div>;
}

上述的React Hook将会产生以下结果：
encoded test to base64 = dGVzdA==
decoded dGVzdA== to ascII = test

btoa()：接受一个字符串，其中每个字符代表一个8位字节。如果传入的字符串包含无法用8位表示的字符，可能会出错。这可能是为什么btoa被弃用的原因。
atob()：返回一个字符串，其中每个字符代表一个8位字节。
如果您正在使用nodejs，请用Buffer替换atob和btoa。这里是nodejs官方文档中关于Buffers的链接。
//With NodeJS

export const encodeBase64 = (data) => {
    return Buffer.from(data).toString('base64');
}
export const decodeBase64 = (data) => {
    return Buffer.from(data, 'base64').toString('ascii');
}
40

在 VS Code 中，我查看了已弃用的 btoa(str) 函数的注释。它建议使用以下内容替换：

const base64Str = Buffer.from(str, 'utf8').toString('base64');
1
atob 怎么样？ - Aseer KT Miqdad
10
@AseerKTMiqdad 只需相反操作：const base64str = Buffer.from(str, 'utf8').toString('base64'); - Tristan Pct
24
缓冲区（Buffer）类在浏览器中不可用。 - Peter
@Peter，对于浏览器应用程序，你需要通过 npm i buffer 安装 Buffer 库，然后使用 import { Buffer } from "buffer"; 引入它。 - sareno
这个对我有用：var byteCharacters = Buffer.Buffer.from(base64, 'base64').toString('binary'); - Mr. Leeds
29
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接