Как выбрать между 1K и 1 тысяча в компактном формате
Используйте опцию compactDisplay, чтобы управлять отображением компактных чисел в виде сокращений или прописью
Введение
Когда вы форматируете большие числа с использованием компактной нотации, число 1500 по умолчанию становится 1.5K. Этот сокращённый формат хорошо подходит для интерфейсов с ограниченным пространством, таких как экраны мобильных устройств и карточки на панели управления. Однако в некоторых контекстах лучше использовать полное написание величины. То же самое число может отображаться как 1.5 тысячи вместо 1.5K, жертвуя краткостью ради ясности.
Intl.NumberFormat в JavaScript предоставляет опцию compactDisplay, чтобы управлять этим выбором. Вы можете выбрать между коротким отображением, которое использует сокращения, такие как K, M и B, или длинным отображением, которое прописывает величины словами, такими как тысяча, миллион и миллиард. Эта опция даёт вам точный контроль над тем, как компактные числа будут отображаться пользователям.
Что контролирует опция compactDisplay
Опция compactDisplay работает только в том случае, если вы установили notation в значение "compact". Она принимает два значения: "short" и "long". Значение short создаёт сокращённый вывод, например, 1.5K, в то время как значение long создаёт полный вывод, например, 1.5 тысячи.
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(shortFormatter.format(1500));
// Вывод: "1.5K"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// Вывод: "1.5 тысячи"
Опция compactDisplay по умолчанию имеет значение "short", если вы её не укажете. Это означает, что компактная нотация использует сокращения, если вы явно не запросите длинное отображение.
Форматирование чисел с коротким компактным отображением
Короткое компактное отображение использует однобуквенные сокращения для представления величин. Этот формат минимизирует горизонтальное пространство, сохраняя при этом читаемость.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(formatter.format(1500));
// Вывод: "1.5K"
console.log(formatter.format(2400000));
// Вывод: "2.4M"
console.log(formatter.format(7800000000));
// Вывод: "7.8B"
console.log(formatter.format(5600000000000));
// Вывод: "5.6T"
Форматировщик автоматически выбирает подходящее сокращение в зависимости от величины числа. Тысячи обозначаются буквой K, миллионы — M, миллиарды — B, а триллионы — T.
Короткое отображение хорошо подходит, когда нужно уместить числа в ограниченном пространстве. Мобильные интерфейсы, таблицы данных, подписи к графикам и карточки на панели управления выигрывают от компактной ширины сокращённых чисел.
Форматирование чисел с длинным компактным отображением
Длинное компактное отображение полностью прописывает слово, обозначающее величину, вместо его сокращения. Этот формат обеспечивает большую ясность за счёт использования дополнительного горизонтального пространства.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(formatter.format(1500));
// Вывод: "1.5 тысячи"
console.log(formatter.format(2400000));
// Вывод: "2.4 миллиона"
console.log(formatter.format(7800000000));
// Вывод: "7.8 миллиарда"
console.log(formatter.format(5600000000000));
// Вывод: "5.6 триллиона"
Форматтер использует полное слово, обозначающее величину, что делает масштаб числа сразу очевидным, без необходимости интерпретировать сокращения. Пользователи, незнакомые с обозначениями 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)}`);
});
// Вывод:
// 1500:
// Short: 1.5K
// Long: 1.5 тысячи
// 45000:
// Short: 45K
// Long: 45 тысяч
// 2400000:
// Short: 2.4M
// Long: 2.4 миллиона
// 950000000:
// Short: 950M
// Long: 950 миллионов
Короткое отображение последовательно использует меньше символов. Сокращение 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)}`);
});
// Вывод:
// 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
Во французском языке добавляется буква "s", чтобы сделать "millions" во множественном числе. В немецком языке используется "Mio." как короткая форма и "Millionen" как длинная форма. В испанском языке используется "millones" для множественного числа. Каждый язык применяет свои грамматические правила как для коротких, так и для длинных форматов.
Форматтер автоматически обрабатывает эти вариации на основе локали. Вам не нужно поддерживать отдельную логику форматирования для каждого языка.
Азиатские языки часто используют совершенно другие системы группировки чисел.
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact",
compactDisplay: "short"
});
console.log(jaFormatter.format(15000000));
// Вывод: "1500万"
const zhFormatter = new Intl.NumberFormat("zh-CN", {
notation: "compact",
compactDisplay: "short"
});
console.log(zhFormatter.format(15000000));
// Вывод: "1500万"
Японский и китайский языки группируют числа по десять тысяч, а не по тысяче. Символ 万 обозначает десять тысяч, поэтому 15,000,000 становится 1500万, а не 15M. API Intl автоматически обрабатывает эти фундаментальные различия в системах чисел.
Когда использовать короткое компактное отображение
Короткое компактное отображение лучше всего подходит для контекстов с ограниченным пространством, где важен каждый символ. Мобильные интерфейсы имеют ограниченное горизонтальное пространство, поэтому сокращённые числа необходимы для размещения контента на экране.
Таблицы данных, отображающие несколько чисел, выигрывают от одинаковой ширины. Использование 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));
// Вывод: "1.23 миллиона"
console.log(formatter.format(9876543));
// Вывод: "9.88 миллиона"
Опция maximumFractionDigits управляет точностью десятичных знаков, в то время как compactDisplay управляет форматом величины. Эти параметры работают вместе, чтобы создать нужный вам формат.
Вы можете комбинировать компактное отображение с форматированием валюты, чтобы показывать денежные суммы с полностью прописанными величинами.
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
notation: "compact",
compactDisplay: "long"
});
console.log(formatter.format(2400000));
// Вывод: "$2.4 миллиона"
console.log(formatter.format(750000));
// Вывод: "$750 тысяч"
Этот формат хорошо подходит для отображения крупных денежных сумм в финансовых отчётах или сводках бюджета, где символ валюты и полностью прописанная величина обеспечивают ясность.
Компактное отображение также работает с отображением знаков, чтобы показывать изменения или дельты.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
signDisplay: "always"
});
console.log(formatter.format(1500000));
// Вывод: "+1.5 миллиона"
console.log(formatter.format(-850000));
// Вывод: "-850 тысяч"
Комбинация явных знаков и полностью прописанных величин делает изменения сразу понятными для пользователей.
Что нужно запомнить
Опция compactDisplay управляет тем, использует ли компактная нотация сокращения или полностью прописанные слова. Установите её в значение "short" для сокращённого вывода, например, 1.5K, или в значение "long" для полностью прописанного вывода, например, 1.5 тысячи. По умолчанию эта опция имеет значение "short", если её не указать.
Используйте короткое отображение, когда пространство ограничено или когда нужно отображать много чисел с одинаковой шириной. Используйте длинное отображение, когда ясность и доступность важнее, чем эффективность использования пространства. Форматтер автоматически обрабатывает вариации, зависящие от локали, как для короткого, так и для длинного форматов.
Комбинируйте compactDisplay с другими параметрами форматирования, такими как десятичные знаки, валюта и отображение знаков, чтобы создать точный формат чисел, необходимый вашему приложению.