JavaScriptの数値フォーマットについて現役エンジニアが解説【初心者向け】

JavaScriptの数値フォーマットについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

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

 

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

 

 

目次

• JavaScriptの数値フォーマットについて
• 数値フォーマットの設定方法
• 実際に書いてみよう
• まとめ

 

JavaScriptの数値フォーマットについて

数値のフォーマット（表示形式）は、3桁ごとにカンマで区切ったものや、¥や$などの通貨記号をつけたものなどがあります。

数値のフォーマットを整える方法として、正規表現や文字列の置換を使う方法もありますが、今回はJavaScriptに標準で入っているIntl.NumberFormatという数値のフォーマットを扱うオブジェクトを使った方法を紹介します。

JavaScriptに標準で入っている機能を使うメリットとして、リファレンスの参照が簡単にできることや、誰もが同じ記述になり可読性が上がることが望めます。また、英語や中国語などの多言語対応をする際にもロケールに対応しているIntl.NumberFormatは役立ちます。
 

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

数値フォーマットの設定方法

Intl.NumberFormatオブジェクトは、Intl.NumberFormatをnew演算子で生成して使います。
その際に第1引数にロケール、第2引数にフォーマットのオプションを渡すことでフォーマットを指定する形になります。

どちらも省略可能なので、引数を無しにすると規定のロケールになります。
規定のロケールは、下記をコンソールで実行すると確認できます。

navigator.language

規定のロケールは日本語の環境ではjaとなっているかと思います。

その後は、生成したNumberFormatオブジェクトのformatメソッドに数値を渡すことで、フォーマットが整形された数値文字列が返されます。
 

実際に書いてみよう

まずは一番シンプルな記述で数値を3桁ごとにカンマ区切りにしてみます。

日本語環境の場合は、Intl.NumberFormatを生成する際に引数を省略することで、規定のロケーションとフォーマットで整形されて3桁ごとのカンマ区切りとなります。

const NUMBER = 123456789;
const formatter = new Intl.NumberFormat();
console.log(formatter.format(NUMBER));  //123,456,789

続いて通貨表示の例を使って、Intl.NumberFormatの引数を指定する方法を紹介します。

第1引数に日本語環境のjaを指定し、第2引数でフォーマットのオプションを指定します。オプションのstyleにcurrencyを設定すると通貨表示となり、通貨を設定した場合は合わせてcurrencyを設定する必要があります。

今回はcurrencyにJPYを指定して¥マークで表示します。

const NUMBER = 123456789;
const formatter = new Intl.NumberFormat('ja', {
  style: 'currency',
  currency: 'JPY'  
});
console.log(formatter.format(NUMBER));  //￥123,456,789

currencyに指定する通貨は下記のリストから探すことができます。
通貨とコードのリスト

続いて0埋めの例です。

最小桁数をminimumIntegerDigitsに設定します。今回は5桁としています。3桁ごとのカンマ区切りがデフォルトで行われるので、カンマ区切りの指定であるuseGroupingにfalseを設定します。

const NUMBER = 123;
const formatter = new Intl.NumberFormat('ja', {
  minimumIntegerDigits: 5, 
  useGrouping: false
});
console.log(formatter.format(NUMBER));  //00123

Intlのその他のオプションはこちら
 

まとめ

数値のフォーマットを整形する際には、Intl.NumberFormatを使ってみてください。
 

筆者プロフィール

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

 

 

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

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