Форматирование числа в JavaScript

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

Это может стать проблемой, если вы попытаетесь сделать это вручную в зависимости от местоположения пользователя. Но не беспокойтесь, вам не нужно делать это вручную, поскольку есть лучший способ форматирования числа в JavaScript, и это с помощью метода toLocalString(). Этот метод возвращает строку с языковым представлением числа.

Форматирование чисел с помощью метода toLocaleString() в JavaScript

Он принимает два параметра: первый - locales, а второй - options. Оба эти параметра являются необязательными, то есть не обязательными. Вы также можете напрямую запустить метод, не передавая эти параметры. Если вы хотите отформатировать числа, в данном случае мы это делаем, то нам нужно передать эти параметры.

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

1. Параметр locales

locales - это первый параметр, который принимает метод toLocalString(). Он представляет собой строку языковых тегов BCP 47 или массив таких строк. Языковой тег BCP 47 - это код для идентификации человеческих языков.

Например, тег ar-SA означает, что это арабский язык, представленный ar, на котором говорят в регионе Саудовской Аравии SA. Итак, если вы передадите эту строку в качестве первого аргумента, она отформатирует число так, чтобы оно было написано на арабском языке.

let eArabic = (number => {
  return number.toLocaleString('ar-SA');
});

console.log(eArabic(12345));

Выход:

١٢٬٣٤٥

Здесь мы создали стрелочную функцию под названием eArabic, которая принимает число в качестве параметра. Теперь мы передаем этой стрелочной функции число 12345. Эта функция предназначена для преобразования числа 12345 в его арабский эквивалентный формат ar-SA с помощью метода toLocalString().

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

Чтобы узнать больше обо всех языковых тегах BCP 47, вы можете взглянуть на этот ресурс.

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

2. Параметр options

Параметры - это объект, и это второй параметр, который принимает метод toLocalString(). Поскольку это объект, этот параметр может принимать различные свойства, такие как currency, currencySign, style, unitDisplay и многие другие.

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

let eArabic = (number => {
  return number.toLocaleString('ar-SA', {style: 'currency',currency: 'SAR', minimumFractionDigits: 3});
});

console.log(eArabic(12345));

Выход:

١٢٬٣٤٥٫٠٠٠ ر.س

В данном случае к методу toLocaleString() мы добавили еще и параметр options, который является объектом. В настоящее время он принимает 3 свойства, свойство style отформатирует число в денежном формате, свойство currency будет указывать, какую валюту оно представляет, в данном случае саудовский риал SAR, а свойство minimumFractionDigits представляет сколько дробные цифры, которые нужно отображать в конце числа.

Здесь, если вы устанавливаете свойство style с валютой значения, вы также должны установить свойство currency с некоторым значением. В противном случае вы получите ошибку типа: Currency code is required with currency style..

В выходных данных вышеуказанной программы у нас сначала есть название валюты Саудовский Риал ر.س.. Если бы это был доллар США, то это был бы символ $. Тогда у нас есть само число на арабском языке ١٢٬٣٤٥. Если бы это было в долларах, то это было бы 12,345. Наконец, у нас есть 3 цифры после точки, которая представлена ​​на арабском языке как ٫٠٠٠, а доллар США - как .000.

// USD format
$12,345.000

Здесь мы также предоставляем вам вывод для формата валюты США, чтобы легко связать его с выводом формата валюты Саудовской Аравии, поскольку людям может быть трудно понять арабский язык.

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

Сопутствующая статья - JavaScript Number

  • Преобразование числа в двоичный формат в JavaScript