Base64 кодирование и декодирование в Javascript: советы

Быстрый ответ

// Кодирование текста в формат Base64
const encoded = btoa('Текст для кодирования'); 

// Декодирование из формата Base64 в текст
const decoded = atob(encoded);

// Применение функции encodeURIComponent для кодирования URL
const urlEncoded = btoa(encodeURIComponent('Текст для кодирования'));

Обработка символов Unicode при кодировании

Если вам нужно работать с символами Unicode, используя функцию btoa(), сначала кодируйте строки в формате UTF-8.

// Сначала кодируем строку в формате UTF-8, затем кодируем в Base64
function utf8_to_b64(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
      (match, p1) => String.fromCharCode('0x' + p1)));
}

Восстановление символов Unicode: декодирование

Когда вам надо декодировать строку Unicode из формата Base64, используйте следующий способ:

// Декодируем строку из формата Base64 обратно в формат UTF-8
function b64_to_utf8(str) {
  return decodeURIComponent(atob(str).split('').map(c => 
    '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
}

Работаем с Base64 в Node.js через Buffer

В Node.js функции btoa() и atob() не доступны, однако есть Buffer.

// Кодирование текста с использованием Buffer в Node.js
let buff = Buffer.from('Текст для кодирования', 'utf-8');
let base64data = buff.toString('base64');

// Декодирование Base64 обратно в текст с использованием Buffer в Node.js
buff = Buffer.from(base64data, 'base64');
let text = buff.toString('utf-8');

Поддержка в различных браузерах: кодирование с помощью CryptoJS

Для обеспечения совместимости в разных версиях браузеров можно использовать CryptoJS.

var CryptoJS = require('crypto-js'); 

// Перевод текста в Base64 с помощью CryptoJS
var encodedWord = CryptoJS.enc.Utf8.parse('Текст для кодирования');
var encoded = CryptoJS.enc.Base64.stringify(encodedWord);

// Декодирование строки Base64 обратно в текст с помощью CryptoJS
var decodedWord = CryptoJS.enc.Base64.parse(encoded);
var decoded = decodedWord.toString(CryptoJS.enc.Utf8);

Лучшие практики и рекомендации

Следуйте данным советам при работе с Base64:

1. Обрабатывайте большие строки Base64 по частям.
2. Перед декодированием уберите символы перевода строки (\r или \n) и завершающие нули (\0).
3. При необходимости использования собственного метода кодирования можно применить сопоставление символов Base64 с их десятичными значениями.
4. Используйте битовые операции для оптимизации вашего кода декодирования.
5. Подумайте над пошаговой обработкой данных для экономии времени.

Визуализация

Вы можете представить процессы следующим образом:

Данные ⇒ функция btoa() превращает их в кодированный подарок 🎁 ⇒ функция atob() преобразует их обратно в данные, когда это требуется.

Работа с файлами и бинарными данными

Для работы с бинарными данными в JavaScript:

1. Воспользуйтесь методом FileReader.readAsDataURL() для конвертации файлов в строки Base64.

   JS

   Скопировать код

   const reader = new FileReader();
   reader.readAsDataURL(fileBlob); 
   reader.onloadend = () => {
     let base64data = reader.result;                
     console.log(base64data); 
   };

2. Преобразование бинарного массива в Base64:

   JS

   Скопировать код

   let uintArray = new Uint8Array(buffer);
   let string = String.fromCharCode.apply(null, uintArray);
   let encodedData = btoa(string);

Полезные материалы

Ниже представлены полезные ссылки для получения дополнительной информации о работе с Base64:

1. Использование функции btoa() в Web APIs
2. Применение функции atob() в Web APIs
3. Документация Buffer для Node.js
4. TextEncoder в Web APIs
5. Метод FileReader.readAsDataURL() в Web APIs
6. ArrayBuffer и бинарные массивы в JavaScript
7. Полифил функций btoa() и atob() с поддержкой Unicode