JavaScript atob() und btoa() Funktionen

Schnelle Referenz für JavaScripts eingebaute Base64 Kodierungs- und Dekodierungsfunktionen.

|

btoa() - Nach Base64 Kodieren

Die `btoa()` Funktion erstellt einen Base64-kodierten ASCII-String aus binären Daten.

// Grundlegende Verwendung
const encoded = btoa('Hello World');
console.log(encoded); // "SGVsbG8gV29ybGQ="

// JSON kodieren
const json = JSON.stringify({ name: 'John', age: 30 });
const encodedJson = btoa(json);
console.log(encodedJson); // "eyJuYW1lIjoiSm9obiIsImFnZSI6MzB9"
  • > Akzeptiert nur ASCII-Zeichen (0-255)
  • > Wirft Fehler bei Unicode-Zeichen
  • > Verfügbar in allen modernen Browsern und Node.js 16+

atob() - Von Base64 Dekodieren

Die `atob()` Funktion dekodiert einen Base64-kodierten String.

// Grundlegende Verwendung
const decoded = atob('SGVsbG8gV29ybGQ=');
console.log(decoded); // "Hello World"

// JSON dekodieren
const decodedJson = atob('eyJuYW1lIjoiSm9obiIsImFnZSI6MzB9');
const data = JSON.parse(decodedJson);
console.log(data); // { name: 'John', age: 30 }
  • > Gibt binären String zurück
  • > Wirft Fehler bei ungültigem Base64
  • > Groß-/kleinschreibungsempfindliche Eingabe

Unicode-Behandlung

Für Unicode-Strings kombinieren Sie mit TextEncoder/TextDecoder.

// Unicode kodieren
function encodeUnicode(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = String.fromCharCode(...bytes);
  return btoa(binString);
}

// Unicode dekodieren
function decodeUnicode(base64) {
  const binString = atob(base64);
  const bytes = Uint8Array.from(binString, c => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);
}

// Beispiel
const encoded = encodeUnicode('你好世界 🌍');
const decoded = decodeUnicode(encoded);
console.log(decoded); // "你好世界 🌍"

Häufige Anwendungsfälle

Praktische Anwendungen in der Webentwicklung.

Fehlerbehandlung

Best Practices für robusten Code.

function safeBase64Decode(str) {
  try {
    return atob(str);
  } catch (e) {
    console.error('Ungültiges Base64:', e);
    return null;
  }
}

function safeBase64Encode(str) {
  try {
    return btoa(str);
  } catch (e) {
    // Wahrscheinlich Unicode-Problem
    return btoa(unescape(encodeURIComponent(str)));
  }
}

Browser & Node.js Unterstützung

Verfügbarkeit in verschiedenen Umgebungen.

// Node.js Fallback für ältere Versionen
if (typeof btoa === 'undefined') {
  global.btoa = (str) => Buffer.from(str, 'binary').toString('base64');
  global.atob = (b64) => Buffer.from(b64, 'base64').toString('binary');
}

Performance-Tipps

Base64-Operationen optimieren.

// Performance-Vergleich
const cache = new Map();

function cachedBtoa(str) {
  if (!cache.has(str)) {
    cache.set(str, btoa(str));
  }
  return cache.get(str);
}
  • > Kodierte Werte für wiederholte Verwendung zwischenspeichern
  • > Streaming für große Dateien verwenden
  • > Alternativen für binäre Daten (ArrayBuffer, Blob) in Betracht ziehen
  • > Operationen wenn möglich stapeln