Как сделать форматирование цифр на JS/JQ?

Question

[Stacy None]

Есть div с классом "numb"
Проблема в том что там генерируются цифры без форматирования.
Подскажите пожалуйста как на jq либо js сделать форматирование в блоке numb вот таким: 1.252.000
Заранее спасибо!

Answer 1

[Никита Ермиличев]

$('.numb').text(number_format($('.numb').text(), '.' , '.'));

/***
number - исходное число
decimals - количество знаков после разделителя
dec_point - символ разделителя
thousands_sep - разделитель тысячных
***/
function number_format(number, decimals, dec_point, thousands_sep) {
  number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
      var k = Math.pow(10, prec);
      return '' + (Math.round(n * k) / k)
        .toFixed(prec);
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n))
    .split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '')
    .length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1)
      .join('0');
  }
  return s.join(dec);
}
 
//  Пример 1: number_format(1234.56);
//  Результат: '1,235'
 
//  Пример 2: number_format(1234.56, 2, ',', ' ');
//  Результат: '1 234,56'
 
//  Пример 3: number_format(1234.5678, 2, '.', '');
//  Результат: '1234.57'
 
//  Пример 4: number_format(67, 2, ',', '.');
//  Результат: '67,00'
 
//  Пример 5: number_format(1000);
//  Результат: '1,000'
 
//  Пример 6: number_format(67.311, 2);
//  Результат: '67.31'
 
//  Пример 7: number_format(1000.55, 1);
//  Результат: '1,000.6'
 
//  Пример 8: number_format(67000, 5, ',', '.');
//  Результат: '67.000,00000'
 
//  Пример 9: number_format(0.9, 0);
//  Результат: '1'
 
//  Пример 10: number_format('1.20', 2);
//  Результат: '1.20'
 
//  Пример 11: number_format('1.20', 4);
//  Результат: '1.2000'
 
//  Пример 12: number_format('1.2000', 3);
//  Результат: '1.200'
 
//  Пример 13: number_format('1 000,50', 2, '.', ' ');
//  Результат: '100 050.00'
 
//  Пример 14: number_format(1e-8, 8, '.', '');
//  Результат: '0.00000001'

Comments

[Stacy None]

я это нашел тоже, только я не на столько силен в js jq чтобы выводить результат в div блоке с классом)

[Никита Ермиличев]

Stacy None, $('.numb').text(number_format($('.numb').text(), '.' , '.')); попробуйте

[Stacy None]

Никита Ермиличев, а куда это?

[Никита Ермиличев]

Stacy None, это туда, где это нужно вызывать

//Получаем текущее значение
var num = $('.numb').text();
//Форматируем
var formattedNum = number_format(num, '.', '.');
//Возвращаем на место :)
$('.numb').text(formattedNum);

[Stacy None]

Никита Ермиличев, Таак отлично. А как тот код выше работает? Его в отдельный js файл правильно? И что там за примеры ниже?)

[Никита Ермиличев]

Stacy None, можете в отдельный js
Примеры под функцией - показывают, как с ней работать и что она умеет.
У Вас будет number_format([ваше_исходное_число], '.', '.');

[Stacy None]

Никита Ермиличев, совсем не понимаю как к чему куда(
Я в отдельный файл закинул всё от function до }
А как что дальше?

//Получаем текущее значение
var num = $('.numb').text();
//Форматируем
var formattedNum = number_format(num, '.', '.');
//Возвращаем на место :)
$('.numb').text(formattedNum);

Это куда впихнуть не подскажите?)
$('.numb').text(number_format($('.numb').text(), '.' , '.'));
А это тогда что?)

[Никита Ермиличев]

Stacy None,
это

$('.numb').text(number_format($('.numb').text(), '.' , '.'));

и это

var num = $('.numb').text();
var formattedNum = number_format(num, '.', '.');
$('.numb').text(formattedNum);

одно и тоже.

Куда впихнуть? В какой момент Вы хотите в блоке число переформатировать? В момент загрузки страницы?

[Stacy None]

Никита Ермиличев, Да сразу

[Stacy None]

я вывел функцию в отдельный js и подключил, затем в script вывел $('.numb').text(number_format($('.numb').text(), '.' , '.'));
Но не работает (

[Никита Ермиличев]

Stacy None, тогда для начала прям на странице добавьте

<script>
$(document).ready(function(){
$('.numb').text(number_format($('.numb').text(), '.' , '.')); 
});
</script>

я вывел функцию в отдельный js

Можете дать ссылку на страницу?
В консоль какие ошибки пишут?

[Stacy None]

Никита Ермиличев, Не могу, это на локалке(
Я сделал так:
1. создал libs.js и подключил так

<script type="text/javascript" src="{THEME}/js/libs.js"></script>

Его содержимое:

function number_format(number, decimals, dec_point, thousands_sep) {
  number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
      var k = Math.pow(10, prec);
      return '' + (Math.round(n * k) / k)
        .toFixed(prec);
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n))
    .split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '')
    .length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1)
      .join('0');
  }
  return s.join(dec);
}

Затем в самом начале страницы вставил:

<script>
$(document).ready(function(){
$('.numb').text(number_format($('.numb').text(), '.' , '.')); 
});
</script>

И не работает(

[Никита Ермиличев]

Stacy None, а jquery подключить?
Посмотрите какая ошибка в консоле (F12 в браузере)

[0ffff0]

Stacy None, помимо того,что вы сделали, ваше содержимое надо еще поместить внутрь функции обработчика события загрузки окна,

window.onload=function loader(){
//тут любой код, объявление функции
function number_format(){
сделать что-нибудь хорошее;
}
// и вызов функции
 number_format() 

}

[Никита Ермиличев]

0ffff0, функцию не обязательно, а событие загрузки окна на jQuery описали

[0ffff0]

Никита Ермиличев, тогда,

(  number_format=
 function  number_format(){
 console.log("conflict-free connection");
//сделать что-нибудь хорошее
 },
	 number_format()
)

и предлагаю переименовать вопрос, и назвать "бесконфликтное подключение нескольких скриптов к вэбстранице"