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

196

6/14/2021

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

Вадим Пашаев

Вадим Пашаев

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

Форматирование чисел с помощью Intl.NumberFormat | PXSTUDIO
Регистрация товарных знаков
Домены, хостинг от reg.ru

В прошлой статье мы затронули форматирование разрядов чисел для программистов Улучшение читаемости больших чисел с помощью числовых разделителей в 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-интерфейсы, которые предоставляет вам браузер!

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

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

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

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

Оценка проекта

Хотите быструю оценку Вашего проекта?

Василий Иванов
Максим Насенников
Виктория Мальцева
Vadim Pashaev

Заполните форму справа и наша команда экспертов поможет найти для Вас оптимальное решение вашей идеи или задачи

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

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