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

Изначально может показаться, что здесь сложного практически ничего нет: есть toFixed() и toLocaleString(), но практика показывает, что реальные интерфейсы почти никогда в это не укладываются.

Почему? Потому что в разных диапазонах чисел пользователи ждут разного поведения.

Именно с этим сталкиваются разработчики при работе с таблицами, отчётами, финансовыми данными и аналитикой.

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

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

Требования к округлению и форматированию

Проверка входного значения

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

• если значение равно null, undefined, NaN или Infinity, возвращается символ "–"

• если значение строго равно 0, возвращается строка "0"

Намеренно разделяю проверки, потому что, во-первых, ноль и отсутствие данных — разные состояния, и пользователь должен их различать, во-вторых, технические значения вроде NaN или Infinity не должны попадать в UI — они не несут бизнес-смысла и только путают.

Определение диапазона числа

Если значение валидное, функция анализирует абсолютную величину числа, игнорируя знак. Знак важен для отображения, но не влияет на выбор точности.

Числа от 1 до 9 999 отображаются с двумя знаками после запятой, значение округляется до сотых, например 12.3456 → 12,35

Числа больше 10 000 отображаются без дробной части, число округляется до целого, например 123456.78 → 123 457

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

Числа меньше единицы

Самая сложная и важная часть логики — работа с малыми значениями.

Для чисел меньше "1 функция":

• определяет, сколько нулей идёт после запятой до первой значащей цифры

• подбирает такое количество знаков после запятой, чтобы первая значащая цифра обязательно была видна

• при этом гарантирует минимум 4 знака после запятой

С точки зрения пользователя это позволяет не превращать малые, но важные значения в 0, сохранить смысл числа, обеспечить визуальную стабильность таблиц и отчётов (именно здесь эта функция будет использоваться)

Округление и преобразование в строку

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

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

Форматирование целой части

Целая часть числа форматируется с пробелами между тысячами: 1234567 → 1 234 567

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

Функция

Итак, у меня получилась следующая функция, давайте посмотрим. Точнее две функции: одна для форматирования, другая - для округления. Полный ее код в конце.

Разбор функции

Форматирование целой части числа с пробелами

Начнем с formatWithSpaces

const formatWithSpaces = (numStr: string): string => numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');

Здесь все просто – это регулярное выражение, которое ищет каждую позицию перед группой из трёх цифр и вставляет пробел.

Основная функция форматирования

Функция принимает число, которое нужно отобразить, да она поддерживает варианты number, null, undefined и их же проверят и возвращает отформатированную строку, с которой можно работать в UI.

Первые проверки занимаются именно этим – отсеивают невалидные значения.

if (value == null || value == undefined || !Number.isFinite(value)) return '–';
if (value === 0) return '0';

А также вторая строка отдельно обрабатывает ноль, чтобы он всегда отображался как "0", а не пустая строка или "–". Это важно, чтобы пользователь видел разницу между нулём и отсутствием данных.

Вложенная функция для вычисления количества знаков после запятой

const calcFractionDigits = (val: number): number => {
    const absVal = Math.abs(val);

    if (absVal >= 1 && absVal < 10000) return 2;
    if (absVal >= 10000) return 0;

    const digits = Math.floor(-Math.log10(absVal));
    return Math.max(digits + 1, 4);
};

Разберём:

Сначала берём абсолютное значение, потому что знак числа не влияет на количество знаков после запятой. Дальше,если числа от 1 до 9 999, возвращаем 2 знака после запятой, а если 10 000 и больше, то по нашему тз отображаются без дробной части, соответственно возвращаем 0.

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

Вот эта строчка:

const digits = Math.floor(-Math.log10(absVal));

Math.log10(x) — это логарифм числа x по основанию 10, то есть отвечает на вопрос: 10 в какой степени даст x? Это то, что нам нужно:

Т.к. для для чисел меньше 1 log10(absVal) будет отрицателен, например:

0.01 → log10(0.01) = -2

0.0012 → log10(0.0012) ≈ -2.9208

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

0.01 → -(-2) = 2

0.0012 → -(-2.9208) ≈ 2.9208

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

Например: absVal = 0.12, тогда -log10(absVal) = 0.9208… и Math.floor(-log10(absVal)) = 0 – получается 0 нулей, первая цифра сразу после запятой.

Возьмем еще для примера  absVal= 0.0012 его -log10(absVal) = 2.9208…, а Math.floor(-log10(absVal)) = 2. Итого получаем 2 нуля, первая значащая цифра на четвёртой позиции.

Т.е в общем и целом digits = количество нулей после запятой перед первой значащей цифрой.

А дальше это используется так, что после вычисления digits мы добавляем 1 и берём минимум 4 знака, чтобы определить количество знаков после запятой для toFixed.

В этой строчке

return Math.max(digits + 1, 4);

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

Определение точности и округление

const fractionDigits = calcFractionDigits(value);
const fixed = fractionDigits === 0
  ? Math.round(value).toString()
  : value.toFixed(fractionDigits);

Вызываем calcFractionDigits и получаем количество знаков после запятой для данного числа. Если дробная часть не нужна (fractionDigits === 0), просто округляем Math.round. Иначе используем toFixed(fractionDigits), чтобы получить строку с нужной точностью.

Разделение целой и дробной части

const [intPart, fracPart] = fixed.split('.');

Разделяем число на целую часть (intPart) и дробную часть (fracPart). Это нужно, чтобы отдельно отформатировать целую часть пробелами, а дробную оставить как есть.

Форматирование целой части

const formattedInt = formatWithSpaces(intPart);

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

Собираем финальный результат

Осталось все собрать в финальную строку

return fracPart ? `${formattedInt},${fracPart}` : formattedInt;

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

Полная функция

const formatWithSpaces = (numStr: string): string => numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');

const formatAdaptiveNumber = (value?: number | null | undefined): string => {
  if (value == null || value == undefined || !Number.isFinite(value)) return '–';
  if (value === 0) return '0';

  const calcFractionDigits = (val: number): number => {
      const absVal = Math.abs(val);

      if (absVal >= 1 && absVal < 10000) return 2;
      if (absVal >= 10000) return 0;

      const digits = Math.floor(-Math.log10(absVal));
      return Math.max(digits + 1, 4);
  };

  const fractionDigits = calcFractionDigits(value);

  const fixed = fractionDigits === 0
    ? Math.round(value).toString()
    : value.toFixed(fractionDigits);

  const [intPart, fracPart] = fixed.split('.');
  const formattedInt = formatWithSpaces(intPart);

  return fracPart ? `${formattedInt},${fracPart}` : formattedInt;
};

Я вывел в табличку результаты отработки функции, получилось так:

Возможное улучшение

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

Заключение

В этой статье мы разобрали задачу, которая на первый взгляд кажется простой — округление и форматирование чисел, но на практике бывает сложной из-за определенных требований. Эта функция может быть полезна в таблицах, отчётах, финансовых и аналитических интерфейсах, где важна точность, аккуратность и предсказуемость отображения чисел. В итоге, правильное форматирование чисел — это не просто «красиво», это улучшение UX и снижение риска ошибок при восприятии данных. А на фронте мы этим и занимаемся =)