l08084のブログ

技術記事の執筆は、祈りに近い

Angularで数値を桁区切り(&小数点以下なし)で表示する

金額を桁区切りしたい(けど、小数点以下はいらない)ときに迷ったので書きました。2パターン提示します。

バージョン情報

  • Angular: 5.2.8

  • Node: 8.9.3

結論: number pipeでいい

金額だからcurrency pipeだよなーといろいろと調べていたんですが、通貨記号いらないのなら、number pipeが手っ取り早いです。

サンプルコードA

仮想通貨取引所のビットフライヤーとコインチェックのビットコイン価格を表示するテンプレートです。それぞれの価格は、Observable型で取得されるので、asyncパイプを適用した後、numberパイプを使用して、桁区切り文字を挿入しています。デフォルトが小数点なしで設定されているのがgoodです。

src/app/app.component.html:

<div>bitflyerのBTC価格:</div>
<div>{{ (bitflyerTicker$ | async)?.ltp | number }}円</div>
<div>coincheckのBTC価格:</div>
<div>{{ (coincheckTicker$ | async)?.last | number }}円</div>

動作確認: サンプルコードA

桁区切り文字が挿入されていることがわかります。

f:id:l08084:20180322160856p:plain

通貨記号も表示したい - currency pipe を使う

通貨記号も表示したい場合は、currency pipeを使えばOKです。ただ、「.00」といった感じに小数点がついてくるので消す必要があります。

サンプルコードB

オプションの'0.0-0'で小数点を丸めています。

src/app/app.component.html:

<div>bitflyerのBTC価格:</div>
<div>{{ (bitflyerTicker$ | async)?.ltp | currency: 'JPY': true: '0.0-0' }}</div>
<div>coincheckのBTC価格:</div>
<div>{{ (coincheckTicker$ | async)?.last | currency: 'JPY': true: '0.0-0' }}</div>

動作確認: サンプルコードB

桁区切り文字が挿入されていて、かつ通貨記号も表示されていることがわかります。

f:id:l08084:20180322161901p:plain

参考サイト

Angular: 数値を通貨記号付きの値に整形するには?(currency) - Build Insider