Добавьте разделитель тысяч в число с Javascript или jQuery?

У меня есть функция, которая суммирует столбец данных в таблице html. Он делает это превосходно, только я хотел бы, чтобы он поставил там запятые, которые необходимы для разделения тысяч. Вначале вы заметите, что в добавленных числах есть запятые. Чтобы функция добавила их, они удаляются. Как добавить туда запятую?

<script type="text/javascript">
    function sumOfColumns(tableID, columnIndex, hasHeader) {
        var tot = 0;
        $("#" + tableID + " tr" + (hasHeader ? ":gt(0)" : ""))
          .children("td:nth-child(" + columnIndex + ")")
          .each(function() {
              tot += parseInt($(this).html().replace(',', ''));
          });
        return "Total Pounds Entered : " + tot;
    }
</script>

Ответ 1

$(this).html().replace(',', '') не должен фактически изменять страницу. Вы уверены, что запятые удаляются на странице?

Если это так, эта функция addCommas должна сделать трюк.

function addCommas(nStr) {
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

Ответ 2

Это добавит тысячи разделителей, сохранив десятичную часть заданного числа:

function format(n, sep, decimals) {
    sep = sep || "."; // Default to period as decimal separator
    decimals = decimals || 2; // Default to 2 decimals

    return n.toLocaleString().split(sep)[0]
        + sep
        + n.toFixed(decimals).split(sep)[1];
}

format(4567354.677623); // 4,567,354.68

Вы также можете исследовать десятичный разделитель locale с помощью:

var sep = (0).toFixed(1)[1];

Ответ 3

Использовать toLocaleString()
В вашем случае выполните:

return "Total Pounds Entered : " + tot.toLocaleString();

Ответ 4

Вот как я это делаю:

// 2056776401.50 = 2,056,776,401.50
function humanizeNumber(n) {
  n = n.toString()
  while (true) {
    var n2 = n.replace(/(\d)(\d{3})($|,|\.)/g, '$1,$2$3')
    if (n == n2) break
    n = n2
  }
  return n
}

Или, в CoffeeScript:

# 2056776401.50 = 2,056,776,401.50
humanizeNumber = (n) ->
  n = n.toString()
  while true
    n2 = n.replace /(\d)(\d{3})($|,|\.)/g, '$1,$2$3'
    if n == n2 then break else n = n2
  n

Ответ 5

Рассмотрим это:

function group1k(s) {
    return (""+s)
        .replace(/(\d+)(\d{3})(\d{3})$/  ,"$1 $2 $3" )
        .replace(/(\d+)(\d{3})$/         ,"$1 $2"    )
        .replace(/(\d+)(\d{3})(\d{3})\./ ,"$1 $2 $3.")
        .replace(/(\d+)(\d{3})\./        ,"$1 $2."   )
    ;
}

Это быстрое решение для чего-то под 999.999.999, которого обычно достаточно. Я знаю недостатки, и я не говорю, что это идеальное оружие, но оно так же быстро, как и другие, и я считаю это еще более удобочитаемым. Если вам не нужны десятичные знаки, вы можете упростить его еще больше:

function group1k(s) {
    return (""+s)
        .replace(/(\d+)(\d{3})(\d{3})$/ ,"$1 $2 $3")
        .replace(/(\d+)(\d{3})$/        ,"$1 $2"   )
    ;
}

Не удобно ли это.

Ответ 6

Я знаю, что это старый пост и имеет хорошие ответы, но если кому-то интересно, есть плагин jQuery, который упрощает форматирование чисел (форматирование тысяч, число десятичных знаков, настраиваемый разделитель тысяч и т.д.) путем включения и простой вызов. Достаточно большого количества функций и документации. Он назывался jQuery Number.

Вы просто включите его:

<script type="text/javascript" src="jquery/jquery.number.min.js"></script>

И затем используйте его:

При автоматическом форматировании ввода HTML: $('input.number').number( true, 2 );

или

При вызове JS: $.number( 5020.2364, 2 ); // Outputs: 5,020.24

Надеюсь, это поможет кому-то.

Ответ 7

Я получил где-то со следующим методом:

var value = 123456789.9876543 // i.e. some decimal number

var num2 = value.toString().split('.');
var thousands = num2[0].split('').reverse().join('').match(/.{1,3}/g).join(',');
var decimals = (num2[1]) ? '.'+num2[1] : '';

var answer =  thousands.split('').reverse().join('')+decimals;

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

Ответ 8

рекурсивное решение:

function thousands(amount) {
  if( /\d{3}\d+/.test(amount) ) {
    return thousands(amount.replace(/(\d{3}?)(,|$)/, ',$&'));
  }
  return amount;
}

другое разделенное решение:

function thousands (amount) {
  return amount.split('').reverse().join('').replace(/\d{3}/g, '$&,').split('').reverse().join('');
}

Ответ 9

Ниже приведен рабочий пример:

 $("#estimated-amount-due .content").html("$" + miniCartTotal.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"));

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

$(".action.showcart").on('click', function() {
    var miniCartTotal = $("#estimated-subtotal .price").html();
    var miniCartTotalString = miniCartTotal.replace(/\$/g, '');
    var miniCartTotalString = miniCartTotalString.replace(/,/g, ''); 
    var configValue = 5; 

    miniCartTotal = parseFloat(miniCartTotalString) + configValue;
    console.log("updated value " + miniCartTotal);

    $("#estimated-amount-due .content").html("$" + miniCartTotal.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"));
});

Ответ 10

Лучший и простой способ форматирования номера - использовать функцию java- script

var numberToformat = 1000000000
//add locality here, eg: if you need English currency add 'en' and if you need Danish currency format then use 'da-DA'.
var locality = 'en-EN';
numberToformat = numberToformat.toLocaleString(locality , { 
minimumFractionDigits: 4 })
document.write(numberToformat);

для получения дополнительной информации нажмите страница документации