Вебсправочник
Основы веб-разработки

TextEncoder: строка и её байты UTF-8

TextEncoder преобразует строку JavaScript в массив байтов UTF-8. Это помогает отличить длину текста в кодовых единицах от размера его кодированного представления.

Назначение

TextEncoder преобразует строку JavaScript в массив байтов UTF-8. Это помогает отличить длину текста в кодовых единицах от размера его кодированного представления.

Как это работает

Метод encode возвращает Uint8Array. TextEncoder использует UTF-8 и не переключается на произвольную старую кодировку через имя в конструкторе. Пример работает с короткими фиксированными строками и не выполняет сетевых запросов.

Пример

const encoder = new TextEncoder();
for (const text of ["A", "Я", "HTML"]) {
  const bytes = encoder.encode(text);
  console.log({text, units:text.length, bytes:bytes.length, values:[...bytes]});
}

Что должно получиться

Латинская A занимает один байт UTF-8, кириллическая Я — два, HTML — четыре. Length у исходной строки и длина массива байтов измеряют разные вещи.

Граница применения и частая ошибка

Размер кодированного текста не равен размеру HTTP-передачи после сжатия и не включает автоматически заголовки или обёртку JSON. Непарные суррогаты заменяются при кодировании, поэтому не все произвольные последовательности UTF-16 проходят точный обратный цикл.

Самостоятельная проверка

Добавьте эмодзи и букву с комбинируемым знаком. Сравните байты, length и количество графем. Если сервер ограничивает размер тела, измеряйте именно сериализованное представление, которое собираетесь отправить.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.