JavaScriptの数値をカンマ区切りにする最も簡単な方法

例えば、『123456789』という数値を、『123,456,789』という文字列にしたい場合、よく取られる手法としては、下記のような正規表現やループを使う方法があります。例えば下記のような感じ(参考:JavaScriptで数値を桁区切り (カンマ区切り) にする方法)。

var num = 123456789;
String( num ).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' ); //=> "123,456,789"
// 余談だけど、数値を文字列に変換する際はこんな書き方もできる
num.toString().replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' ); //=> "123,456,789"
(num+"").replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' ); //=> "123,456,789"

(前回まで『//=>』を使って結果を記述する場合、console.logをわざわざ記したコードを書いていましたが、あまりにも冗長なため、今後は省略します。)

でも、実はもっと簡単な方法があるということを最近になって知りました。それが、NumberオブジェクトのtoLocaleStringメソッドを使う方法

var num = 123456789;
num.toLocaleString(); //=> "123,456,789"

このメソッド自体は昔から(IE6にも)あったようなのですが、IE10以前だと結果は下記のように、小数点以下2桁まで記述した文字列になってしまいます。

var num = 123456789;
num.toLocaleString(); //=> "123,456,789.00"

なので、どちらにも対応させるためには、splitメソッドの引数に”.”を指定て取得した配列の0番目を取得するという方法をとると、古い前のブラウザにも対応させることができそうです。

var num = 123456789;
num.toLocaleString().split(".")[0]; //=> "123,456,789"

ただし、残念ながら、SafariやOperaではカンマ区切りではない、そのままの数値文字列を返すようです。

toLocaleStringについては別エントリーで詳しく説明しています。
JavaScriptのtoLocaleStringメソッドについて調べてみた | while(isプログラマ)

コメント

タイトルとURLをコピーしました