Формат числа в JavaScript: как отобразить '1K' вместо '1000'
Быстрый ответ
Если вам нужно представить числа в JavaScript в компактном формате, используйте тернарный оператор. Если число равно или превысило 1000, просто поделите его на 1000 и присоедините к результату букву 'К'. Если число меньше 1000, оставьте его без изменений.
const formatNum = n => n >= 1000 ? `${(n / 1000).toFixed(1)}К` : `${n}`;
Пример использования этой функции:
console.log(formatNum(2500)); // "2.5К" – отлично выполнили задание!
console.log(formatNum(900)); // "900" – "K" здесь излишне, число слишком мало для добавления "К".
Продвинутое реализация форматирования чисел на лету
Если вам необходимо учесть региональные особенности форматирования чисел, используйте объект Intl.NumberFormat
, указав опцию 'compact'. Это обеспечит элегантное представление чисел, приспособленное для различных локализаций.
const internationalFormatNum = (n) =>
new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(n);
Такой подход к форматированию эффективен не только для больших чисел, но и для малых. Однако стоит проверить его соответствие вашей среде выполнения, поскольку этот метод может быть недоступен в некоторых браузерах или окружениях разработки.
Форматирование на базе величины: подхож за суперзвездой
Если вам надоел стандартный подход к использованию суффиксов K, M, G, попробуйте метод с использованием Math.log10
и массива символов SI, чтобы числа звучали по-настоящему необычно.
const abbreviateNumber = (value) => {
const SI_SYMBOL = ["", "K", "M", "G", "T", "P", "E"];
const tier = Math.floor(Math.log10(Math.abs(value)) / 3);
if (tier === 0) return value.toString();
const suffix = SI_SYMBOL[tier];
const scale = Math.pow(10, tier * 3);
const scaled = value / scale;
return scaled.toFixed(1) + suffix;
}
Так, число 1000 превращается в "1,0К", а число размером 10^18 обозначается как "1,0E".
Форматирование без лишних нулей: чисто и просто
Раздражает ли вас лишний ноль в форматировании вашего числа? Удалите его, применив метод .replace()
:
const formatNumClean = n => (n / 1000).toFixed(1).replace(/\.0+$/, "") + 'K';
Такой метод сделает ваше число красивым и кратким, превращая, допустим, число 2000 в лаконичное "2K".
Визуализация
Давайте визуализируем этот процесс, как если бы вы поднимались на космическом лифте 🚀:
На первом этаже: 900 // Исходное число На десятом этаже: 9,99К // Число, близкое к тысяче На сотом этаже: 10К // Число, достигшее тысячи
Сравнение: Стандартное отображение Упрощенное отображение 900 900 1500 1,5К 10000 10К
Переход между отображениями происходит плавно, словно излюбленная мелодия в лифте 🎵.
Книга рецептов: полезные примеры
Давайте приведем примеры применения форматтера с различными числами для тестирования функций форматирования.
console.log(formatNum(999)); // "999"
console.log(formatNum(1000)); // "1,0K"
console.log(formatNum(1999)); // "2,0K"
console.log(formatNum(19999)); // "20,0K"
console.log(formatNum(999999)); // "1,0M"
Моменты, требующие внимания
Не забывайте учесть следующие нюансы, чтобы обеспечить безупречное решение:
- Применяйте
Math.sign()
иMath.abs()
, чтобы сохранить исходный знак числа. - Удостоверьтесь, что ваш метод форматирования совместим с локализационными стандартами или подготовьте альтернативный вариант.
- Используйте суффикс "G" для сокращения "Giga" или "B" для "Billion", в зависимости от традиций локализации.
- Если нет поддержки
Intl.NumberFormat
, подумайте о создании полифилла.
Полезные материалы
- Intl.NumberFormat – JavaScript | MDN — подробней о функции форматирования чисел в JavaScript.
- Numeral.js — для тех, кто считает, что форматирование чисел не может быть интересным и веселым.
- Number.prototype.toFixed() – JavaScript | MDN — руководство по работе с фиксированной десятичной точкой в JavaScript.
- GitHub – adamwdraper/Numeral-js: A javascript library for formatting and manipulating numbers. — источник, где можно изучить, как разрабатывался Numeral.js.
- Formatting Numbers as Currency Strings in JavaScript — ваши основы форматирования чисел как валют.
- Math.round() – JavaScript | MDN — объяснение работы функции
Math.round()
.