AngularJS TIPS

数値データに桁区切り文字を付けるには？（number／currency）

Web Technology AngularJS JavaScript

2015年7月27日

数値データを、ロケール別の桁区切り文字列に整形したり、ロケール別の通貨記号を付加したりして出力する方法を説明する。

山田祥寛

　numberフィルターを利用することで、指定された数値を桁区切りのカンマで整形したものを出力できます。また、小数点以下を指定の桁数で丸めることも可能です。

HTML

<!DOCTYPE html>

<head>

<title>AngularJS TIPS</title>

</head>

<body>

<table class="table"

ng-init="val = 2980.56789">

<tr>

</tr>

<tr>

<th>デフォルトの整形</th><td>{{val | number}}</td>

</tr>

<tr>

<th>小数点以下1位で数値を丸め</th><td>{{val | number: 1}}</td>

</tr>

<tr>

<th>整数に整形</th><td>{{val | number: 0}}</td>

</tr>

</table>

</body>

</html>

数値を整形するためのコード（number.html）

※「i18n/angular-locale_ja-jp.js」は、CDNのGoogle Hosted Librariesでは提供されていないので、いったん、このファイルをダウンロードして、サーバー上に配置してからインポートしている。ロケール用ファイルのダウンロード元ページについては後述する。

▼

数値をカンマで区切って、小数点以下を丸めた結果

　numberフィルターの構文は、以下の通りです。

［構文］numberフィルター

num | number [:fraction]

num： 任意の数値
fraction： 小数点以下の桁数

　用法は明快ですが、1点だけ、numberフィルターを利用する場合、AngularJS本体（angular.min.js）とは別に、ロケールファイル（angular-locale_ja-jp.js）をインポートしている点に注意してください。というのも、ロケールに応じて、桁区切り／小数点記号は変化するからです。例えば以下のようにドイツ（angular-locale_de-de.js）では、小数点記号がカンマ、桁区切り記号がピリオドです。

ロケールファイルをドイツに差し替えた場合の結果

　利用可能なロケールは、以下のページから確認できます。

GitHub: angular.js/src/ngLocale

数値に通貨記号を付与する

　桁区切り記号に加えて、通貨記号を付与するならばcurrencyフィルターを利用します。

HTML

<!DOCTYPE html>

<head>

<title>AngularJS TIPS</title>

</head>

<body>

<table class="table"

ng-init="val = 2980.56789">

<tr>

</tr>

<tr>

<th>デフォルトの整形</th><td>{{val | currency}}</td>

</tr>

<tr>

<th>通貨記号付きの整形</th><td>{{val | currency : '$'}}</td>

</tr>

<tr>

<th>整数で通貨記号付きの整形</th><td>{{val | currency : '$' :0}}</td>

</tr>

</table>

</body>

</html>

数値を通貨形式で整形するためのコード（currency.html）

※こちらも先ほどと同様に「i18n/angular-locale_ja-jp.js」ファイルをダウンロードして用意する必要がある。

▼

指定された通貨記号を付与

　currencyフィルターでは、小数点以下の桁数に加えて、利用する通貨記号を指定できます。デフォルトでは、現在のロケールでの通貨記号（js_JPであれば「\」）を付与します。

［構文］currencyフィルター

num | currency [:symbol [:fraction]]}}

num： 任意の数値
symbol： 通貨記号
fraction： 小数点以下の桁数

処理対象：数値文字列の桁区切り　カテゴリ：基本
処理対象：フィルターコンポーネント　カテゴリ：基本
API：number｜currency　カテゴリ：ng（コアモジュール） > filter components（フィルターコンポーネント）

※以下では、本稿の前後を合わせて5回分（第17回～第21回）のみ表示しています。
　連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。

17. 入力値のモデルへの反映タイミングを変更するには？（ng-model-options）

AngularJSのデータバインディング機能により入力値がモデルに反映されるのを、指定したミリ秒数後やフォーカスが外れたときまで遅延させる方法を説明する。

2015年7月13日(月曜日)

18. 文字列を大文字／小文字に変換するには？（lowercase／uppercase）

lowercase／uppercaseフィルターを使って文字列を大文字や小文字に変換する方法を解説。また、JavaScriptコードから変換する場合に使える$filterサービスとangular.lowercase／angular.uppercaseメソッドについても紹介する。

2015年7月21日(火曜日)

19. 【現在、表示中】≫ 数値データに桁区切り文字を付けるには？（number／currency）

数値データを、ロケール別の桁区切り文字列に整形したり、ロケール別の通貨記号を付加したりして出力する方法を説明する。

2015年7月27日(月曜日)

20. 配列をソートするには？（orderBy）

配列の内容を、指定されたキーで並べ替える方法を解説。逆順や、複数のキーを指定してソートする方法も紹介する。

2015年8月3日(月曜日)

21. 独自の規則で配列をソートするには？（orderBy）

独自の並べ替え規則を使って、配列の内容の並べ替える方法を解説。逆順や、複数キーの指定に独自のソートルールを使う方法も紹介する。

2015年8月10日(月曜日)

AngularJS TIPS