Как осуществляется на JavaScript форматирование чисел

Специальной функции, которая выполняет на JavaScript форматирование чисел нет. Создавая некий скрипт, который должен что-то считать, хотелось бы получить адекватное представление числа. Согласитесь, гораздо проще читать число 85 738 998.34, чем то же самое 85738998.34, но без разделителя разрядов.

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

Нужно заметить, что просчеты с форматированием чисел можно заметить даже на солидных сайтах.

Варианты решения

Вариантов решения проблемы может быть несколько:

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

Такое решение имеет ряд серьезных недостатков:

  1. Нужно написать серверную процедуру, которая при каждом изменении будет форматировать числа.
  2. Для перерасчета нужно каждый раз перезагружать страницу, что неизбежно будет раздражать пользователя.
  3. Без перезагрузки страницы нужно написать AJAX процедуру на стороне клиента, которая будет отправлять, и принимать соответствующий запрос. Обработка запросов будет занимать какое-то время, в зависимости от скорости клиента и загруженности сервера. На недорогих хостингах тоже может быть не самой замечательной идеей. Опять же от программиста требует больших трудозатрат.

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

Написать функцию на JavaScript для форматирования чисел или скачать готовую

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

Исходный код функции JavaScript форматирование чисел

Исходный код файла с JavaScript функцией можете скачать: Функция JavaScript для форматирования чисел

Файл записан в кодировке UTF-8 с комментариями на русском языке. Полностью повторяет исходный код, приведенный в примере ниже.

/**
 * Форматирование числа.
 * @author Andrey Mishchenko (http://www.msav.ru/)
 * @param val - Значение для форматирования
 * @param thSep - Разделитель разрядов
 * @param dcSep - Десятичный разделитель
 * @returns string
 */
function numeric_format(val, thSep, dcSep) {

	// Проверка указания разделителя разрядов
	if (!thSep) thSep = ' ';

	// Проверка указания десятичного разделителя
	if (!dcSep) dcSep = ',';

	var res = val.toString();
	var lZero = (val < 0); // Признак отрицательного числа

	// Определение длины форматируемой части
	var fLen = res.lastIndexOf('.'); // До десятичной точки
	fLen = (fLen > -1) ? fLen : res.length;

	// Выделение временного буфера
	var tmpRes = res.substring(fLen);
	var cnt = -1;
	for (var ind = fLen; ind > 0; ind--) {
		// Формируем временный буфер
		cnt++;
		if (((cnt % 3) === 0) && (ind !== fLen) && (!lZero || (ind > 1))) {
			tmpRes = thSep + tmpRes;
		}
		tmpRes = res.charAt(ind - 1) + tmpRes;
	}

	return tmpRes.replace('.', dcSep);

}

Подключение JavaScript файла

Скачайте файл, распакуйте его и запишите в один из каталогов вашего сайта.

В разделе HEAD вашего сайта впишите код:

<script type='text/javascript' src='(путь к файлу у вас на сайте)/numeric_format.js?ver=20130613'></script>

Использование функции форматирования чисел

У функции три аргумента:

  1. val (обязательный) – число, которое вы собираетесь форматировать.
  2. thSep (необязательный) – разделитель разрядов. По-умолчанию будет использоваться пробел.
  3. dcSep (необязательный) – десятичная точка. По-умолчанию будет использоваться запятая.