Как управлять количеством знаков после запятой при форматировании процентов
Задайте точное или максимальное количество знаков после запятой для процентных значений, чтобы контролировать точность и отображение
Введение
В разных ситуациях требуется разная точность отображения процентов. Например, процентная ставка 3,25% должна показываться с двумя знаками после запятой для точности. Конверсия на дашборде удобнее выглядит как 85,5% — с одним знаком после запятой для наглядности. Процент выполнения отлично воспринимается как 100% — без знаков после запятой.
Без контроля над количеством знаков после запятой форматирование процентов становится непоследовательным. Значение 0,8547 может отображаться как 85% в одном месте и как 85,47% в другом, что вызывает путаницу, какая из версий точная. Явно задавая количество знаков после запятой, вы обеспечиваете одинаковую точность по всему приложению.
API JavaScript Intl.NumberFormat предоставляет опции minimumFractionDigits и maximumFractionDigits для управления количеством знаков после запятой при форматировании процентов. Эти опции работают с учетом локали, чтобы проценты корректно отображались для пользователей по всему миру.
Как проценты отображаются по умолчанию
API Intl.NumberFormat по умолчанию форматирует проценты без знаков после запятой. Она умножает исходное значение на 100, округляет до ближайшего целого и добавляет знак процента.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
console.log(formatter.format(0.8547));
// Output: "85%"
console.log(formatter.format(0.8234));
// Output: "82%"
console.log(formatter.format(0.0325));
// Output: "3%"
Все проценты отображаются как целые числа, независимо от точности исходного значения. Форматтер округляет 0,8547 до 85%, а 0,8234 — до 82%, отбрасывая дробную часть.
Такое поведение по умолчанию отлично подходит для отображения процентов выполнения, результатов опросов и других значений, где дробная точность не имеет значения. Но во многих случаях важно показывать знаки после запятой для передачи точных данных.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
const conversionRate = 0.8547;
console.log(formatter.format(conversionRate));
// Output: "85%"
Отображение коэффициента конверсии как 85%, когда фактическое значение составляет 85,47%, скрывает важную точность, которая влияет на бизнес-решения и анализ.
Форматирование процентов с точным количеством знаков после запятой
Чтобы отображать определённое количество знаков после запятой, установите одинаковое значение для minimumFractionDigits и maximumFractionDigits. Это гарантирует, что каждый процент будет отображаться с точно таким количеством знаков после запятой.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.0325));
// Output: "3.25%"
console.log(formatter.format(0.85));
// Output: "85.00%"
Форматтер отображает ровно два знака после запятой для всех значений. Если во входных данных больше знаков, форматтер округляет до двух. Если меньше — дополняет нулями.
Установка одинаковых значений для обеих опций гарантирует одинаковое количество знаков после запятой для всех процентов в вашем приложении. Такая согласованность важна для финансовых данных, таблиц и любого интерфейса, где пользователи сравнивают несколько процентных значений.
Форматирование с одним знаком после запятой
Установите обе опции в 1, чтобы получить ровно один знак после запятой.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
console.log(formatter.format(0.8547));
// Output: "85.5%"
console.log(formatter.format(0.85));
// Output: "85.0%"
console.log(formatter.format(0.8234));
// Output: "82.3%"
Форматтер округляет 0,8547 до 85,5% и отображает 0,85 как 85,0% с завершающим нулём. Такой формат отлично подходит для дашбордов, где одной цифры после запятой достаточно для точности и не перегружает пользователя числами.
Форматирование с тремя и более знаками после запятой
В научных или финансовых приложениях иногда требуется больше двух знаков после запятой. Установите обе опции в 3 или больше для большей точности.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 3,
maximumFractionDigits: 3
});
console.log(formatter.format(0.854732));
// Output: "85.473%"
console.log(formatter.format(0.85));
// Output: "85.000%"
Форматтер отображает ровно три знака после запятой, при необходимости дополняя нулями. Такой уровень точности подходит для лабораторных измерений, статистического анализа или финансовых расчётов, где важна высокая точность.
Форматирование процентов с количеством знаков после запятой до N
Иногда нужно показывать десятичные знаки только тогда, когда они действительно важны. Установите maximumFractionDigits, чтобы ограничить точность, позволяя форматтеру опускать ненужные нули в конце.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.85));
// Output: "85%"
console.log(formatter.format(0.8));
// Output: "80%"
Форматтер отображает до двух знаков после запятой, но убирает лишние нули в конце. Значение 0.8547 будет показано как 85.47% с обоими знаками, а 0.85 — как 85% без лишних нулей.
Этот подход отлично подходит для отображения статистики, метрик или вычисленных значений, где нули в конце ничего не добавляют. Показывая 85% вместо 85.00%, вы делаете интерфейс чище и понятнее.
Вы можете установить minimumFractionDigits меньше, чем maximumFractionDigits, чтобы контролировать, сколько нулей в конце будет отображаться.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.85));
// Output: "85.0%"
console.log(formatter.format(0.8));
// Output: "80.0%"
Теперь форматтер всегда показывает хотя бы один знак после запятой, а второй — только если это нужно. Такой формат сохраняет визуальную согласованность и не перегружает лишней точностью.
Локализация разделителей десятичных знаков в процентах
В разных языках используются разные символы для разделения целой и дробной части. API Intl.NumberFormat автоматически применяет нужный разделитель для каждого языка.
const usFormatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const deFormatter = new Intl.NumberFormat("de-DE", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(usFormatter.format(rate));
// Output: "85.47%"
console.log(deFormatter.format(rate));
// Output: "85,47 %"
В американском английском форматтер использует точку как разделитель и ставит знак процента сразу после числа. В немецком — запятую и пробел перед знаком процента.
Эти различия встречаются во многих языках. Во французском тоже используется запятая, как в немецком. В арабском — другие формы цифр. API Intl.NumberFormat автоматически учитывает все эти нюансы, если вы укажете нужную локаль.
const frFormatter = new Intl.NumberFormat("fr-FR", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const arFormatter = new Intl.NumberFormat("ar-EG", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(frFormatter.format(rate));
// Output: "85,47 %"
console.log(arFormatter.format(rate));
// Output: "٨٥٫٤٧٪"
Арабский форматтер использует арабско-индийские цифры и арабский знак процента. Благодаря локализованному форматированию ваши проценты будут отображаться корректно для пользователей из любой страны и на любом языке.
Когда использовать точное и максимальное количество знаков после запятой
Выбирайте между точным и максимальным количеством знаков после запятой в зависимости от контекста и цели отображения процентов.
Используйте точное количество знаков после запятой для финансовых процентов, таких как процентные ставки, APR или доходность. Для этих значений важна постоянная точность из-за требований законодательства и ожиданий пользователей. Процентная ставка всегда должна отображаться как 3,25%, а не 3,3% или 3%, чтобы избежать путаницы с реальной ставкой.
Используйте точное количество знаков после запятой в таблицах данных и сравнительных отображениях, где пользователи видят сразу несколько процентов. Единый формат облегчает сравнение и предотвращает визуальную неравномерность, которая может создать ощущение разной точности данных.
Используйте максимальное количество знаков после запятой для дашбордов и сводной статистики, где важнее читаемость, чем точность. Например, 85% вместо 85,00% делает интерфейс чище. Показывайте знаки после запятой только если они действительно важны.
Используйте максимальное количество знаков после запятой для вычисляемых процентов, которые могут быть целыми числами. Проценты выполнения, успешности и распределения часто заканчиваются на .00 и выглядят лучше без лишних нулей.
Форматирование отрицательных процентов с десятичными знаками
Параметры знаков после запятой работают одинаково и для отрицательных процентов. Форматтер отображает нужное количество знаков вне зависимости от того, положительный процент или отрицательный.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(-0.0325));
// Output: "-3.25%"
console.log(formatter.format(-0.1547));
// Output: "-15.47%"
Знак минус ставится перед числом, а количество знаков после запятой соответствует выбранным настройкам форматирования. Это удобно для отображения изменений в процентах, падений или убытков.
Повторное использование форматтеров для повышения производительности
Создание нового экземпляра Intl.NumberFormat требует инициализации. Если вы форматируете много процентов с одинаковыми параметрами, создайте форматтер один раз и используйте его повторно.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rates = [0.8547, 0.0325, 0.9123, 0.0045];
rates.forEach(rate => {
console.log(formatter.format(rate));
});
// Output:
// "85.47%"
// "3.25%"
// "91.23%"
// "0.45%"
Этот способ эффективнее, чем создание нового форматтера для каждого процента. Разница в производительности становится заметной при форматировании сотен или тысяч значений, например, при отображении таблиц или графиков.
Использование предпочтительного языка пользователя
Вместо жёстко заданного языка используйте языковые предпочтения браузера пользователя, чтобы форматировать проценты в привычном для них формате. Свойство navigator.language предоставляет предпочитаемый язык пользователя.
const formatter = new Intl.NumberFormat(navigator.language, {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(formatter.format(rate));
// Output varies by user's locale
// For en-US: "85.47%"
// For de-DE: "85,47 %"
// For fr-FR: "85,47 %"
Вы также можете передать весь массив navigator.languages, чтобы API Intl выбрал первый поддерживаемый язык из предпочтений пользователя.
const formatter = new Intl.NumberFormat(navigator.languages, {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
Такой подход обеспечивает автоматический выбор запасного варианта, если первый язык пользователя не поддерживается средой выполнения.