Gizanbeak

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

JavaScriptで料金表示など、数値を3桁カンマ区切りにすることはよくあります。
今回はそんなときに使える便利な関数をご紹介します！

toLocaleString() の使い方

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

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

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

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

通貨表示の実装方法

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

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

文字列をカンマ区切りに変換する方法

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

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

小数以下の丸め問題と解決方法

toLocaleString() を使う上での注意点として、小数以下が途中で丸められる場合があります。
その場合、 maximumFractionDigits オプションを使って対応できます。

var num = 12345.6789;
num.toLocaleString(undefined, { maximumFractionDigits: 2 });
// "12,345.68"

Locale について

toLocaleString() を使う場合、 navigator.language で確認できるLocaleに注意が必要です。
異なる言語や地域の設定で、カンマ区切りや小数点の表記が変わることがあります。

例えば、ドイツ語の場合はカンマが小数点として、ピリオドが区切り文字として使われます。

var num = 12345.6789;
num.toLocaleString('de-DE');
// "12.345,679"

また、フランス語ではスペースが区切り文字として使われます。

var num = 12345.6789;
num.toLocaleString('fr-FR');
// "12 345,679"

ブラウザの対応状況

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

「Webを支える技術」のレビュー

WEBを支える技術書籍について学べることやおすすめの理由を含めて解説しています。

gizanbeak.com

まとめ

今回は .toLocaleString() を使ったJavaScriptで数値を3桁カンマ区切りにする方法とその注意点についてご紹介しました。

バックエンドから取得したデータを表示する際に便利な関数ですので覚えておくといいですね！

JavaScriptの学習におすすめしたい書籍5選！

JavaScriptの学習に最適な初心者から上級者を対象におすすめできる書籍5選をご紹介いたします！JavaScriptを効率的に学習するのに役立ちます。

gizanbeak.com