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

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

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

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

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

 

 

 

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

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

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

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

 

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

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

 

ちなみにdは数値を表し、?=dddで直後に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] フロントエンドで副業する学習方法を動画で公開中

筆者プロフィール

メンター金成さん 2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。 現在も、開発案件に携わりながら、日々勉強中。

 

 

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。