Кодирование и декодирование Base64 с atob и btoa

Функции btoa() и atob() — это встроенные средства JavaScript для кодирования и декодирования строк в формате Base64.

С 20 марта 2019 года они входят в статус «Widely Available» по Baseline — значит, поддерживаются всеми современными браузерами и подходят для использования в продакшене.

Зачем нужны btoa () и atob ()

• btoa() (binary to ASCII) — кодирует строку в формат Base64.
• atob() (ASCII to binary) — декодирует строку обратно из Base64 в обычный текст.

Base64 — это способ представить бинарные данные в виде безопасного для передачи текста. Это удобно, например, для:

• вставки изображений прямо в HTML;
• передачи файлов или текстов через API;
• хранения данных в localStorage;
• кодирования данных в параметрах URL.

Как использовать с кириллицей и другими символами

btoa() работает только с ASCII-строками. То есть с кириллицей, эмодзи и другими символами вне латиницы она не справляется.

Чтобы корректно закодировать и декодировать строку вроде «Привет мир», нужно использовать TextEncoder и TextDecoder. Это современные встроенные классы, которые позволяют работать с текстом в кодировке UTF-8.

Вот правильный способ:

// Кодирование в Base64
const utf8 = new TextEncoder().encode('Привет мир');
const base64 = btoa(String.fromCharCode(...utf8));
console.log(base64); // → корректная Base64-строка

// Декодирование обратно в текст
const bytes = Uint8Array.from(atob(base64), c => c.charCodeAt(0));
const text = new TextDecoder().decode(bytes);
console.log(text); // → «Привет мир»

Где пригодится

1. В HTML-файлах:
Можно вставлять изображения как data:-ссылки.

<img src="data:image/png;base64,..." alt="Иконка">

2. В веб-приложениях:
Например, вы загружаете файл, кодируете его в Base64 и отправляете на сервер через JSON.

3. В localStorage или IndexedDB:
Base64 позволяет хранить бинарные данные в текстовом формате.

4. В URL и ссылках:
Можно безопасно передавать данные, предварительно закодировав их.

Что важно помнить

• btoa() и atob() не работают с многобайтовыми символами напрямую — это не ошибка, а особенность.
• Base64 не шифрует данные — это просто кодировка. Любой может расшифровать её обратно.
• Для файлов, особенно больших, лучше использовать Blob, FileReader, ArrayBuffer и Uint8Array — но btoa() подойдёт для простых задач.

Если работаете с кириллицей или другими юникод-символами — подключайте TextEncoder и TextDecoder. Это сделает ваш код совместимым, предсказуемым и безопасным.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.