Angular TIPS

Angular TIPS

数値データに桁区切り文字を付与するには?(number)

2017年4月14日

Angularで数値を桁区切り文字列に整形するための、numberパイプの基本的な使い方を説明する。整数と小数点以下の桁数を指定して整形することも可能。

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

【対応バージョン】 Angular 2/4対応。v2時点で執筆し、v4時点で内容を確認・検証しました。

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

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

@Component({
  selector: 'my-app',
  template: `
    <ol>
      <li>元の値:{{value}}</li>
      <li>number(デフォルト):{{value | number}}</li>
      <li>number(桁数指定):{{value | number : '5.1-2'}}</li>
    </ol>
  `,
})
export class AppComponent {
  value = 1234.5678;
}
リスト1 与えられた数値をnumberパイプで整形するためのコード(app.component.ts)
Webブラウザー
1. 元の値:1234.5678
2. number(デフォルト):1,234.568
3. number(桁数指定):01,234.57
リスト2 出力結果:整形された数値

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

[構文]numberパイプ

value | number [: info]

  • value: 任意の数値
  • info: 桁数情報(詳細は以下)

 リスト2の2は、引数infoを省略したnumberパイプの標準の挙動で整形をした結果です。小数点以下3桁で数値を丸めたうえで、桁区切り文字を付与しています。

 リスト2の3は、引数infoを指定した例です。引数infoは「minInt.minFrac-maxFrac」形式の文字列で、桁数情報を表します。それぞれの部位の意味は、以下の通りです。

部位 概要 デフォルト値
minInt 最小桁数(整数部) 1
minFrac 最小桁数(小数部) 0
maxFrac 最大桁数(小数部) 3
引数infoの構成

 2では「5.1-2」としているので、整数部は5桁以上、小数部は1~2桁となるように整形します。この場合は、元の値の整数部は4桁なので、まず、整数部が5桁になるよう、0で補っています。小数部は4桁あるので、2桁となるよう、丸めます。もしも小数を丸め、整数にしたい場合には「5.0-0」のように指定してください。

[Note]ロケールによって結果は変化する

 numberパイプは、ロケール(地域情報)によって結果が変化するパイプです。ロケールの設定方法、また、ロケールを変更したときの結果については、後日別稿「TIPS:数値データを通貨記号付きの値に整形するには?(currency)」で解説の予定です。

処理対象:PIPE(パイプ) カテゴリ:基本
API:DecimalPipe(number) カテゴリ:@angular > common > PIPE(パイプ)

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

11. JavaScriptオブジェクトをJSON形式に変換するには?(json)

JavaScriptのJSON.stringifyメソッドと同じように、AngularでJavaScriptのオブジェクトをJSON形式に変換できるjsonパイプの基本的な使い方を説明する。

12. 文字列を大文字/小文字に変換するには?(lowercase/uppercase)

JavaScriptのStringクラスにおけるtoLowerCase/toUpperCaseメソッドと同じように、Angularで文字列を小文字/大文字に変換できるlowercase/uppercaseパイプの基本的な使い方を説明する。

13. 【現在、表示中】≫ 数値データに桁区切り文字を付与するには?(number)

Angularで数値を桁区切り文字列に整形するための、numberパイプの基本的な使い方を説明する。整数と小数点以下の桁数を指定して整形することも可能。

14. 文字列/配列から部分文字列/要素を抜き出すには?(slice)

JavaScriptのString/Arrayクラスにおけるsliceメソッドと同じように、Angularで文字列から部分文字列を抽出したり配列から特定範囲の要素を取得したりできるsliceパイプの基本的な使い方を説明する。

15. Angular CLIとは? ― インストール方法と、アプリの骨格生成&実行

新規Angularアプリの作成時にAngular CLIを使うと効率的だ。そのインストール方法と、コマンド1つでAngularアプリのスケルトンを作成して、そのアプリを起動する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社