Разделение числа на разряды на Javascript: отбивка тысяч пробелами

Сегодня рассмотрим проблему форматирования чисел на javascript, а именно как легко произвести отбивку тысяч, миллионов и миллиардов при выводе цены. Пост рассчитан и будет полезен в большей степени новичкам.

Обычно шаблоны страниц генерируются на сервере и за отображение цен, да и в целом денежных значений, отвечает используемый на сервере шаблонизатор. Например, в Jinja есть фильтр money, который позволяет не заморачиваться с разделением числа на разряды: {{ tovar.price|money }}. Цену «12345678 руб.» python-шаблонизатор выведет как «12 345 678 руб.». В php-шаблонизаторе Twig также есть соответствующий фильтр number_format(decimals, decimalSeparator, thousandSeparator), который помимо разделителя тысяч к тому же сразу позволяет задать разделитель целой и дробной частей {{ tovar.price|number_format(2, '.', ' ') }}.

Однако, javascript, да и современные js-фреймворки лишены данной функциональности. Ввиду этого, при получении данных от сервера и шаблонизации их на клиенте, данную задачу следует решать самостоятельно. Разделение разрядов числа пробелами сама по себе не сложная задача — даже новичок сможет написать соответствующую функцию. Однако, когда времени мало или думать совсем не хочется, то лучше всего воспользоваться готовым решением.

Итак, ниже представлен код функции thousandSeparator на чистом javascript, которая производит отбивку разрядов кратных трем.

var thousandSeparator = function(str) {
    var parts = (str + '').split('.'),
        main = parts[0],
        len = main.length,
        output = '',
        i = len - 1;
    
    while(i >= 0) {
        output = main.charAt(i) + output;
        if ((len - i) % 3 === 0 && i > 0) {
            output = ' ' + output;
        }
        --i;
    }

    if (parts.length > 1) {
        output += '.' + parts[1];
    }
    return output;
};

Если вкратце рассматривать суть функции, то видно, что берется целая часть числа и в цикле проходится каждый разряд от старшего к младшему. Если порядковый номер разряда делится на 3 (кроме самого старшего), тогда производится добавление пробела. Таким образом, после 3, 6, 9 и т.д. разрядов появятся пробелы.

Использовать данную функцию очень просто:

console.log(thousandSeparator(12345678.9));