Konvertieren Sie eine Zeichenfolge in JavaScript in Base64. btoa und atob sind veraltet

Ich habe in letzter Zeit an einigen Projekten in VS Code gearbeitet und plötzlich in meinem Code Benachrichtigungen erhalten, dass BTOA und ATOB jetzt veraltet sind. Ich kann hierfür außer VS-Code keine Ressource finden. Wenn das wahr ist, welche Alternative gibt es?

Die Node-Funktionen btoa() und atob() sind die einzigen, die veraltet sind. Wenn Sie jedoch am DOM-Code (Front-End) arbeiten und diesen veralteten Hinweis sehen, können Sie das Fensterobjekt verwenden, um ihn zu umgehen.

window.atob()

Für mehr Information

Diese Funktionen btoa und atob sind für Node JS veraltet. Wenn Sie für den Webbrowser programmieren, müssen Sie nur das Fenster voranstellen, um diese veraltete Markierung zu entfernen.

kodieren:

window.btoa('test') 

Ergebnis: dGVzdA==

zu entschlüsseln

window.atob('dGVzdA==')

Ergebnis: Test

Andernfalls können Sie den Puffer mit „yarn add buffer“ oder „npm i buffer“ installieren, um ihn im Browser auszuführen. Die API des Puffermoduls ist identisch mit der Puffer-API des Knotens.

Hier ist ein React-Beispiel, das das Javascript-Modul für den Browser verwendet, aber es kann auf jeder modernen Javascript-Frontend-App ausgeführt werden, die Webpack oder Parcel oder sogar Vanilla-Javascript mit Skript src verwendet:

//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>;
}

Der obige React-Hook ergibt Folgendes:

encoded test to base64 = dGVzdA==
decoded dGVzdA== to ascII = test

TLDR:

btoa(): akzeptiert eine Zeichenfolge, bei der jedes Zeichen ein 8-Bit-Byte darstellt. Wenn Sie eine Zeichenfolge übergeben, die Zeichen enthält, die nicht in 8 Bits dargestellt werden können, wird sie wahrscheinlich kaputt gehen. Wahrscheinlich ist BTOA deshalb veraltet.

atob(): gibt eine Zeichenfolge zurück, in der jedes Zeichen ein 8-Bit-Byte darstellt.

Wenn Sie NodeJS verwenden, ersetzen Sie einfach atob und btoa durch Buffer. Hier ist die offizielle Dokumentation zu Puffern in NodeJS:

//With NodeJS

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

Noch innerhalb von VS Code habe ich mir die Kommentare zur veralteten Funktion btoa(str) angesehen. Als Ersatz wird Folgendes vorgeschlagen:

const base64Str = Buffer.from(str, 'utf8').toString('base64');

btoa Und atob sind nur für Node.js veraltet. Wenn Sie das voranstellen window. Sie werden dieses Verfallszeichen los.

Auf der anderen Seite, wenn Sie versuchen, es zu verwenden btoa oder atob im Backend sollten Sie auf jeden Fall verwenden Buffer Schnittstelle.

Verweise:

1. https://github.com/microsoft/TypeScript/issues/45566#issuecomment -905057883
2. https://github.com/microsoft/TypeScript/issues/45566
3. https://developer.mozilla.org/en-US/docs/Web/API/btoa (Keine Verfallswarnungen!)