JavaScriptで数値を3桁ずつのカンマ区切りに変換する方法を現役エンジニアが解説【初心者向け】

JavaScriptで数値を3桁ずつのカンマ区切りに変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• toLocaleString関数とは
• toLocaleString関数によって数値をカンマ区切りに変換する方法
• 実際に書いてみよう
• まとめ

 

toLocaleString関数とは

ロケールに合わせた文字列を返す関数です。ロケールとは地域や場所の情報のことで、日本語環境のブラウザであればjaというように表します。toLocaleStringという関数は、数値を表すオブジェクトのNumberや日付を表すオブジェクトのDateが持っています。

今回は数値をカンマ区切りにする方法なので、NumberオブジェクトのもつtoLocaleStringを紹介します。

[PR] フロントエンドで副業する学習方法を動画で公開中

toLocaleString関数によって数値をカンマ区切りに変換する方法

日本語のブラウザ環境であれば、数値が格納された変数に.toLocaleString()と記述するだけでカンマ区切りされた文字列に変換されます。ブラウザのロケールは下記の処理を実行すると確認できます。

navigator.language

また、toLocaleStringは、省略可能な引数が2つあります。

第1引数はロケールで、’ja’のように指定します。第2引数はフォーマットのオプションで、円やドルなどの通貨の表示形式にしたり、小数を何桁まで表示されたりするような指定をする際に使用します。

カンマ区切りにするだけであればどちらも省略して良いですが、デフォルトでは小数以下は3桁の表示となっています。これを小数以下5桁までの表示にする場合は、オプションに下記のような指定を追加します。

{maximumFractionDigits: 5 }

 

実際に書いてみよう

数値をカンマ区切りでコンソールに表示する例と、小数の桁を指定してカンマ区切りにする例をを紹介します。

let number = 123456789;
console.log(number.toLocaleString()); //123,456,789

let decimal = 1234567890.123456789;
console.log(decimal.toLocaleString()); //1,234,567,890.123  デフォルトは少数3桁まで
console.log(decimal.toLocaleString('ja', {maximumFractionDigits: 5 }))  //1,234,567,890.12346  少数5桁までにする

 

まとめ

数値のフォーマットを整えるNumberFormatというオブジェクトでもカンマ区切りにできます。

NumberFormatはより細かいフォーマットの指定を行いような場合に使い、手っ取り早くカンマ区切りだけ行うような場合は、数値の変数ににそのまま使えて記述の楽なtoLocaleStringを使うと良いでしょう。

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。