Gizanbeak

こんにちは！ Syuu（ @syuu_n18）です。

JavaScript で料金表示のためなどに数値を3桁のカンマ区切りにしたい場合は割とあると思います。
今回はそんなときに使える便利な関数をご紹介します。

toLocaleString()

数値を3桁のカンマ区切りにしたい場合は toLocaleString() という関数を使うと簡単に実現できます。( 参考)

具体的には以下のようにカンマ区切りにしたい数値が入った変数の後ろに .toLocaleString() とするだけで OK です。

var num = 1000000;
num.toLocaleString();
// "1,000,000"

変換された数値は文字列として返却されます。

EC サイトなどでよく見かける表記

また、EC サイトなどでよく見かける日本円の表記である ¥ 1,500 などは テンプレートリテラルを使うことでとても簡単に実現できます。

var price = 1500;
`¥ ${price.toLocaleString()}`
// "¥ 1,500";

文字列をカンマ区切りにする

文字列になっている数値をカンマ区切りにするには一度 Number へ変換してから toLocaleString() を実行します。

Number へ変換するには Number() を使用します。

var strNum = '3333';
Number(strNum).toLocaleString();
// "3,333"

ブラウザの対応状況

MDN Web Docs を見る限り、toLocaleString() はモダンなブラウザはもちろん IE11 や Edge なども対応しているため安心して使うことができますね。

まとめ

.toLocaleString() を使った JavaScript で数値を3桁のカンマ区切りにする簡単な方法についてご紹介しました。

バックエンドから取得したデータを表示するというシチュエーションで使用することが多く、覚えておくと便利な関数です。