—»     —»   Форматирование чисел при помощи Accounting.js
  Раздел: Библиотеки скриптов   Нет комментариев  

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



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

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

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

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

Приступаем к работе

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

<script src="js/accounting.js"></script>

Базовое форматирование

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

accounting.formatMoney(2000000);

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

$2,000,000.00

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

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

accounting.formatMoney(2000000, {	
symbol : "€",
thousand : ".",
decimal : ",",
});

Данный код в результате даст нам:

€2.000.000,00

Если вы хотите форматировать числа без указания символа валюты, то можно использовать метод formatNumber():

Округляем числа

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

accounting.toFixed(102.58, 0);

В результате мы получим:

103

Создаем простой конвертер валют

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

В данном примере мы будем конвертировать USD в 2 валюты, которые называются KRW (Корейский Вон) и JPY (Японская Йена).

Давайте используем следующую структуру документа:

<div class="currency-option">
<div class="row">
<h4 class="heading">From</h4>
<select id="input-currency" disabled>
<option value="USD" data-symbol="$" selected>US Dollar</option>
</select>
<span id="input-symbol">$</span> <input id="input-number" class="input" type="number" min="0">
</div>

<div class="row">
<h4 class="heading">To</h4>
<select id="output-currency">
<option value="krw" data-symbol="&#8361;" selected>Korean Won</option>
<option value="jpy" data-symbol="&#165;">Japanese Yen</option>
</select>
<span id="output-number">&#8361; 0</span>
</div>
</div>

Как видно выше, здесь у нас есть 2 строки с div-элементами. Первая строка содержит выпадающий список опций, который выставлен на USD, и он отключен, так как у пользователей не будет возможность выбирать валюту в данном поле. Эта строка также содержит поле ввода типа чисел, куда нужно вводить количество конвертируемых USD.

Во второй строке у нас также выпадающий список, который содержит 2 валюты: корейский вон и японская йена. Каждая опция имеет атрибуты value и data-symbol, в котором будет храниться знак валюты. Мы используем span-элемент для вывода конвертированного результата.

Котировки

На момент написания статьи 1 USD был равен KRW1077.80 и JPY102.24. Мы можем получить эти значения котировок в реальном времени при помощи Open Exchange Rate. Однако на данный момент мы просто помещаем значение в переменную при помощи метода .toFixed() для того, чтобы округлить значение:

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

Предоставляем выбор

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

var getCurrency = function(elem) {
var $curAbbr = elem.find(':selected').val(),
$curSign = elem.find(':selected').data('symbol');
return {
'symbol' : $curSign,
'value' : $curAbbr,
};
};

Функция конвертации

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

Чтобы добиться этого, мы применяем #output-currency, а также #input-number с 3-мя javascript-событиями под названием change, keyup и keydown:

$('#output-currency, #input-number').on('change keyup keydown', function() {
// the stuff
}

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

var $currency = getCurrency($('#output-currency')),
$symbol = $currency['symbol'],
$val = $currency['value'];

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

// get number
var mulitplyNum = ($val == 'jpy') ? jpy : krw;
var $getInput = $('#input-number').val();

Используя вышеприведенные числа, мы высчитываем результат.

var	$getTotal   = ($getInput * mulitplyNum);

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

var	number = accounting.formatMoney($getTotal, {
symbol : $symbol,
precision : 0,
thousand : ','
});

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

$('#output-number').text(number);

Готово! Вы можете просмотреть демо, представленное ниже.

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

Также можете опробовать данный пример в действии.

Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


В завершение

На самом деле, форматировать числа не так уж и сложно. При помощи Accounting.js всё это можно делать проще простого. Кроме того, мы показали вам, как реализовать полностью функционирующий конвертер валют.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, конвертеры
Опубликовал Design FactoRy   Прочитано (раз): 3621   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930