Добавить разделитель тысяч к итогу с помощью Javascript или jQuery?

Question

У меня есть функция, которая суммирует столбец данных в 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>

Answer 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;
}

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

Я знаю, что это старый пост uber, и на него есть хорошие ответы, НО, если кому-то интересно, есть плагин 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

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

Answer 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,99, что обычно достаточно. Я знаю недостатки, и я не говорю, что это лучшее оружие - но оно так же быстро, как другие выше, и я нахожу это более читабельным. Если вам не нужны десятичные дроби, вы можете упростить их еще больше:

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

Разве это не удобно?

Answer 6

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

// 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

Answer 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. Может быть, есть более простой способ сделать это, но он кажется интуитивно понятным.

Answer 8

Лучший и простой способ отформатировать число - использовать функцию 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);

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

Answer 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,"));
});

Answer 10

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

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('');
}