Funciones JavaScript atob() y btoa()
Guía de referencia rápida para las funciones integradas de JavaScript para codificación y decodificación Base64.
|
btoa() - Codificar a Base64
La función `btoa()` crea una cadena ASCII codificada en Base64 a partir de datos binarios.
// Uso básico
const encoded = btoa('Hello World');
console.log(encoded); // "SGVsbG8gV29ybGQ="
// Codificar JSON
const json = JSON.stringify({ name: 'John', age: 30 });
const encodedJson = btoa(json);
console.log(encodedJson); // "eyJuYW1lIjoiSm9obiIsImFnZSI6MzB9"
- > Solo acepta caracteres ASCII (0-255)
- > Lanza error para caracteres Unicode
- > Disponible en todos los navegadores modernos y Node.js 16+
atob() - Decodificar desde Base64
La función `atob()` decodifica una cadena codificada en Base64.
// Uso básico
const decoded = atob('SGVsbG8gV29ybGQ=');
console.log(decoded); // "Hello World"
// Decodificar JSON
const decodedJson = atob('eyJuYW1lIjoiSm9obiIsImFnZSI6MzB9');
const data = JSON.parse(decodedJson);
console.log(data); // { name: 'John', age: 30 }
- > Devuelve cadena binaria
- > Lanza error para Base64 inválido
- > Entrada sensible a mayúsculas y minúsculas
Manejo de Unicode
Para cadenas Unicode, combina con TextEncoder/TextDecoder.
// Codificar Unicode
function encodeUnicode(str) {
const bytes = new TextEncoder().encode(str);
const binString = String.fromCharCode(...bytes);
return btoa(binString);
}
// Decodificar Unicode
function decodeUnicode(base64) {
const binString = atob(base64);
const bytes = Uint8Array.from(binString, c => c.charCodeAt(0));
return new TextDecoder().decode(bytes);
}
// Ejemplo
const encoded = encodeUnicode('你好世界 🌍');
const decoded = decodeUnicode(encoded);
console.log(decoded); // "你好世界 🌍"
Casos de Uso Comunes
Aplicaciones prácticas en desarrollo web.
Manejo de Errores
Mejores prácticas para código robusto.
function safeBase64Decode(str) {
try {
return atob(str);
} catch (e) {
console.error('Base64 inválido:', e);
return null;
}
}
function safeBase64Encode(str) {
try {
return btoa(str);
} catch (e) {
// Probablemente problema con Unicode
return btoa(unescape(encodeURIComponent(str)));
}
}
Soporte de Navegadores y Node.js
Disponibilidad en diferentes entornos.
// Alternativa Node.js para versiones anteriores
if (typeof btoa === 'undefined') {
global.btoa = (str) => Buffer.from(str, 'binary').toString('base64');
global.atob = (b64) => Buffer.from(b64, 'base64').toString('binary');
}
Consejos de Rendimiento
Optimizar operaciones Base64.
// Comparación de rendimiento
const cache = new Map();
function cachedBtoa(str) {
if (!cache.has(str)) {
cache.set(str, btoa(str));
}
return cache.get(str);
}
- > Cachear valores codificados para uso repetido
- > Usar streaming para archivos grandes
- > Considerar alternativas para datos binarios (ArrayBuffer, Blob)
- > Agrupar operaciones cuando sea posible