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

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung InternetNode.js
基本対応
実験的
Chrome 完全対応 63
補足 無効
完全対応 63
補足 無効
補足 Need to set the flag on the commandline via --js-flags
無効 From version 63: this feature is behind the harmony-number-format-to-parts runtime flag.
Edge ? Firefox 完全対応 58IE ? Opera ? Safari ? WebView Android 未対応 なしChrome Android 完全対応 63
補足 無効
完全対応 63
補足 無効
補足 Need to set the flag on the commandline via --js-flags
無効 From version 63: this feature is behind the harmony-number-format-to-parts runtime flag.
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なしnodejs ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

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

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