Как форматировать числа как 1K, 1M, 1B
Используйте компактное обозначение, чтобы отображать большие числа в удобочитаемом формате, экономя место
Введение
Большие числа занимают значительное пространство и их сложно быстро просканировать. Число, такое как 1,500,000, требует семь цифр плюс форматирование, в то время как 1.5M передает ту же величину всего тремя символами. Такое компактное представление часто используется для отображения количества подписчиков в социальных сетях, просмотров видео, метрик на дашбордах и размеров файлов.
JavaScript предоставляет встроенную поддержку компактного форматирования чисел через API Intl.NumberFormat. Этот API автоматически обрабатывает преобразование и адаптирует форматирование для разных языков и регионов, обеспечивая корректное отображение чисел для всех пользователей.
Почему большие числа нуждаются в компактном форматировании
При отображении больших чисел в пользовательских интерфейсах возникают две проблемы. Во-первых, числа занимают горизонтальное пространство. Счетчик, показывающий 1,234,567 просмотров, требует больше места, чем счетчик, показывающий 1.2M просмотров. Во-вторых, пользователи быстрее воспринимают компактные числа. Человеческий мозг распознает 1.5M как полтора миллиона быстрее, чем анализирует 1,500,000.
Компактная нотация решает обе проблемы, заменяя конечные нули индикаторами величины. Вместо отображения всех цифр показываются только значащие цифры, за которыми следует буква, представляющая величину. Такой подход балансирует между точностью и удобочитаемостью.
Разные контексты требуют разного уровня точности. Количество подписчиков в социальных сетях редко нуждается в точных числах. Отображение 1.2M подписчиков вместо 1,234,567 предоставляет достаточную информацию. Финансовый дашборд может требовать большей точности, показывая 1.23M вместо 1.2M. API Intl позволяет контролировать эту точность, сохраняя компактное форматирование.
Использование компактной нотации в JavaScript
Опция notation в Intl.NumberFormat управляет тем, как числа отображаются. Установка значения "compact" включает компактное форматирование.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(1500));
// Вывод: "1.5K"
console.log(formatter.format(1500000));
// Вывод: "1.5M"
console.log(formatter.format(1500000000));
// Вывод: "1.5B"
Форматтер автоматически выбирает подходящий индикатор величины в зависимости от размера числа. Тысячи становятся K, миллионы — M, а миллиарды — B. Форматтер также сокращает число до удобочитаемой формы, показывая 1.5K вместо 1.5 тысячи.
Вам не нужно писать логику для определения, когда использовать K, M или B. API Intl принимает это решение на основе величины числа.
Как компактная нотация форматирует разные величины
Компактная нотация применяет разные форматы для разных масштабов. Понимание этих порогов помогает предсказать, как будут отображаться ваши числа.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(500));
// Вывод: "500"
console.log(formatter.format(1000));
// Вывод: "1K"
console.log(formatter.format(1500));
// Вывод: "1.5K"
console.log(formatter.format(999000));
// Вывод: "999K"
console.log(formatter.format(1000000));
// Вывод: "1M"
console.log(formatter.format(1500000));
// Вывод: "1.5M"
console.log(formatter.format(1000000000));
// Вывод: "1B"
console.log(formatter.format(1000000000000));
// Вывод: "1T"
Числа меньше тысячи отображаются без сокращения. Как только число достигает тысячи, оно переключается на обозначение K. Та же схема продолжается для миллионов, миллиардов и триллионов.
Форматировщик округляет числа, чтобы они соответствовали компактному представлению. Например, число 1,234,567 по умолчанию становится 1.2M. В следующем уроке будет рассмотрено, как управлять количеством отображаемых десятичных знаков в компактной нотации.
Выбор между коротким и длинным отображением
Компактная нотация предлагает два стиля отображения. Короткий стиль использует буквы, такие как K, M и B. Длинный стиль записывает величину словами.
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(shortFormatter.format(1500));
// Вывод: "1.5K"
console.log(shortFormatter.format(1500000));
// Вывод: "1.5M"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// Вывод: "1.5 thousand"
console.log(longFormatter.format(1500000));
// Вывод: "1.5 million"
Опция compactDisplay управляет этим поведением. Она принимает два значения: "short" и "long". Если вы не укажете эту опцию, по умолчанию будет использоваться "short".
Короткое отображение хорошо подходит, когда пространство ограничено. Карточки на панели управления, мобильные интерфейсы и таблицы данных выигрывают от краткости обозначений K, M и B. Длинное отображение лучше подходит, когда ясность важнее, чем экономия пространства. Образовательный контент, финансовые отчеты и интерфейсы, ориентированные на доступность, выигрывают от записи величин словами.
Как работает компактная нотация в разных языках
Компактная нотация адаптируется к языку и региону, указанным в локали. Разные языки используют разные буквы, слова и правила форматирования для обозначения величин.
const enFormatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(enFormatter.format(1500000));
// Вывод: "1.5M"
const frFormatter = new Intl.NumberFormat("fr-FR", {
notation: "compact"
});
console.log(frFormatter.format(1500000));
// Вывод: "1,5 M"
const deFormatter = new Intl.NumberFormat("de-DE", {
notation: "compact"
});
console.log(deFormatter.format(1500000));
// Вывод: "1,5 Mio."
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact"
});
console.log(jaFormatter.format(15000000));
// Вывод: "1500万"
Во французском используется буква M с пробелом перед ней. В немецком используется сокращение Mio. для обозначения миллиона. В японском используется совершенно другая система чисел, где 万 обозначает десять тысяч.
Эти различия обрабатываются автоматически на основе локали. Вам не нужно писать код, специфичный для локали, чтобы учитывать разные обозначения величин. Просто передайте предпочтительный язык пользователя в форматтер, и он выдаст правильный результат для этого языка.
Длинное отображение также адаптируется к каждому языку.
const enFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(enFormatter.format(1500000));
// Вывод: "1.5 million"
const frFormatter = new Intl.NumberFormat("fr-FR", {
notation: "compact",
compactDisplay: "long"
});
console.log(frFormatter.format(1500000));
// Вывод: "1,5 million"
const deFormatter = new Intl.NumberFormat("de-DE", {
notation: "compact",
compactDisplay: "long"
});
console.log(deFormatter.format(1500000));
// Вывод: "1,5 Millionen"
В немецком используется слово Millionen для множественного числа от "миллион". Во французском используется слово million без окончания s. API Intl автоматически обрабатывает эти языковые различия за вас.
Когда маленькие числа не компактизируются
Числа ниже порога компактного отображения отображаются в обычном формате. Этот порог варьируется в зависимости от локали, но обычно начинается с одной тысячи в большинстве западных языков.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(10));
// Вывод: "10"
console.log(formatter.format(100));
// Вывод: "100"
console.log(formatter.format(999));
// Вывод: "999"
console.log(formatter.format(1000));
// Вывод: "1K"
Такое поведение предотвращает неудобное форматирование для маленьких чисел. Отображение 500 как 500 более понятно, чем отображение его как 0.5K. Форматтер применяет компактную нотацию только тогда, когда это улучшает читаемость.
Порог не всегда равен одной тысяче. Некоторые языки, такие как японский, используют другие системы группировки чисел. В японском числа группируются по десяти тысячам, поэтому компактная нотация может начинаться с другого порога.
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact"
});
console.log(jaFormatter.format(9999));
// Вывод: "9999"
console.log(jaFormatter.format(10000));
// Вывод: "1万"
API Intl автоматически обрабатывает эти пороги, специфичные для локали.
Сочетание компактного формата с другими параметрами форматирования
Компактный формат можно использовать вместе с другими параметрами форматирования чисел. Вы можете управлять количеством десятичных знаков, разделителями групп и округлением при использовании компактного формата.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 1
});
console.log(formatter.format(1234567));
// Вывод: "1.2M"
const preciseFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 2
});
console.log(preciseFormatter.format(1234567));
// Вывод: "1.23M"
const noDecimalsFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 0
});
console.log(noDecimalsFormatter.format(1234567));
// Вывод: "1M"
Опция maximumFractionDigits управляет количеством десятичных знаков после целого числа. Установка значения 0 удаляет все десятичные знаки, делая число еще более компактным.
Вы также можете сочетать компактный формат с опциями минимального количества знаков, чтобы обеспечить единообразное форматирование для различных чисел.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
console.log(formatter.format(1000));
// Вывод: "1.0K"
console.log(formatter.format(1500));
// Вывод: "1.5K"
console.log(formatter.format(2000));
// Вывод: "2.0K"
Этот подход гарантирует, что все числа отображают один десятичный знак, что помогает поддерживать визуальную согласованность в таблицах и диаграммах.
Когда использовать компактный формат
Компактный формат лучше всего подходит, когда пространство ограничено или точная точность не является критичной. Счетчики в социальных сетях, метрики на дашбордах и сводная статистика — идеальные случаи использования. Пользователям не нужно знать, что у видео ровно 1,234,567 просмотров. Достаточно информации, что у него 1.2M просмотров.
Не используйте компактный формат, когда важны точные числа. Финансовые транзакции, научные измерения и юридические документы требуют полной точности. Баланс на счете должен показывать $1,234.56, а не $1.2K. Счет-фактура должен показывать $1,500.00, а не $1.5K.
Учитывайте свою аудиторию и контекст. Аналитики данных могут предпочесть видеть полные числа, чтобы понимать точные значения. Обычные пользователи часто предпочитают компактные числа, так как они быстрее воспринимаются. Некоторые интерфейсы предлагают оба варианта, показывая компактные числа по умолчанию с возможностью раскрыть точные значения по запросу.
Компактный формат также хорошо подходит для размеров файлов, хотя реализация немного отличается. Размеры файлов обычно используют степени 1024, а не 1000, что приводит к использованию кибибайтов и мебибайтов вместо килобайтов и мегабайтов. API Intl не обрабатывает двоичные единицы, поэтому для форматирования размеров файлов требуется собственная логика или специализированная библиотека.