Intl.NumberFormat.prototype.formatToParts()

この記事は翻訳作業中です。

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

Intl.Numberformat.prototype.formatToParts()メソッドNumberTimeFormatフォーマッタによって生成された文字列のロケールに応じた書式設定を可能にします

構文

Intl.NumberFormat.prototype.formatToParts(number)

引数

number Optional
フォーマットする数値

戻り値

フォーマットされた数を含む要素のオブジェクトのArray 。

説明

このformatToParts()メソッドは、数値文字列のカスタム書式設定を行うときに便利です。ロケール固有のトークンを含むオブジェクトのArrayを取得します。その戻り値を利用することでロケール固有の要素を保持しながらカスタム文字列の構築を可能にします。formatToParts()メソッドの戻り値次のようになります。

[
  { type: "integer", value: "3" }
  { type: "group", value: "." }
  { type: "integer", value: "500" }
]

可能なタイプは以下のとおりです。

currency
通貨の文字列です。"$"や"€"のような記号または"Dollar", "Euro" の文字列です。これらの文字列はcurrencyDisplay の特定方法に依存します。
decimal
小数点区切り文字 (".")
fraction
端数
group
グループ区切り文字 ("1,000")
infinity
Infinity文字列 ("∞").
integer
整数
literal
書式設定された数字のリテラル文字列または空白
minusSign
マイナス記号の文字列("-")
nan
NaN文字列 ("NaN")
plusSign

プラス起動の文字列 ("+")

percentSign
パーセント文字列("%")

NumberFormat はローカライズされた不明瞭な文字列を出力します。出力された文字列は直接操作できません。

var number = 3500;

var formatter = new Intl.NumberFormat('de-DE', { 
  style: 'currency', 
  currency: 'EUR' 
});

formatter.format(number);
// "3.500,00 €"

しかし、多くのユーザーインターフェースでは、この文字列の書式形式をカスタマイズしたいと要望があります。formatToParts メソッドNumberFormatフォーマッタによって生成された文字列を要素ごとの文字列として提供することでロケールに応じた書式設定を可能にします

formatter.formatToParts(number);

// return value: 
[ 
  { type: "integer",  value: "3"   }
  { type: "group",    value: "."   }
  { type: "integer",  value: "500" }
  { type: "decimal",  value: ","   }
  { type: "fraction", value: "00"  }
  { type: "literal",  value: " "   }
  { type: "currency", value: "€"   }
]

これで情報は個別に利用可能となり、カスタマイズされた方法でフォーマットして連結することができます。例えば Array.prototype.map()や、 arrow functions、 a switch statement、 template literalsArray.prototype.reduce()を使います。

var numberString = formatter.formatToParts(number).map(({type, value}) => { 
  switch (type) {
    case 'currency': return `<strong>${value}</strong>`; 
    default : return value; 
  } 
}).reduce((string, part) => string + part);

上記はformatToParts()メソッドを使い、通貨を太字にします。

console.log(numberString);
// "3.500,00 <strong>€</strong>"

ポリフィル

この機能のポリフィルは proposal repository で可能です。

仕様

Specification Status Comment
ECMAScript Internationalization API 4.0 (ECMA-402)
Intl.NumberFormat.prototype.formatToParts の定義
ドラフト Initial definition

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応631 2 ?58 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし631 2 ? ? ? ? なし

1. Need to set the flag on the commandline via --js-flags

2. From version 63: this feature is behind the harmony-number-format-to-parts runtime flag.

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: mochiya98, shisama
 最終更新者: mochiya98,