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

初心者向けにJavaScriptで数値を3桁ずつのカンマ区切りに変換する方法について現役エンジニアが解説しています。数値をカンマ区切りにする方法には、NumberオブジェクトのtoLocaleString関数を使う方法があります。toLocalString関数の書き方や使い方を解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで数値を3桁ずつのカンマ区切りに変換する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

toLocaleString関数とは

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

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

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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では、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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