세 자리 숫자마다 쉼표를 추가하십시오

160

jQuery를 사용하여 세 자리마다 쉼표 구분 기호를 사용하여 숫자의 서식을 지정하려면 어떻게합니까?

예를 들면 다음과 같습니다.

╔═══════════╦═════════════╗
║   Input   ║   Output    ║
╠═══════════╬═════════════╣
║       298 ║         298 ║
║      2984 ║       2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝

jquery number-formatting

— 스티브
소스

나는 jQuery를 처음 사용하고 숫자가 세 자리보다 길면 세 자리마다 쉼표를 추가하는 간단한 함수 / 플러그인을 원합니다. 양수 만, 소수, 소수, 통화가 없으며 표준 미국 형식 (1,111) (1,111 또는 $ 1,111.11)이 아닙니다. 가능한 경우 자바 스크립트뿐만 아니라 jQuery를 사용하여 코드를 설정하고 코드 세트를 함수로 설정하면 매우 쉽게 적용 할 수 있습니다. 어떻게하면 되나요? 모든 사람의 의견을 부탁드립니다. 다시 감사합니다.

— Steve

2

@unknown : 이미 많은 답변이 있습니다. 귀하가받은 답변을보고 평가하여 귀하에게 가장 적합한 답변을 찾으십시오. 답변 중 하나에 대한 자세한 설명이 필요하면 해당 답변에 대한 의견으로 게시하십시오.

— Mark Byers

1

죄송하지만 제 질문은 간결하지 않지만 Paul Creasey의 코드를 사용하여 Doug Neiner 플러그인 형식을 참조하십시오.

— Steve

241

@Paul Creasey는 정규식으로 가장 간단한 솔루션을 제공했지만 여기에는 간단한 jQuery 플러그인이 있습니다.

$.fn.digits = function(){ 
    return this.each(function(){ 
        $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
    })
}

그런 다음 다음과 같이 사용할 수 있습니다.

$("span.numbers").digits();

— 더그 니 니어
소스

4

완벽하게 작동합니다! 간단하고 우아한 코드를위한 Paul Creasey와 플러그인 형식으로 만든 Doug Neiner에게 감사합니다. 둘 다에 대한 크레딧.

— Steve

4

RC @Mark Byers 구문이 맞습니다. '999.9999'.replace (/ (\ d) (? = (\ d \ d \ d) + (?! \ d)) / g, "$ 1,")는'999.9,999 '를 반환합니다.

— bendewey

6

입력 필드에 대한 약간의 모드를 제작 :

$.fn.digits = function(){     return this.each(function(){         $(this).val( $(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );     }) }

— mpemburn

3

나는 이것이 jQuery 네임 스페이스 유틸리티 스타일 함수, 예를 들어 더 적합하다고 생각합니다 $.digits = function() { ... };.

— alex

63

가장 빠른 방법은number.toLocaleString("en");

— Derek 朕會功夫

95

당신은 사용할 수 있습니다 Number.toLocaleString():

var number = 1557564534;
document.body.innerHTML = number.toLocaleString();
// 1,557,564,534

스 니펫 확장

— 아비 짓
소스

나는 그것을 시도했지만 .. 라이브 서버에 작업을하지만, 로컬 호스트에서 작동하지 않습니다

— 아베드 푸트 라

1

모든 브라우저에서 @eladsilver w3schools.com/jsref/jsref_tolocalestring.asp

— ricks

이것은 가장 쉬운 일이었습니다. 통화와 쉼표가 필요했습니다. 나는 또한 속성을 설정할 수 있었다 :

var n = 26787.89 var myObjCurrency = {   style: "currency",   currency: "USD",   currencyDisplay : "symbol" } n.toLocaleString("en-US", myObjCurrency));

— AWP

78

정규 표현식을 사용하는 경우 이와 같은 것이 있습니다. 대체 tho의 정확한 구문을 모릅니다!

MyNumberAsString.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

— 폴 크레이 세이
소스

2

구문이 맞습니다. '999.9999'.replace (/ (\ d) (? = (\ d \ d \ d) + (?! \ d)) / g, "$ 1,")는'999.9,999 '를 반환합니다.

— Mark Byers

@ 알 수없는, 나는 대답으로 옮겼습니다. 사용법 예제와 함께이 페이지에서 더 아래에 있습니다.

— Doug Neiner

27

NumberFormatter 시도해 볼 수 있습니다.

$(this).format({format:"#,###.00", locale:"us"});

또한 물론 미국을 포함한 다양한 로케일을 지원합니다.

사용 방법에 대한 매우 간단한 예는 다음과 같습니다.

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.numberformatter.js"></script>
        <script>
        $(document).ready(function() {
            $(".numbers").each(function() {
                $(this).format({format:"#,###", locale:"us"});
            });
        });
        </script>
    </head>
    <body>
        <div class="numbers">1000</div>
        <div class="numbers">2000000</div>
    </body>
</html>

산출:

1,000
2,000,000

— 마크 바이어스
소스

나는이 플러그인을 한눈에 보았고 저자 설명에서 양식 입력 필드에 사용되었습니다. <span class = "numbers"> 2984 </ span>에 적용하여 소수없이 <span class = "numbers"> 2,984 </ span> 형식으로 적용하려면 어떻게해야합니까? $ ( 'span.numbers'). format ({format : "#, ###", locale : "us"});을 시도했습니다. 그러나 아무 일도 일어나지 않았습니다. 여전히 플러그인을 시험 중입니다. 죄송합니다, 저는 jQuery 초보자입니다 :-)

— Steve

+1이 플러그인에 대해 알아두면 좋습니다. 나는 성장과 미래의 국제화를 위해 이것이 최선의 길이라고 동의합니다.

