Формат числа в 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, подумайте о создании полифилла.

Полезные материалы

1. Intl.NumberFormat – JavaScript | MDN — подробней о функции форматирования чисел в JavaScript.
2. Numeral.js — для тех, кто считает, что форматирование чисел не может быть интересным и веселым.
3. Number.prototype.toFixed() – JavaScript | MDN — руководство по работе с фиксированной десятичной точкой в JavaScript.
4. GitHub – adamwdraper/Numeral-js: A javascript library for formatting and manipulating numbers. — источник, где можно изучить, как разрабатывался Numeral.js.
5. Formatting Numbers as Currency Strings in JavaScript — ваши основы форматирования чисел как валют.
6. Math.round() – JavaScript | MDN — объяснение работы функции Math.round().