Процентное представление

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

Подключение модулей

Для работы с процентным форматированием необходимо подключить основные зависимости библиотеки и данные CLDR.

<script src="cldr.js"></script>
<script src="cldr/event.js"></script>
<script src="cldr/supplemental.js"></script>

<script src="globalize.js"></script>
<script src="globalize/number.js"></script>

Загрузка локализационных данных:

Globalize.load(
    cldrData.entireSupplemental(),
    cldrData.entireMainFor("en"),
    cldrData.entireMainFor("ru")
);

Установка текущей локали:

Globalize.locale("ru");

Базовое форматирование процентов

Для форматирования процентов используется метод formatNumber() с параметром style: "percent".

const value = 0.25;

const result = Globalize.formatNumber(value, {
    style: "percent"
});

console.log(result);

Результат для русской локали:

25 %

Для английской локали:

Globalize.locale("en");

console.log(
    Globalize.formatNumber(0.25, {
        style: "percent"
    })
);

Результат:

25%

Принцип преобразования

Значение автоматически умножается на 100.

0.25 → 25%

Это означает:

Исходное значение Результат
0.1 10%
0.5 50%
1 100%
2 200%

Форматирование дробных процентов

Количество знаков после запятой регулируется параметрами minimumFractionDigits и maximumFractionDigits.

Ограничение числа знаков

Globalize.locale("ru");

const result = Globalize.formatNumber(0.12345, {
    style: "percent",
    maximumFractionDigits: 2
});

console.log(result);

Результат:

12,35 %

Фиксированное количество знаков

const result = Globalize.formatNumber(0.1, {
    style: "percent",
    minimumFractionDigits: 2
});

console.log(result);

Результат:

10,00 %

Минимальное и максимальное число цифр

Настройки дробной части можно комбинировать.

const result = Globalize.formatNumber(0.123456, {
    style: "percent",
    minimumFractionDigits: 1,
    maximumFractionDigits: 3
});

console.log(result);

Результат:

12,346 %

Работа с локалями

Процентное представление зависит от региональных стандартов.

Русская локаль

Globalize.locale("ru");

console.log(
    Globalize.formatNumber(0.25, {
        style: "percent"
    })
);

Результат:

25 %

Английская локаль

Globalize.locale("en");

console.log(
    Globalize.formatNumber(0.25, {
        style: "percent"
    })
);

Результат:

25%

Французская локаль

Globalize.locale("fr");

console.log(
    Globalize.formatNumber(0.25, {
        style: "percent"
    })
);

Результат:

25 %

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

Создание форматтера процентов

Для многократного форматирования рекомендуется создавать форматтер заранее.

Использование numberFormatter

const percentFormatter = Globalize.numberFormatter({
    style: "percent",
    maximumFractionDigits: 1
});

console.log(percentFormatter(0.123));
console.log(percentFormatter(0.987));

Результат:

12,3 %
98,7 %

Преимущества форматтера

  • повторное использование;
  • повышение производительности;
  • единообразное форматирование;
  • снижение накладных расходов.

Форматирование больших значений

Процентный стиль не ограничивает диапазон чисел.

console.log(
    Globalize.formatNumber(15.75, {
        style: "percent"
    })
);

Результат:

1 575 %

Отрицательные проценты

Globalize корректно отображает отрицательные значения.

console.log(
    Globalize.formatNumber(-0.35, {
        style: "percent"
    })
);

Результат:

-35 %

Форматирование нулевых значений

console.log(
    Globalize.formatNumber(0, {
        style: "percent"
    })
);

Результат:

0 %

Округление процентов

Globalize использует стандартное математическое округление.

console.log(
    Globalize.formatNumber(0.126, {
        style: "percent",
        maximumFractionDigits: 1
    })
);

Результат:

12,6 %

Другой пример:

console.log(
    Globalize.formatNumber(0.125, {
        style: "percent",
        maximumFractionDigits: 1
    })
);

Результат:

12,5 %

Использование пользовательских шаблонов

В некоторых случаях требуется нестандартное отображение процентов.

Комбинирование с обычным текстом

const percent = Globalize.formatNumber(0.73, {
    style: "percent"
});

const text = `Уровень выполнения: ${percent}`;

console.log(text);

Результат:

Уровень выполнения: 73 %

Форматирование статистических данных

Пример массива значений

const stats = [0.12, 0.34, 0.56];

const formatter = Globalize.numberFormatter({
    style: "percent",
    maximumFractionDigits: 0
});

