Как форматировать компактные числа с помощью API интернационализации JavaScript

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

Как следствие, многие современные сайты и программы используют тот же формат для отображения больших чисел в компактном виде. К примеру, отображение 123 000 как 123K.

Профили freeCodeCamp на YouTube и Instagram в компактном формате.
Профили freeCodeCamp на YouTube и Instagram в компактном формате.

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

Вы, конечно, можете написать свою функцию форматирования (и есть несколько доступных на Stack Overflow), но вам придется проверять много условий.

Кроме того, начиная с ES2021 JavaScript поддерживает использование символов подчеркивания как разделителей чисел, чтобы облегчить чтение больших чисел в вашем коде.

function formatCompactNumber(number) {
  if (number < 1000) {
    return number;
  } else if (number >= 1000 && number < 1_000_000) {
    return (number / 1000).toFixed(1) + "K";
  } else if (number >= 1_000_000 && number < 1_000_000_000) {
    return (number / 1_000_000).toFixed(1) + "M";
  } else if (number >= 1_000_000_000 && number < 1_000_000_000_000) {
    return (number / 1_000_000_000).toFixed(1) + "B";
  } else if (number >= 1_000_000_000_000 && number < 1_000_000_000_000_000) {
    return (number / 1_000_000_000_000).toFixed(1) + "T";
  }
}

formatCompactNumber(12_000);        // 12.0K
formatCompactNumber(2_000_000);     // 2.0M
formatCompactNumber(2_500_000);     // 2.5M
formatCompactNumber(6_000_000_000); // 6.0B
formatCompactNumber(6_900_000_000); // 6.9B

Эта реализация все еще оставляет a .0 после парной тысячи, миллиона, миллиарда или триллиона. Вы можете исправить это с помощью replace метод и регулярное выражение

function formatCompactNumber(number) {
  if (number < 1000) {
    return number;
  } else if (number >= 1000 && number < 1_000_000) {
    return (number / 1000).toFixed(1).replace(/\.0$/, "") + "K";
  } else if (number >= 1_000_000 && number < 1_000_000_000) {
    return (number / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
  } else if (number >= 1_000_000_000 && number < 1_000_000_000_000) {
    return (number / 1_000_000_000).toFixed(1).replace(/\.0$/, "") + "B";
  } else if (number >= 1_000_000_000_000 && number < 1_000_000_000_000_000) {
    return (number / 1_000_000_000_000).toFixed(1).replace(/\.0$/, "") + "T";
  }
}

Но что если вам нужно обрабатывать отрицательные числа? Вы можете добавить другое условие.

function formatCompactNumber(number) {
  if (number < 0) {
    return "-" + formatCompactNumber(-1 * number);
  }
  if (number < 1000) {
    return number;
  } else if (number >= 1000 && number < 1_000_000) {
    return (number / 1000).toFixed(1).replace(/\.0$/, "") + "K";
  } else if (number >= 1_000_000 && number < 1_000_000_000) {
    return (number / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
  } else if (number >= 1_000_000_000 && number < 1_000_000_000_000) {
    return (number / 1_000_000_000).toFixed(1).replace(/\.0$/, "") + "B";
  } else if (number >= 1_000_000_000_000 && number < 1_000_000_000_000_000) {
    return (number / 1_000_000_000_000).toFixed(1).replace(/\.0$/, "") + "T";
  }
}

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

Существует несколько пакетов npm для компактного форматирования чисел. Например, можно установить cldr-compact-numberно это также добавит 3 килобайта (или 1,2 килобайта, заархивированные gzip) к вашему пакету JavaScript, немного увеличив время загрузки страницы.

К счастью, вам не нужно использовать какие-либо посторонние библиотеки для форматирования компактных чисел, поскольку существует относительно простое решение, которое поддерживается в JavaScript.

Как использовать API интернационализации JavaScript

API интернационализации JavaScript помогает поддерживать разные языки и правила форматирования при работе в JavaScript. Это может быть что угодно: от форматирования даты и времени до определения того, есть ли a или ä стоит первым при сравнении строк.

API имеет отличную поддержку браузера, с 98% поддержки по всему миру. Это работает с помощью Intl объект для создания пространства имен для сравнения строк, чувствительных к языку, форматирование чисел и форматирование даты и времени.

Так же, как Intl.DateTimeFormat для форматирования дат и времени, а также Intl.Collator для сравнения строк, чувствительных к языку, есть Intl.NumberFormat. Это позволяет форматировать числа в соответствии с языком.

Чтобы начать, создайте форматер с помощью Intl.NumberFormat конструктор. По желанию вы можете передать ему одну или несколько локалей и options объект.

new Intl.NumberFormat(locales, options);

Локаль – это параметр, определяющий язык, регион или другие параметры локализации пользователя. В этом случае это языковой тег IETF, например en-US для американского английского языка, zh-CH для мандаринского или uk для украинского языка.

В браузере вы можете получить доступ к языку пользователя с помощью navigator.language. Если вы не укажете язык, API попытается использовать язык пользователя из его браузера.

The options объект может содержать значение для управления вещами, например, как форматировать валюту или использовать l или litersили отображать + или - для положительных или отрицательных значений.

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

Например, вы можете использовать API интернационализации для форматирования финансовых значений в соответствии с разными валютами:

const number = 12345678.99

const germanCurrencyFormatter = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" });

const chineseCurrencyFormatter = new Intl.NumberFormat("zh-CH", { style: "currency", currency: "CNY" });

germanCurrencyFormatter.format(number); // 12.345.678,99 €
chineseCurrencyFormatter.format(number); // ¥12,345,678.99

Одним из доступных вариантов является notation. Это управляет форматированием при отображении чисел. Возможные значения для notation есть:

  • "standard" – обычное форматирование чисел в соответствии с условиями локали (по умолчанию)
  • "scientific" – возвращает порядок величины числа
  • "engineering" – возвращает степень десяти, если число делится на три
  • "compact" – возвращает строку, представляющую экспоненту, например K для тысяч

Так, например, если вы отформатируете число 123456789 с установкой языка «en», вы получите:

  • стандарт: 123 456 789
  • наук.: 1.235E8
  • инженерия: 123.457E6
  • компактный: 123M

Если вы хотите, чтобы программа форматирования отображала большие числа компактно, установите желаемый язык и установите notation к "compact" .

const formatter = Intl.NumberFormat("en", { notation: "compact" });

Это можно использовать для создания значительно более короткой функции форматирования:

function formatCompactNumber(number) {
  const formatter = Intl.NumberFormat("en", { notation: "compact" });
  return formatter.format(number);
}

formatCompactNumber(-57);               // -57
formatCompactNumber(999);               // 999
formatCompactNumber(8_554);             // 8.5K
formatCompactNumber(150_000);           // 150K
formatCompactNumber(3_237_512);         // 3.2M
formatCompactNumber(9_782_716_897);     // 9.8B
formatCompactNumber(7_899_693_036_970); // 7.9T

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

Спасибо за чтение!

Надеюсь, это краткое руководство поможет вам, когда вы работаете с большими числами в JavaScript, и, возможно, побуждает вас глубже изучить API интернационализации.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *