Форматирование чисел с помощью Accounting.js – Hongkiat

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

Если вам нужно, чтобы числа отображались в формате валюты или разделялись запятыми или десятичными точками, тогда вам понравится использовать Accounting.js, библиотека JavaScript для форматирования денег и валюты.

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

Начиная

Accounting.js – это библиотека JavaScript без каких-либо зависимостей. Вам не нужен jQuery, чтобы использовать его; он может работать сам по себе. Загрузите исходный код с хранилище Githubпоместите его в соответствующий каталог и свяжите файл с документом HTML.

Основное форматирование

Accounting.js предлагает несколько способов форматирования чисел. И первым, на что мы обратим внимание, является formatMoney (). Этот метод является основной функцией для преобразования чисел в валюту. Чтобы использовать его, каждый метод инициализируется бухгалтерским учетом, а затем следует имя метода. Например:

accounting.formatMoney (2000000);

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

$ 2,000,000.00

В некоторых странах используются разные разделители для каждых трех цифр (тысяч) и десятичных. Accounting.js полностью локализуем. Если вывод по умолчанию не соответствует отображению в местной валюте, вы можете внести изменения с помощью параметров.

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

accounting.formatMoney (2000000, {
символ: «€»,
тысяча : “.”,
десятичный : “,”,
});

Это выведет:

€ 2.000.000,00

Если вы хотите отформатировать число без символа валюты, вы можете использовать метод formatNumber ().
Округление числа
Валюты могут иметь десятичные дроби. Но мы обычно округляем их вверх или вниз до ближайшего значения, чтобы число было проще запомнить или угадать. В Accounting.js мы можем использовать .toFixed () для этого. Этот пример показывает, как мы удаляем десятичные цифры, а также округляем их до десятых:

бухгалтерский учет.Исправлено (102.58, 0);

Выход:

103

Создание простого конвертера валют

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

В этом упражнении мы конвертируем доллары США в 2 валюты, а именно KRW (корейская вона) и JPY (японская иена).

Разметим структуру документа следующим образом:

Как мы видим выше, у нас есть два ряда div. Первая строка содержит опцию раскрывающегося списка, которая установлена ​​в долларах США и отключена, поэтому пользователь не сможет выбрать другую опцию. Эта строка также содержит поле ввода числового типа, в которое мы будем вводить сумму в долларах США для конвертации.

Во втором ряду у нас также есть выпадающий вариант, содержащий два варианта валюты: корейский вон и японская иена. Каждая опция имеет атрибут value и атрибут data-symbol для хранения символа валюты. Мы используем элемент span для вывода преобразованного результата.
Обменный курс
На момент написания этой статьи 1 доллар США равнялся KRW1077.80 и JPY102.24. Мы можем получить эти значения обменного курса в режиме реального времени из Открытый курс обмена, Но сейчас мы просто помещаем значение в переменную с помощью метода .toFixed (), чтобы округлить число:

var jpy = accounting.toFixed (102.24, 0),
krw = accounting.toFixed (1077.80, 0),

Получить опцию
Далее мы создадим новую функцию для получения значения из атрибута value и data-symbol из выпадающего меню. Значения затем сохраняются в массиве.

var getCurrency = function (elem) {
var $ curAbbr = elem.find (‘: selected’). val (),
$ curSign = elem.find (‘: selected’). data (‘symbol’);
возвращение {
‘symbol’: $ curSign,
‘значение’: $ curAbbr,
};
};

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

Чтобы реализовать эту идею, мы назначим # output-currency, а также # input-number с тремя событиями JavaScript, а именно изменение, KeyUp, а также KeyDown сюда:

$ (‘# output-currency, # input-number’). on (‘change keyup keydown’, function () {
// вещи
}

Затем мы получим значение из выпадающего меню, # output-currency, с помощью функции getCurrency, которую мы создали выше. Значения разделены внутри двух разных переменных, а именно $ symbol и $ val, следующим образом.

var $ currency = getCurrency ($ (‘# output-currency’)),
$ символ = $ валюта[‘symbol’],
$ val = $ currency[‘value’];

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

// получить номер
var mulitplyNum = ($ val == ‘jpy’)? jpy: krw;
var $ getInput = $ (‘# input-number’). val ();

С этими числами выше, мы можем рассчитать результат.

var $ getTotal = ($ getInput * mulitplyNum);

Но прежде чем вывести число, давайте обернем его в правильный формат, используя метод .formatMoney ():

var number = accounting.formatMoney ($ getTotal, {
символ: символ $,
точность: 0,
тысяча : ‘,’
});

И, наконец, мы выводим окончательный форматированный номер.

. $ ( ‘Выход номер #’) текст (номер);

И мы сделали. Вы можете увидеть демо в действии ниже.

Вы также можете попробовать сами на нашей демо-странице.

Последняя мысль

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