Форматирование чисел с помощью Intl.NumberFormat

397

14.06.2021

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

Вадим Пашаев

Вадим Пашаев

Инженер, веб-разработчик, путешественник

Форматирование чисел с помощью Intl.NumberFormat | PXSTUDIO

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

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

Написание кода интернационализации могло быть кошмаром для разработчика, но, к счастью, JavaScript предоставляет нам Intl.NumberFormat, API для интернационализации чисел как валют и многого другого. Давай проверим!

Вот несколько примеров, что можно сделать с помощью Intl.NumberFormat:

new Intl.NumberFormat().format(12345)
// 12 345

new Intl.NumberFormat('en-US', { maximumSignificantDigits: 4}).format(1.2345678)
// 1.235 (Заметьте, число округляется)

new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' }).format(9002.20)
// £9,002.20

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(9002.20)
// 9.002,20 €

new Intl.NumberFormat().formatToParts(12345.678)
/*
[
   { "type":"integer", "value":"12" },
   { "type":"group", "value":"," },
   { "type":"integer", "value":"345" },
   { "type":"decimal", "value":"." },
   { "type":"fraction", "value":"678" }
]
*/

Не утруждайте себя написанием собственных функций форматирования чисел на стороне клиента, если числа, которые вы хотите представить, являются стандартными форматами. Лучше используйте удивительные API-интерфейсы, которые предоставляет вам браузер!

Читать далее

Формат микроразметки JSON-LD: Для чего он? | PXSTUDIO
Формат микроразметки JSON-LD: Для чего он?

В статье рассказываем о формате разметки JSON-LD. Какие у нее есть преимущества и как ее лучше внедрить. Знаний кода не потребуетс...

Top 5 популярных плагинов для VSCode | PXSTUDIO
Top 5 популярных плагинов для VSCode

VSCode (или Visual Studio Code от Microsoft) - является одним из самых популярных редакторов кода. Помимо того, что он имеет целый...

Лучшие практики SEO в Headless CMS на примере Strapi | PXSTUDIO
Лучшие практики SEO в Headless CMS на примере Strapi

Если вы хотите использовать автономную CMS, которая выделяется с точки зрения SEO? Вы наткнулись на нужную статью. В этом посте я ...

Подписаться на рассылку

Получите интересные новости по веб-разработке и AI

Этот сайт защищен reCAPTCHA, применяются Политика конфиденциальности и Условия использования Google.

Подписаться на рассылку

Получите интересные новости по веб-разработке и AI

Этот сайт защищен reCAPTCHA, применяются Политика конфиденциальности и Условия использования Google.

Расскажите, что нужно сделать

Разберем задачу и предложим следующий шаг

Contact to pxstudio

Сайт, сервис, Telegram-бот, AI-интеграция или оптимизация текущего проекта — опишите ситуацию, а мы подскажем нормальный технический путь.

Этот сайт защищен reCAPTCHA, применяются Политика конфиденциальности и Условия использования Google.

Есть интересная идея?

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