JavaScript で数値を3桁のカンマ区切りにする簡単な方法

2024.03.02 に更新記事は 3 分で読めます
サムネイル画像

こんにちは!Syuu( @syuu_n18)です。

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

toLocaleString() の使い方

illust

数値を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"

ブラウザの対応状況

browser

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

まとめ

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

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

プロフィールアイコン

Syuu

フロントエンドが好きなWEBエンジニア Next.js / React / TypeScript

SHARE