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

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

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

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

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

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

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 (Японская Йена).

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

From

US Dollar

$

To

Korean Won
Japanese Yen

₩ 0


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

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

Котировки

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

Var jpy = accounting.toFixed(102.24, 0),
krw = accounting.toFixed(1077.80, 0),
Предоставляем выбор

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, и :

$("#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);
Готово! Вы можете просмотреть демо, представленное ниже.

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

Функция isFinite

Функция isFinite позволяет проверить, является ли аргумент конечным числом.

В качестве ответа данная функция возвращает false , если аргумент является Infinity , -Infinity , NaN или будет быть приведён к одному из этих специальных числовых значений. В противном случае данная функция вернёт значение true .

IsFinite(73); // true isFinite(-1/0); // false isFinite(Infinity); // false isFinite(NaN); // false isFinite("Текст"); // false

Кроме глобальной функции isFinite в JavaScript имеется ещё метод Number.isFinite . Он в отличие от isFinite не осуществляет принудительное приведения аргумента к числу.

IsFinite("73"); // true Number.isFinite("73"); // false

Функция isNaN

Функция isNaN предназначена для определения того, является ли аргумент числом или может ли быть преобразован к нему. Если это так, то функция isNaN возвращает false. В противном случае она возвращает true.

IsNaN(NaN); //true isNaN("25px"); //true, т.к. 20px - это не число isNaN(25.5); //false isNaN("25.5"); //false isNaN(" "); //false, т.к. пробел или неcколько пробелов преобразуется к 0 isNaN(null); //false, т.к. значение null преобразуется к 0 isNaN(true); //false, т.к. значение true преобразуется к 1 isNaN(false); //false, т.к. значение false преобразуется к 0

Если это действие нужно выполнить без приведения типа, то используйте метод Number.isNaN . Данный метод был введён в язык, начиная с ECMAScript 6.

Как явно преобразовать строку в число?

Явно привести строку в число можно посредством следующих способов:

1. Использовать унарный оператор + , который необходимо поместить перед значением.

+"7.35"; // 7.35 +"текст"; // NaN

Этот способ пренебрегает пробелами в начале и конце строки, а также \n (переводом строки).

+" 7.35 "; //7.35 +"7.35 \n "; //7.35

Используя данный способ необходимо обратить внимание на то, что пустая строка или строка, состоящая из пробелов и \n , переводится в число 0. Кроме этого она также преобразует тип данных null и логические значения к числу.

Null; //0 +true; //1 +false; //0 +" "; //0

2. Функция parseInt . Данная функция предназначена для преобразования аргумента в целое число . В отличие от использования унарного оператора + , данный метод позволяет преобразовать строку в число, в которой не все символы являются цифровыми . Начинает она преобразовывать строку, начиная с первого символа. И как только она встречает символ, не являющийся цифровым, данная функция останавливает свою работу и возвращает полученное число.

ParseInt("18px"); //18 parseInt("33.3%"); //33

Данная функция может работать с разными системами счисления (двоичной, восьмеричной, десятичной, шестнадцатеричной). Указание основание системы счисления осуществляется посредством 2 аргумента.

ParseInt("18px", 10); //18 parseInt("33.3%", 10); //33 parseInt("101",2); //5 parseInt("B5",16); //181

Кроме функции parseInt в JavaScript имеется метод Number.parseInt . Данный метод ничем не отличается от функции parseInt и был введён в JavaScript со спецификацией ECMASCRIPT 2015 (6).

3. Функция parseFloat . Функция parseFloat аналогична parseInt , за исключением того что позволяет выполнить преобразование аргумента в дробное число.

ParseFloat("33.3%"); //33.3

Кроме этого функция parseFloat в отличие от parseInt не имеет 2 аргумента, и следовательно она всегда пытается рассмотреть строку как число в десятичной системе счисления.

ParseFloat("3.14"); parseFloat("314e-2"); parseFloat("0.0314E+2");

Кроме функции parseFloat в JavaScript имеется метод Number.parseFloat . Данный метод ничем не отличается от функции parseFloat и был введён в JavaScript со спецификацией ECMASCRIPT 2015 (6).

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

Превратить число в строку можно с помощью метода toString .

(12.8).toString(); //"12.8"

Метод toString позволяет также указать основание системы счисления с учётом которой необходимо явно привести число к строке:

(255).toString(16); //"ff"

Как проверить является ли переменная числом

Определить является ли значение переменной числом можно используя один из следующих способов:

1. С использованием функций isNaN и isFinite:

// myVar - переменная if (!isNaN(parseFloat(myVar)) && isFinite(parseFloat(myVar))) { //myVar - это число или может быть приведено к нему };

В виде функции:

// функция function isNumeric(value) { return !isNaN(parseFloat(value)) && isFinite(parseFloat(value)); } // использование var myVar = "12px"; console.log(isNumeric(myVar)); //true

Этот способ позволяет определить является ли указанное значение числом или может быть приведено к нему. Данный вариант не считает числом пустую строку, строку из пробелов, значение null , Infinity , -Infinity , true и false .

2. С использованием оператора typeof и функций isFinite, isNaN:

// функция которая проверяет является ли значение числом function isNumber(value) { return typeof value === "number" && isFinite(value) && !isNaN(value); }; // использование функции isNumber isNumber(18); //true // использование функций для проверки текстовых значений isNumber(parseFloat("")); //false isNumber(parseFloat("Infinity")); //false isNumber(parseFloat("12px")); //true

Эта функция определяет имеет ли указанное значение тип Number, а также не принадлежит ли оно к одному из специальных значений Infinity, -Infinity и NaN. Эсли это так, то данная функция возвращает значение true.

3. С помощью метода ECMAScript 6 Number.isInteger(value) . Данный метод позволяет определить, является ли указанное значение целым числом.

Number.isInteger("20"); //false, т.к. данный метод не выполняет перевод строки в число Number.isInteger(20); //true, т.к. данное значение является числом

Чётные и нечётные числа

Проверить является ли число чётным или нечётным можно посредством следующих функций:

// Функция для проверки числа на чётность function isEven(n) { return n % 2 == 0; } // Функция для проверки числа на нечётность function isOdd(n) { return Math.abs(n % 2) == 1; }

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

Value = 20; if (Number.isInteger(value)) { if (isEven(value)) { console.log("Число " + value.toString() + " - чётное"); } }

Простые числа в Javascript

Рассмотрим пример в котором выведем с помощью Javascript простые числа от 2 до 100.

// Функция, которая проверяет является ли число простым function isPrime(value) { if (isNaN(value) || !isFinite(value) || value%1 || value < 2) return false; var max=Math.floor(Math.sqrt(value)); for (var i = 2; i< = max; i++) { if (value%i==0) { return false; } } return true; } // создать массив, который будет содержать простые числа от 2 до 100 var primaryNumber = ; for (var i = 2; i (больше), < (меньше), >= (больше или равно), 3); //false console.log(5>=3); //true

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

Например, в JavaScript сумма чисел (0.2 + 0.4) не равна 0.6:

Console.log((0.2+0.4)==0.6); //false

Погрешности происходят потому что все вычисления компьютер или другое электронное устройство производит в 2 системе счисления. Т.е. перед тем как выполнить какие-то действия компьютер сначала должен преобразовать представленные в выражении числа в 2 систему счисления. Но, не любое дробное десятичное число можно представить в 2 системе счисления точно.

Например, число 0.25 10 в двоичную систему преобразуется точно.

0.125 × 2 = 0.25 | 0 0.25 × 2 = 0.5 | 0 0.5 × 2 = 1 | 1 0.125 10 = 0.001 2

Например, число 0.2 10 можно преобразовать в 2 систему только с определённой точностью:

0.2 × 2 = 0.4 | 0 0.4 × 2 = 0.8 | 0 0.8 × 2 = 1.6 | 1 0.6 × 2 = 1.2 | 1 0.2 × 2 = 0.4 | 0 0.4 × 2 = 0.8 | 0 0.8 × 2 = 1.6 | 1 0.6 × 2 = 1.2 | 1 0.2 × 2 = 0.4 | 0 0.4 × 2 = 0.8 | 0 0.8 × 2 = 1.6 | 1 0.6 × 2 = 1.2 | 1 ... 0.2 10 = 0.001100110011... 2

В результате эти погрешности скажутся при вычисления суммы двух чисел и результатах сравнения. Т.е. получится что на самом деле JavaScript будет видет эту запись следующим образом:

0.6000000000000001==0.6

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

Например, сравнить числа до 2 знаков после запятой используя методы toFixed() и toPrecision() :

//метод toFixed() console.log((0.2+0.4).toFixed(2)==(0.6).toFixed(2)); //true //метод toPrecision() console.log((0.2+0.4).toPrecision(2)==(0.6).toPrecision(2)); //true

Основные математические операции

В JavaScript существуют следующие математические операторы: + (сложение), - (вычитание), * (умножение), / (деление), % (остаток от деления), ++ (увелить значение на 1), -- (уменьшить значение на 1).

6+3 //9 6-3 //3 6*3 //18 6/3 //2 6%3 //0, т.е. 6:3=2 => 6-3*2 => ост(0) 5%2 //1, т.е. 5:2=2(.5) => 5-2*2 => ост(1) 7.3%2 //1.3, т.е. 7.3:2=3(.65) => 7.3-2*3 => ост(1.3) //знак результата операции % равен знаку первого значения -9%2.5 //-1.5, т.е. 9:2.5=3(.6) => 9-2.5*3 => ост(1.5) -9%-2.5 //-1.5, т.е. 9:2.5=3(.6) => 9-2.5*3 => ост(1.5) -2%5 //-2, т.е. 2:5=0(.4) => 2-5*0 => ост(2) x = 3; console.log(x++); //выводит 3, у уже потом устанавливает 4 console.log(x); //4 x = 3; console.log(++x); //устанавливает 4 и выводит x = 5; console.log(x--); //выводит 5, у уже потом устанавливает 4 console.log(x); //4 x = 5; console.log(--x); //устанавливает 4 и выводит Кроме этого в JavaScript есть комбинированные операторы: x+=y (x=x+y), x-=y (x=x-y), x*=y (x=x*y), x/=y (x=x/y), x%=y (x=x%y). x = 3; y = 6; x+=y; console.log(x); //9 x = 3; y = 6; x-=y; console.log(x); //-3 x = 3; y = 6; x*=y; console.log(x); //18 x = 3; y = 6; x/=y; console.log(x); //0.5 x = 3; y = 6; x%=y; console.log(x); //3