Как форматировать числа как 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));
// Output: "1.5K"

console.log(formatter.format(1500000));
// Output: "1.5M"

console.log(formatter.format(1500000000));
// Output: "1.5B"

Форматтер автоматически выбирает подходящий индикатор величины в зависимости от размера числа. Тысячи становятся K, миллионы — M, а миллиарды — B. Форматтер также сокращает число до удобочитаемого вида, например, показывает 1.5K вместо 1 500.

Тебе не нужно писать логику для определения, когда использовать K, M или B. API Intl сам решает это в зависимости от величины числа.

Как компактная запись форматирует разные величины

Компактная запись применяет разное форматирование на разных масштабах. Понимание этих порогов поможет тебе предсказать, как будут отображаться твои числа.

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact"
});

console.log(formatter.format(500));
// Output: "500"

console.log(formatter.format(1000));
// Output: "1K"

console.log(formatter.format(1500));
// Output: "1.5K"

console.log(formatter.format(999000));
// Output: "999K"

console.log(formatter.format(1000000));
// Output: "1M"

console.log(formatter.format(1500000));
// Output: "1.5M"

console.log(formatter.format(1000000000));
// Output: "1B"

console.log(formatter.format(1000000000000));
// Output: "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));
// Output: "1.5K"

console.log(shortFormatter.format(1500000));
// Output: "1.5M"

const longFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(longFormatter.format(1500));
// Output: "1.5 thousand"

console.log(longFormatter.format(1500000));
// Output: "1.5 million"

Опция compactDisplay управляет этим поведением. Она принимает два значения: "short" и "long". Если не указать эту опцию, по умолчанию используется "short".

Короткий стиль отлично подходит, когда мало места: карточки дашборда, мобильные интерфейсы и таблицы данных выигрывают от краткости K, M и B. Длинный стиль лучше использовать, когда важна понятность, а не экономия места: образовательные материалы, финансовые отчёты и интерфейсы с акцентом на доступность выигрывают от полного написания величины.

Как работает компактная запись в разных языках

Компактная запись адаптируется к языку и региону, указанным в локали. В разных языках используются разные буквы, слова и правила оформления для обозначения величин.

const enFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact"
});

console.log(enFormatter.format(1500000));
// Output: "1.5M"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  notation: "compact"
});

console.log(frFormatter.format(1500000));
// Output: "1,5 M"

const deFormatter = new Intl.NumberFormat("de-DE", {
  notation: "compact"
});

console.log(deFormatter.format(1500000));
// Output: "1,5 Mio."

const jaFormatter = new Intl.NumberFormat("ja-JP", {
  notation: "compact"
});

console.log(jaFormatter.format(15000000));
// Output: "1500万"

Во французском используется M с пробелом перед ним. В немецком для обозначения миллиона применяется сокращение Mio. В японском используется совершенно другая система чисел, где 万 означает десять тысяч.

Эти различия применяются автоматически в зависимости от локали. Не нужно писать отдельный код для разных языков, чтобы обрабатывать обозначения величин. Просто передайте предпочтительный язык пользователя в форматтер, и он выдаст правильный результат для этого языка.

Длинная форма отображения также адаптируется под каждый язык.

const enFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(enFormatter.format(1500000));
// Output: "1.5 million"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(frFormatter.format(1500000));
// Output: "1,5 million"

const deFormatter = new Intl.NumberFormat("de-DE", {
  notation: "compact",
  compactDisplay: "long"
});

console.log(deFormatter.format(1500000));
// Output: "1,5 Millionen"

В немецком для множественного числа миллиона используется слово Millionen. Во французском — слово million без s на конце. API Intl автоматически учитывает такие языковые различия.

Когда маленькие числа не сокращаются

Числа ниже порога компактной записи отображаются обычно. Этот порог зависит от локали, но обычно начинается с одной тысячи в большинстве западных языков.

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact"
});

console.log(formatter.format(10));
// Output: "10"

console.log(formatter.format(100));
// Output: "100"

console.log(formatter.format(999));
// Output: "999"

console.log(formatter.format(1000));
// Output: "1K"

Такое поведение предотвращает неудачное форматирование маленьких чисел. Показывать 500 как 500 гораздо понятнее, чем 0,5K. Форматтер применяет компактную запись только тогда, когда это действительно улучшает читаемость.

Порог не всегда равен одной тысяче. В некоторых языках, например в японском, используются другие системы группировки чисел. В японском группировка идет по десяти тысячам, поэтому компактная запись может начинаться с другого значения.

const jaFormatter = new Intl.NumberFormat("ja-JP", {
  notation: "compact"
});

console.log(jaFormatter.format(9999));
// Output: "9999"

console.log(jaFormatter.format(10000));
// Output: "1万"

API Intl автоматически учитывает такие пороги для разных локалей.

Совмещение компактной записи с другими вариантами форматирования

Компактная запись работает вместе с другими опциями форматирования чисел. Можно управлять количеством знаков после запятой, разделителями групп и округлением, используя компактную запись.

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 1
});

console.log(formatter.format(1234567));
// Output: "1.2M"

const preciseFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 2
});

console.log(preciseFormatter.format(1234567));
// Output: "1.23M"

const noDecimalsFormatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  maximumFractionDigits: 0
});

console.log(noDecimalsFormatter.format(1234567));
// Output: "1M"

Параметр maximumFractionDigits определяет, сколько знаков после запятой будет отображаться после целого числа. Если установить значение 0, все десятичные знаки будут убраны, и число станет ещё компактнее.

Можно также комбинировать компактное отображение с опциями минимального количества цифр, чтобы обеспечить единый формат для разных чисел.

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(1000));
// Output: "1.0K"

console.log(formatter.format(1500));
// Output: "1.5K"

console.log(formatter.format(2000));
// Output: "2.0K"

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

Когда использовать компактное отображение

Компактное отображение лучше всего подходит, когда мало места или точная детализация не важна. Счётчики в соцсетях, метрики на дашбордах и сводная статистика — отличные примеры. Пользователям не нужно знать, что у видео ровно 1 234 567 просмотров. Достаточно увидеть, что их 1,2 млн.

Не используйте компактное отображение, если важны точные значения. Финансовые операции, научные измерения и юридические документы требуют полной точности. Баланс на счёте должен отображаться как $1 234,56, а не $1,2K. В счёте должно быть $1 500,00, а не $1,5K.

Учитывайте свою аудиторию и контекст. Аналитики данных могут предпочесть видеть полные числа для точного анализа. Обычным пользователям часто удобнее компактные числа — их проще воспринимать. В некоторых интерфейсах доступны оба варианта: по умолчанию показываются компактные числа, а точные можно раскрыть по запросу.

Компактное отображение также хорошо подходит для размеров файлов, хотя реализация немного отличается. Для файлов обычно используются степени 1024, а не 1000, поэтому применяются кибибайты и мебибайты вместо килобайт и мегабайт. Intl API не поддерживает двоичные единицы, поэтому для форматирования размеров файлов нужна отдельная логика или специализированная библиотека.