Видимый символ, кодовая точка и длина строки

Назначение

Количество видимых знаков может отличаться от длины строки JavaScript и от количества кодовых точек Unicode.

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

length считает единицы UTF-16. Перебор строки через spread работает с кодовыми точками, а графемный кластер может включать несколько точек. Intl.Segmenter с granularity:grapheme помогает разделить текст ближе к пользовательскому восприятию.

Пример

const text="é";
const segmenter=new Intl.Segmenter("ru",{granularity:"grapheme"});
console.assert(text.length===2);
console.assert([...segmenter.segment(text)].length===1);

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

Разложенная буква занимает две единицы UTF-16, но один графемный кластер. Это не означает, что каждый видимый знак всегда занимает одинаковое число байтов или кодовых точек.

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

Не обещайте лимит «100 символов», если разные части приложения считают разные сущности. Для хранения, ввода и отображения нужно согласовать правило и отдельно проверять поддержку API.

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

Сравните обычную букву, эмодзи и букву с комбинирующим знаком. Запишите три количества и решите, какое из них действительно нужно для счётчика в интерфейсе.

Связанные материалы

• Структура проекта
• Отладка CSS
• Консоль браузера