const result = stats.map(formatter);

console.log(result);

Результат:

["12 %", "34 %", "56 %"]

Использование в таблицах

const products = [
    { name: "A", discount: 0.15 },
    { name: "B", discount: 0.25 },
    { name: "C", discount: 0.4 }
];

const formatter = Globalize.numberFormatter({
    style: "percent"
});

products.forEach(product => {
    console.log(
        product.name,
        formatter(product.discount)
    );
});

Результат:

A 15 %
B 25 %
C 40 %

Сравнение с ручным форматированием

Ручной способ

const result = (0.25 * 100).toFixed(2) + "%";

Недостатки:

  • отсутствие локализации;
  • неверные разделители;
  • отсутствие региональных стандартов;
  • необходимость ручного контроля округления.

Форматирование через Globalize

const result = Globalize.formatNumber(0.25, {
    style: "percent",
    minimumFractionDigits: 2
});

Преимущества:

  • автоматическая локализация;
  • корректные пробелы;
  • стандартизированное округление;
  • единое API.

Парсинг процентных значений

Globalize поддерживает обратное преобразование строки в число.

Использование parseNumber

Globalize.locale("ru");

const value = Globalize.parseNumber("25 %");

console.log(value);

Результат:

0.25

Английская локаль

Globalize.locale("en");

console.log(
    Globalize.parseNumber("25%")
);

Результат:

0.25

Создание парсера процентов

Для интенсивной обработки данных используется специализированный парсер.

const parser = Globalize.numberParser({
    style: "percent"
});

console.log(parser("15 %"));
console.log(parser("75 %"));

Результат:

0.15
0.75

Использование с пользовательским вводом

const input = "48 %";

const parser = Globalize.numberParser({
    style: "percent"
});

const value = parser(input);

console.log(value);

Результат:

0.48

Обработка ошибок

Некорректные значения могут приводить к NaN.

const parser = Globalize.numberParser({
    style: "percent"
});

console.log(parser("abc"));

Результат:

NaN

Проверка:

const value = parser("abc");

if (Number.isNaN(value)) {
    console.log("Некорректный процент");
}

Производительность

При большом количестве операций рекомендуется:

  • создавать форматтер один раз;
  • избегать повторного вызова formatNumber;
  • кэшировать форматтеры;
  • не менять локаль слишком часто.

Неэффективный подход

for (let i = 0; i < 10000; i++) {
    Globalize.formatNumber(i / 100, {
        style: "percent"
    });
}

Оптимизированный подход

const formatter = Globalize.numberFormatter({
    style: "percent"
});

for (let i = 0; i < 10000; i++) {
    formatter(i / 100);
}

Практический пример аналитической панели

Globalize.locale("ru");

const formatter = Globalize.numberFormatter({
    style: "percent",
    maximumFractionDigits: 1
});

const analytics = {
    conversion: 0.1234,
    retention: 0.857,
    bounce: 0.432
};

console.log("Конверсия:", formatter(analytics.conversion));
console.log("Удержание:", formatter(analytics.retention));
console.log("Отказы:", formatter(analytics.bounce));

Результат:

Конверсия: 12,3 %
Удержание: 85,7 %
Отказы: 43,2 %

Комбинирование с другими стилями

Globalize позволяет использовать единый механизм форматирования для разных типов данных.

const percentFormatter = Globalize.numberFormatter({
    style: "percent"
});

const decimalFormatter = Globalize.numberFormatter();

console.log(percentFormatter(0.25));
console.log(decimalFormatter(0.25));

Результат:

25 %
0,25

Особенности процентного форматирования

Автоматическое умножение

Globalize интерпретирует:

0.25

как:

25 %

Передача значения 25 приведёт к:

2500 %

Это одна из наиболее распространённых ошибок при работе с процентами.

Корректная модель данных

Представление Значение
25% 0.25
100% 1
250% 2.5

Использование в React

import Globalize from "globalize";

const formatter = Globalize.numberFormatter({
    style: "percent",
    maximumFractionDigits: 1
});

function Discount({ value }) {
    return (
        <span>
            {formatter(value)}
        </span>
    );
}

Использование в Vue

export default {
    methods: {
        formatPercent(value) {
            return Globalize.formatNumber(value, {
                style: "percent"
            });
        }
    }
};

Использование в Node.js

const Globalize = require("globalize");

Globalize.locale("en");

const formatter = Globalize.numberFormatter({
    style: "percent"
});

console.log(
    formatter(0.45)
);

Результат:

45%
Оглавление