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

初心者向けにJavaScriptで数値をカンマ区切りにする方法について現役エンジニアが解説しています。大きな数値を表示する際には、カンマがあると見やすく表示させることが出来ます。数値をカンマ区切りにするには、toLocaleStringメソッドを使った方法や正規表現を使う方法があります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで数値をカンマ区切りにする方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

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

データの集計結果や統計データなど、大きな数値を表示する際には,(カンマ)を入れて見やすく表示する必要があります。今回は、数値をカンマ区切りで表示する2つの方法を紹介します。

1つ目はもっとも簡単な方法で、toLocaleStringメソッドを使用することです。使いたい数値に適用することで、カンマ区切りの文字列を得られます。

const num = 12345
num.toLocaleString() // => "12,345"

 

2つ目は正規表現を使用する方法です。replaceメソッドを使用して、マッチした数値に,をつけて入れ替えていきます。

"12345".replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
// => "12,345"

 

ちなみに\dは数値を表し、?=\d\d\dで直後に3桁の数値があるパターンを表し、そのあとに1桁の数値がないパターンを指しています。つまり、4桁の数値で5桁目が数値でない(文字列の終わりか、カンマ)パターンにマッチします。

gフラグは、2番目、3番目… にマッチする部分も検索するフラグです。$1はマッチした文字列の最初の()の文字を指します。

今回は(\d)の部分です。そこを,付きで置換することでカンマ区切りの数値を返しています。カンマをつける場合は、toLocaleStringが手軽で使いやすいのでよく使用されます。

実際に書いてみよう

それでは実際に書いてみましょう。toLocaleStringで、カンマ区切りの数値を出力します。

const num = 123456789
console.log(num.toLocaleString()) //=> 123,456,789

toLocaleStringはオプションで、各国の出力形式に合わせり、貨幣の単位をつける、小数点の桁数を指定するなどのカスタマイズができます。今回は、\をつけた出力で小数点を2桁に指定してみます。

const num = 12345.6789
console.log(num.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY',minimumFractionDigits: 2, maximumFractionDigits: 2 }))
// => ¥12,345.68

styleで貨幣の形式を、currencyで日本円を指定できます。minimumFractionDigitsは最小桁数、maximumFractionDigitsは最大桁数を指定できます。

以上で解説を終わります。

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

筆者プロフィール

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。

現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

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