Как выбрать между 1K и 1 тысячей в компактном формате

Введение

Когда вы форматируете большие числа с помощью компактной нотации, число 1500 по умолчанию превращается в 1,5K. Такой сокращённый формат отлично подходит для интерфейсов с ограниченным пространством, например, на мобильных экранах и в карточках дашборда. Однако в некоторых случаях полезнее явно указывать величину числа. То же самое число можно отобразить как 1,5 тысячи вместо 1,5K — это менее кратко, но более понятно.

В JavaScript Intl.NumberFormat есть опция compactDisplay, которая позволяет управлять этим выбором. Вы можете выбрать короткий формат, который использует сокращения вроде K, M и B, или длинный формат, где величина пишется полностью: тысяча, миллион, миллиард. Эта опция даёт вам точный контроль над тем, как компактные числа будут видны пользователям.

За что отвечает опция compactDisplay

Опция compactDisplay работает только если вы установили notation в "compact". Она принимает два значения: "short" и "long". Короткий формат выдаёт сокращённый результат, например 1,5K, а длинный — прописью, например 1,5 тысячи.

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

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

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

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

По умолчанию опция compactDisplay установлена в "short". Это значит, что компактная нотация будет использовать сокращения, если вы явно не выберете длинный формат.

Форматирование чисел с коротким компактным отображением

Короткий компактный формат использует однобуквенные сокращения для обозначения величины. Такой формат экономит место по горизонтали и остаётся читаемым.

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

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

console.log(formatter.format(2400000));
// Output: "2.4M"

console.log(formatter.format(7800000000));
// Output: "7.8B"

console.log(formatter.format(5600000000000));
// Output: "5.6T"

Форматтер автоматически выбирает подходящее сокращение в зависимости от величины числа. Для тысяч используется K, для миллионов — M, для миллиардов — B, а для триллионов — T.

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

Форматирование чисел с длинным компактным отображением

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

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

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

console.log(formatter.format(2400000));
// Output: "2.4 million"

console.log(formatter.format(7800000000));
// Output: "7.8 billion"

console.log(formatter.format(5600000000000));
// Output: "5.6 trillion"

Форматтер использует полное слово для обозначения величины, поэтому масштаб числа сразу понятен, и пользователю не нужно разбираться в сокращениях. Тем, кто не знаком с обозначениями K, M, B, будет проще воспринимать «тысяча», «миллион», «миллиард».

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

Сравнение короткого и длинного компактного отображения

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

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

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

const numbers = [1500, 45000, 2400000, 950000000];

numbers.forEach(num => {
  console.log(`${num}:`);
  console.log(`  Short: ${shortFormatter.format(num)}`);
  console.log(`  Long:  ${longFormatter.format(num)}`);
});

// Output:
// 1500:
//   Short: 1.5K
//   Long:  1.5 thousand
// 45000:
//   Short: 45K
//   Long:  45 thousand
// 2400000:
//   Short: 2.4M
//   Long:  2.4 million
// 950000000:
//   Short: 950M
//   Long:  950 million

Короткий формат всегда использует меньше символов. Например, сокращение K занимает один символ, а слово «тысяча» — семь символов, включая пробел. Эта разница особенно заметна при отображении большого количества чисел в таблицах или списках.

Длинный формат даёт больше контекста для каждого числа. Пользователь может прочитать «2,4 миллиона» без необходимости расшифровывать, что означает M. Такая явность помогает тем, кто не знаком с сокращёнными форматами чисел.

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

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

const locales = ["en-US", "fr-FR", "de-DE", "es-ES"];

locales.forEach(locale => {
  const shortFormatter = new Intl.NumberFormat(locale, {
    notation: "compact",
    compactDisplay: "short"
  });

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

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(2400000)}`);
  console.log(`  Long:  ${longFormatter.format(2400000)}`);
});

// Output:
// en-US:
//   Short: 2.4M
//   Long:  2.4 million
// fr-FR:
//   Short: 2,4 M
//   Long:  2,4 millions
// de-DE:
//   Short: 2,4 Mio.
//   Long:  2,4 Millionen
// es-ES:
//   Short: 2,4 M
//   Long:  2,4 millones

Во французском к слову million добавляется s во множественном числе. В немецком используется сокращение Mio. и полное слово Millionen. В испанском для множественного числа используется millones. Каждый язык применяет свои грамматические правила к коротким и длинным форматам.

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

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

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

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

const zhFormatter = new Intl.NumberFormat("zh-CN", {
  notation: "compact",
  compactDisplay: "short"
});

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

В японском и китайском числовые группы формируются по десять тысяч, а не по тысяче. Символ 万 обозначает десять тысяч, поэтому 15 000 000 записывается как 1500万, а не 15M. Intl API автоматически учитывает эти фундаментальные различия в числовых системах.

Когда использовать короткий компактный формат

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

Таблицы данных с несколькими числами выигрывают от одинаковой ширины значений. Использование 1,5K, 2,4M и 7,8B помогает выровнять столбцы и избежать переноса строк. Единый формат сокращений облегчает пользователям быстро просматривать столбцы чисел.

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

Оси и подписи на графиках требуют минимального текста, чтобы избежать наложения или перегруженности. Использование 1,5M вместо 1,5 миллиона делает подписи к осям более читаемыми без необходимости их поворачивать или обрезать.

Интерактивные карты и визуализации данных выигрывают от короткого формата при отображении чисел в виде оверлеев или всплывающих подсказок. Сокращённый формат не закрывает основной контент.

Когда использовать длинный компактный формат

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

В финансовых отчетах и официальных документах используется полный формат чисел, чтобы избежать двусмысленности. В бизнес-отчете запись «2,4 миллиона дохода» понятнее, чем «2,4M», особенно для тех, кто может не знать сокращения.

Интерфейсы, ориентированные на доступность, выигрывают от полного написания чисел, потому что экранные дикторы естественнее произносят полностью написанные слова. Когда диктор озвучивает «1,5 тысячи», это звучит естественнее, чем «1,5K», что может быть прочитано как «один точка пять кей» или «один точка пять К».

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

В ситуациях, когда пользователи могут не знать сокращений, нужен полный формат чисел. Международная аудитория, нетехнические пользователи или люди с низкой цифровой грамотностью лучше воспринимают «тысяча», «миллион» и «миллиард», чем K, M и B.

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

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

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

console.log(formatter.format(1234567));
// Output: "1.23 million"

console.log(formatter.format(9876543));
// Output: "9.88 million"

Опция maximumFractionDigits отвечает за точность после запятой, а compactDisplay — за формат отображения величины. Эти параметры работают вместе, чтобы получить нужный вам формат.

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

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

console.log(formatter.format(2400000));
// Output: "$2.4 million"

console.log(formatter.format(750000));
// Output: "$750 thousand"

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

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

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

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

console.log(formatter.format(-850000));
// Output: "-850 thousand"

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

Что важно помнить

Параметр compactDisplay определяет, будет ли компактная запись использовать сокращения или полные слова. Установите его в "short" для сокращённого вывода, например 1,5K, или в "long" для вывода прописью, например 1,5 тысячи. По умолчанию используется "short", если параметр не задан.

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

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