— Doug Neiner

다음은 GitHub 저장소에 대한 링크입니다. github.com/hardhub/jquery-numberformatter

— Mwangi Thiga

22

이것은 jQuery가 아니지만 나를 위해 작동합니다. 이 사이트 에서 가져 왔습니다 .

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

— 레이
소스

1

당신의 아주 "뿌리":)

— MonoThreaded

"Rootsy"일 수도 있지만 데이터가 Canvas (Chart.JS)에 포함되어있는 상황에서 다른 멋진 바지 접근법이 효과가 없을 것이라고 생각합니다. 그러나 해당 함수를 추가하고 차트의 afterDraw () 이벤트에서 호출하면 완벽하게 작동합니다. ctx.fillText (addCommas (dataset.data [i]),

— B. Clay Shannon

예를 들어 3000000 (7 자리)과는 작동하지 않습니다. 6 자리 이하의 숫자 만!

— Mostafa Norzade

21

함수 사용 Number ();

$(function() {

  var price1 = 1000;
  var price2 = 500000;
  var price3 = 15245000;

  $("span#s1").html(Number(price1).toLocaleString('en'));
  $("span#s2").html(Number(price2).toLocaleString('en'));
  $("span#s3").html(Number(price3).toLocaleString('en'));

  console.log(Number(price).toLocaleString('en'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<span id="s1"></span><br />
<span id="s2"></span><br />
<span id="s3"></span><br />

스 니펫 확장

— 바 모스 자
소스

고맙습니다, 당신의 대답을 사용했습니다. 이것은 최대 15 자리 길이의 숫자 만 지원한다는 점에 유의해야합니다.

— tallpaul

21

2016 년 답변 :

Javascript에는이 기능이 있으므로 Jquery가 필요하지 않습니다.

yournumber.toLocaleString("en");

— 카미 D
소스

2

모든 브라우저에서 작동합니까? 크롬에서 잘 작동합니다. IE9 + 및 오페라, 사파리에서 작동합니까?

— zeppelin

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp 는 모든 브라우저를 지원합니다

— ricks

1

호출하는 숫자가 문자열이 아닌 숫자 유형 (int, float 등)인지 확인하십시오.

— el3ati2

16

보다 철저한 솔루션

이것의 핵심은 replace전화입니다. 지금까지 제안 된 솔루션이 다음 경우를 모두 처리한다고 생각하지 않습니다.

정수 : 1000 => '1,000'
문자열 : '1000' => '1,000'
문자열의 경우 :
- 소수점 이하 0을 유지합니다. 10000.00 => '10,000.00'
- 소수점 앞에 0을 버리십시오. '01000.00 => '1,000.00'
- 소수점 이하에 쉼표를 추가하지 않습니다. '1000.00000' => '1,000.00000'
- 선행 -또는 유지 +:'-1000.0000' => '-1,000.000'
- 비 숫자가 포함 된 수정되지 않은 문자열을 반환합니다. '1000k' => '1000k'

다음 기능은 위의 모든 기능을 수행합니다.

addCommas = function(input){
  // If the regex doesn't match, `replace` returns the string unmodified
  return (input.toString()).replace(
    // Each parentheses group (or 'capture') in this regex becomes an argument 
    // to the function; in this case, every argument after 'match'
    /^([-+]?)(0?)(\d+)(.?)(\d+)$/g, function(match, sign, zeros, before, decimal, after) {

      // Less obtrusive than adding 'reverse' method on all strings
      var reverseString = function(string) { return string.split('').reverse().join(''); };

      // Insert commas every three characters from the right
      var insertCommas  = function(string) { 

        // Reverse, because it's easier to do things from the left
        var reversed           = reverseString(string);

        // Add commas every three characters
        var reversedWithCommas = reversed.match(/.{1,3}/g).join(',');

        // Reverse again (back to normal)
        return reverseString(reversedWithCommas);
      };

      // If there was no decimal, the last capture grabs the final digit, so
      // we have to put it back together with the 'before' substring
      return sign + (decimal ? insertCommas(before) + decimal + after : insertCommas(before + after));
    }
  );
};

다음과 같이 jQuery 플러그인에서 사용할 수 있습니다.

$.fn.addCommas = function() {
  $(this).each(function(){
    $(this).text(addCommas($(this).text()));
  });
};

— 나단 롱
소스

9

또한 jquery FormatCurrency 플러그인 (저는 저자 임)을 볼 수 있습니다. 여러 로케일도 지원하지만 필요하지 않은 통화 지원 오버 헤드가있을 수 있습니다.

$(this).formatCurrency({ symbol: '', roundToDecimalPlace: 0 });

— 벤디
소스

4

이 질문은이 플러그인의 v1.3을 릴리스하도록 수정되었습니다. 감사합니다

— bendewey

3

파이어 폭스와 크롬에서만 테스트 한 자바 스크립트입니다.

<html>
<header>
<script>
    function addCommas(str){
        return str.replace(/^0+/, '').replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function test(){
        var val = document.getElementById('test').value;
        document.getElementById('test').value = addCommas(val);
    }
</script>
</header>
<body>
<input id="test" onkeyup="test();">
</body>
</html>

— 도주
소스

1

매우 쉬운 방법은 toLocaleString()기능 을 사용하는 것입니다

tot = Rs.1402598 //Result : Rs.1402598

tot.toLocaleString() //Result : Rs.1,402,598

— 립칸 라자크
소스

1

function formatNumberCapture () {
$('#input_id').on('keyup', function () {
    $(this).val(function(index, value) {
        return value
            .replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            ;
    });
});

당신은 이것을 시도 할 수 있습니다, 그것은 나를 위해 작동합니다

— benoit1521
소스