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

JavaScriptで数値を3桁のカンマ区切りにする方法について解説します。JavaScriptで数値を3桁のカンマ区切りにすることで、金額などを表示させる際、パッと見て非常に分かりやすいものになります。ここでは2つの方法を解説します。

コンテンツ [表示]

  1. 1JavaScriptで数値を3桁のカンマ区切りにしたい
  2. 2JavaScriptで数値を3桁のカンマ区切りにする方法
  3. 2.1Intl.NumberFormatを用いる場合
  4. 2.2toLocaleString()を用いる場合
  5. 2.3小数点を含む場合
  6. 3まとめ

JavaScriptで数値を3桁のカンマ区切りにしたい

金額などを表示させる際、JavaScriptで数値を3桁のカンマ区切りにしていると、パッと見たとき金額の桁数が非常に分かりやすいものになります。

ここではJavaScriptで数値を3桁のカンマ区切りにする2つの方法を、それぞれ項目を分けて解説します。

Photo byGoumbik

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

ではJavaScriptで数値を3桁のカンマ区切りにする2つの方法を、それぞれ項目を分けて解説します。

Intl.NumberFormatを用いる場合

Intl.NumberFormatを用いることで、数字を3桁区切りにすることができます。

実際にサンプルコードを用意したので、挙動を確認してみましょう。

このようにIntl.Numberフォーマットをインスタンス化したものを変数に格納し、実際に3桁のカンマ区切りしたい数字をフォーマットメソッドに入れることで、数字を3桁のカンマ区切りにすることができます。

toLocaleString()を用いる場合

個人的にtoLocaleString()を用いるのが一番簡単でオススメです。

実際にサンプルコードを用意したので、挙動を確認してみましょう。

このようにtoLocaleString()を用いることで、数値を3桁のカンマ区切りにすることができます。

ただしtoLocaleString()を用いる際は、元の数字のタイプがNumberでなければなりません。

もしStringの際は、NumberメソッドでStringの数字を囲ってからtoLocaleString()を用いてください。

小数点を含む場合

小数点を含む場合に数値を3桁のカンマ区切りにする方法を、toLocaleString()を用いて解説します。

もしtoLocaleString()にオプションを用いずに記述すると以下のように、小数点以下が丸められてしまいます。

では小数点以下が丸めらないようにするにはどうすればいいでしょうか。

その答えはtoLocaleString()のオプションである、maximumSignificantDigitsを用います。

このようにtoLocaleString()のオプションであるmaximumSignificantDigitsを用いることで、小数点以下のすべての値が表示されていることが分かります。

maximumSignificantDigitsには表示させたい桁数を設定してください。

まとめ

いかがでしたでしょうか?

ここで紹介したように、JavaScriptで数値を3桁のカンマ区切りにするにはtoLocaleString()を用いることで簡単にできます。

ぜひ皆さんも試してみてください。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。