Как отформатировать число как строку валюты в JavaScript

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

Вступление

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

В этом руководстве мы рассмотрим, как отформатировать строку валюты в JavaScript .

Форматирование строк как валюты с языковым стандартом

Локаль - это набор параметров, которые определяют на вашем компьютере все, что зависит от региона:

  • Настройка числового формата
  • Классификация символов, настройки преобразования регистра
  • Настройка формата даты и времени
  • Настройка формата валюты
  • Настройка размера бумаги
  • Формат дня недели / первый день недели
  • Меры измерения

Пользователи Windows знают параметры локали как Region settings . С другой стороны, пользователи Linux могут не знать, что вы можете использовать команду locale для проверки указанных параметров.

В JavaScript самый простой и популярный способ форматирования чисел в виде строк валюты - использование Intl.NumberFormat() . Этот подход позволяет форматировать числа с использованием настраиваемых параметров локали - и в этой статье мы сосредоточимся на валютах.

Конструктор Intl.NumberFormat() принимает два аргумента , первый из которых является строкой языкового стандарта, с помощью которой мы определяем языковой стандарт, который хотим отформатировать:

 const price = 1470000.15; 
 
 let dollarUSLocale = Intl.NumberFormat('en-US'); 
 let dollarIndianLocale = Intl.NumberFormat('en-IN'); 
 
 console.log("US Locale output: " + dollarUSLocale.format(price)); 
 console.log("Indian Locale output: " + dollarIndianLocale.format(price));

Это выводит:

 1,470,000.15 
 14,70,000.15

Здесь у нас есть локализованные варианты price формате простого числа. Тем не менее, есть определенные параметры, которые мы также можем настроить для дальнейшей настройки этого процесса форматирования.

Второй аргумент можно использовать для указания параметров, которые вы хотите применить при форматировании. Это объект JavaScript, который может содержать, но не ограничивается:

  • style
  • currency
  • useGrouping
  • maximumSignificantDigits

Давайте посмотрим на эти свойства по отдельности.

Стиль

В style указывается тип форматирования, который вы хотите использовать. Возможные значения включают:

  • decimal - Форматирование десятичных чисел.
  • currency - Форматирование валюты.
  • unit - Форматирование метрических или британских единиц.

В нашем сценарии мы просто форматируем currency строки.

Валюта

Используя currency , вы можете указать, какую конкретную валюту вы хотите отформатировать, например 'USD' , 'CAD' или 'INR' .

Отформатируем нашу price в разных валютах:

 const price = 1470000.15; 
 
 // Format the price above to USD, INR, EUR using their locales. 
 let dollarUS = Intl.NumberFormat("en-US", { 
 style: "currency", 
 currency: "USD", 
 }); 
 
 let rupeeIndian = Intl.NumberFormat("en-IN", { 
 style: "currency", 
 currency: "INR", 
 }); 
 
 let euroGerman = Intl.NumberFormat("de-DE", { 
 style: "currency", 
 currency: "EUR", 
 }); 
 
 console.log("Dollars: " + dollarUS.format(price)); 
 // Dollars: $147,000,000.15 
 
 console.log("Rupees: " + rupeeIndian.format(price)); 
 // Rupees: ₹14,70,000.15 
 
 console.log("Euros: " + euroEU.format(price)); 
 // Euros: 1.470.000,15 €

Дополнительные опции

Поле useGrouping - это логическое поле, которое позволяет группировать числа, используя запятые (или точки, для некоторых языков). По умолчанию установлено значение true , как мы могли видеть в выходных данных выше.

Выключим:

 let dollarUS = Intl.NumberFormat("en-US", { 
 style: "currency", 
 currency: "USD", 
 useGrouping: false, 
 }); 
 // $1470000.15

Поле maximumSignificantDigits позволяет вам установить количество значащих цифр для цены. Это можно использовать для округления вашей ценовой переменной в зависимости от количества установленных вами значащих цифр.

Значимые цифры, говоря упрощенно, - это цифры представления числа, которые имеют любой вес с точки зрения точности.

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

Значащие цифры включают:

  1. Все ненулевые цифры
  2. Нули между двумя ненулевыми цифрами.
  3. Нули справа от всех ненулевых цифр, но только если они обозначают более высокую точность

Незначительные цифры включают:

  1. Нули слева от всех ненулевых цифр
  2. Нули справа от всех ненулевых цифр, не обозначающих точность

Например, в числе 000003.1240000 всего 4 значащих цифры, если наша точность составляет 4 значащих цифры ( 3.124 ). Однако может быть и 5 значащих цифр, если наша точность составляет 5 значащих цифр ( 3.1240 ).

Пример показан ниже:

 const price = 147741.15; 
 
 // Format the above price dollar currency 
 let dollarUS = Intl.NumberFormat("en-US", { 
 style: "currency", 
 currency: "USD", 
 useGrouping: true, 
 maximumSignificantDigits: 3, 
 }); // $148,000 
 
 let dollarUS2 = Intl.NumberFormat("en-US", { 
 style: "currency", 
 currency: "USD", 
 useGrouping: true, 
 }); // $147,741.15

Заключение

В этом руководстве мы рассмотрели, как отформатировать число как строку валюты в JavaScript. Для этого мы использовали метод Intl.NumberFormat() с желаемой локалью и несколькими настройками, которые мы можем использовать для настройки процесса форматирования.

comments powered by Disqus

Содержание