JavaScript で数値を3桁区切りにする 【2017年版】

カテゴリ: JavaScript

記事投稿日: 2017年3月7日



jQuery のメソッドとして使う方法を使っていたのですが、念のため(2017年)に調べなおしてみました。

すると、あまり知られていませんが、最近のブラウザなら組込み関数になったようです。


console.log((1233445).toLocaleString()); // 1,233,445

IE は11、Chrome は24、Firefox は29からサポート(Safari は対象外)。
組み込み済みなのは嬉しいですね。
PC + Win での利用に限定するなら、そろそろ使っても良さそうです。

上記の関数が出てくるまでは、以下のコードを使ってました。


$.fn.comma3 = function(){  
    return this.each(function(){  
        var num3string = (function(num){  
                var str = new String(num);  
                var n = "";  
                var count = 0;  
                for (var i=str.length-1; i>=0; i--){  
                    n = str.charAt(i) + n;  
                    count++;  
                    if (((count % 3) == 0) && (i != 0)) n = ","+n;  
                }  
                return n;  
            })(this.innerHTML);  
        this.innerHTML = num3string;  
    });  
}


$("#min_price").comma3();

これを賢い人がネイティブで書くと、以下になるようです
(「Qiita: Javascriptで数値の3桁区切りを実装」より)


function addFigure(str) {
    var num = new String(str).replace(/,/g, "");
    while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
    return num;
}

console.log(addFigure(102000)); // 102,000

対応ブラウザなら、組込み済み関数で。
スマホも含んで対応したい場合は、ネイティブの、addFigure 関数で、といったところでしょうか。

jQuery の書き方は、もう5年以上前に調べたものです。
こういう歴史があったことを書いておくと、役に立つ人には便利だと思いますので記事にしておきます。








コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA




トップに戻る