Angular TIPS

Angular TIPS

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

2017年9月25日

Angularで数値を通貨記号付きのテキスト表示に整形するための、currencyパイプの基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 Angular 4以降。v4時点で執筆しました。

 数値を通貨記号付きの値に整形するには、currencyパイプを利用します。numberパイプと同じく、小数点以下を指定の桁数で丸めることも可能です。

TypeScript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ol>
      <li>元の値:{{value}}</li>
      <li>currency(デフォルト):{{value | currency}}</li>
      <li>currency(コードのみ):{{value | currency : 'JPY'}}</li>
      <li>currency(円):{{value | currency : 'JPY': true}}</li>
      <li>currency(ユーロ):{{value | currency : 'EUR': true}}</li>
      <li>currency(桁数):{{value | currency : 'JPY': true: '5.1-3'}}</li>
    </ol>
  `,
})
export class AppComponent {
  value = 1234.5678;
}
与えられた数値をcurrencyパイプで整形するためのコード(app.component.ts)
図1 Webページとしてレンダリングされた表示内容
図1 Webページとしてレンダリングされた表示内容

 currencyパイプの構文は、以下の通りです。

[構文]currencyパイプ

value | currency [:code [:symbol [:info]]]

  • value: 任意の数値
  • code: 通貨コード(デフォルトはUSD
  • symbol: 通貨記号を表示するか(デフォルトはfalse
  • info: 桁数の設定

 引数を全て省略した図1の2のパターンでは、数値はUSD(アメリカドル)として整形されます。まず、日本で利用するアプリでは日本円が前提となることが多いでしょうから、最低限、図1の3のように引数codeJPYを指定します。

[Note]通貨コード

 通貨コードは、ISO 4217で国際標準として決められています。JPYUSDEURの他、利用できる通貨コードについては、Wikipediaの「ISO 4217」なども参照してください。

 ただし、引数codeを指定しただけでは、通貨コードがそのまま表示されてしまいます。「¥」「$」のような通貨記号を結果に反映させるには、図1の4のように引数symboltrueを設定してください(一般的には、このパターンで利用することになるでしょう)。

 図1の5は通貨コードをEUR(ユーロ)に変更しています。この場合、通貨記号が変化するだけでなく、デフォルトの桁数が変化する点にも注目してください。

 アプリの側で桁数を指定したい場合には、引数infoを指定します。引数infoの構成については、別稿「TIPS:数値データに桁区切り文字を付与するには?」も参照してください。

アプリのロケールを変更する

 本稿で解説しているcurrecyをはじめ、numberpercentdateなどのパイプはロケール(地域)情報によって結果が変化します。例えばロケールがja-JP(日本)であれば桁区切り文字はカンマ、小数点はピリオドで表現しますが、de-DE(ドイツ)では逆です。

 では、実際にアプリのロケールを変更して、確かに整形の結果が変化することを確認してみましょう。

app.module.ts
import { NgModule, LOCALE_ID }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers:    [{ provide: LOCALE_ID, useValue: 'de-DE'}],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
アプリのロケールを変更するためのコード

 ロケールを変更するには、メインモジュール(AppModule)でLOCALE_IDを設定するだけです。@NgModuleデコレーターのprovidersパラメーターについては、後日、別稿「TIPS:自作のサービスを登録するには?」で解説の予定ですので、まずは以下の構文を覚えておきましょう。

[構文]ロケールの設定

providers: [{ provide: LOCALE_ID, useValue: locale }]

  • locale: ロケール値(ja-JPen-USde-DEなど)

 この状態で、冒頭のサンプルを実行すると、以下のような結果が得られます。確かに、桁区切り記号/小数点が変化している点に注目です。

図2 「de-DE」ロケールで表示した結果
図2 「de-DE」ロケールで表示した結果

 ただし、currencyパイプでもロケールが通貨コード/記号を決めるわけではありません。よって、図2の2がやはりen-USの結果を返すことを確認してください。

処理対象:PIPE(パイプ) カテゴリ:基本
API:CurrencyPipe(currency)|DecimalPipe(number)|PercentPipe(percent)|DatePipe(date) カテゴリ:@angular > common > PIPE(パイプ)

※以下では、本稿の前後を合わせて5回分(第21回~第25回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

21. 数値(単数/複数)によって表示を切り替えるには?(i18nPlural)

Angularで数値によってテキスト表示内容を切り替えるための、i18nPluralパイプの基本的な使い方を説明する。

22. 数値をパーセント形式に整形するには?(percent)

Angularで数値を%(パーセント)形式のテキスト表示に整形するための、percentパイプの基本的な使い方を説明する。

23. 【現在、表示中】≫ 数値を通貨記号付きの値に整形するには?(currency)

Angularで数値を通貨記号付きのテキスト表示に整形するための、currencyパイプの基本的な使い方を説明する。

24. 要素のスタイルプロパティを操作するには?(Style Binding)

「[style.スタイルプロパティ名] = "式"」というバインディング構文により、要素に対する任意のCSSスタイルプロパティに値をバインドできるStyle Bindingの、基本的な使い方を説明する。

25. スタイルプロパティに単位付きの値を設定するには?(Style Binding)

Style Bindingの「[style.スタイルプロパティ名.単位] = "式"」というバインディング構文によって、要素に対する任意のCSSスタイルプロパティに単位付きで値をバインドする方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!