3桁ごとの数字にカンマを追加します

160

jQueryを使用して、3桁ごとにコンマ区切りを使用して数値をフォーマットするにはどうすればよいですか？

例えば：

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

jquery number-formatting

— スティーブ
ソース

私はjQueryを初めて使用するので、数字が3桁を超える場合は、3桁ごとにカンマを追加するだけの簡単な関数/プラグインが必要です。正の数のみ、小数、小数、通貨は含まれず、標準のUS形式（1,111）は含まれません（$ 1,111または$ 1,111.11）。私はむしろ、可能であればJavaScriptだけでなくjQueryを使用して、コードセットを関数に設定して、非常に簡単に適用できるようにしたいと思っています。どうすればいいですか？みんなの意見に感謝する。再度、感謝します。

— Steve

2

@不明：すでに多くの回答があります。あなたが受け取った答えを見て、それらを評価して、どちらがあなたにとって最適かを確かめてください。回答のいずれかについてさらに説明が必要な場合は、その回答へのコメントとして投稿してください。

— Mark Byers、2010年

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 2010年

6

入力フィールドに若干の

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

— 変更を加えました

3

これは、jQuery名前空間ユーティリティスタイル関数に適していると思います$.digits = function() { ... };。

— アレックス

63

最速の方法ですnumber.toLocaleString("en");

— デレク朕會功夫

95

あなたは使うことができますNumber.toLocaleString()：

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

スニペットを展開

— Abhijeet
ソース

私はそれを試してみましたが、...ライブサーバー上で作業していて、ローカルホスト上で動作していない

— アベドプトラ

1

@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp（すべてのブラウザー）

— リックス

これは私にとって最も簡単に機能しました。通貨とカンマが必要でした。プロパティも設定できました：

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

— AWP

78

正規表現を使用している場合は、このようなものですが、置換の正確な構文がわかりません！

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、2010年

@不明、回答に移動しました。このページの使用例とともにさらに下にあります。

— Doug Neiner、2010年

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、2010年

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

「根っこ」かもしれませんが、データがCanvas（Chart.JS）に埋め込まれている私の状況では、他のファンシーパンツアプローチがうまくいくとは思いません。しかし、その機能を追加すると、チャートのafterDraw（）イベントが完璧に動作でそれを呼び出す：、ctx.fillText（addCommas（dataset.data [I]）

— B.クレイシャノン

これは、たとえば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 2015年

21

2016回答：

JavaScriptにはこの機能があるため、Jqueryは必要ありません。

yournumber.toLocaleString("en");

— カミーD
ソース

2

これはすべてのブラウザで機能しますか？クロムは問題なく動作しています。IE9 +とオペラ、サファリで動作しますか？

— zeppelin

@zeppelin w3schools.com/jsref/jsref_tolocalestring.aspは、すべてのブラウザをサポートしています

— リックス

1

呼び出す番号が文字列ではなく、数値型（int、floatなど）であることを確認してください。

— el3ati2

16

より徹底的なソリューション

この中核はreplace呼び出しです。これまでのところ、提案された解決策のいずれも次のケースのすべてを処理するとは思いません：

整数： 1000 => '1,000'
文字列： '1000' => '1,000'
文字列の場合：
- 10進数の後にゼロを保持します。 10000.00 => '10,000.00'
- 10進数の前の先行ゼロを破棄します。 '01000.00 => '1,000.00'
- 10進数の後にコンマを追加しません： '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

これがFirefoxとChromeでのみテストされた私のJavaScriptです

<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
ソース