lightning:formattedNumber (ベータ)

lightning:formattedNumber コンポーネントは、小数、通貨、およびパーセントの書式設定された数値を表示します。このコンポーネントは、Intl.NumberFormat JavaScript オブジェクトを使用して、数値の書式を設定します。アプリケーションのユーザ設定に設定されているロケールによって数値の書式が決まります。

このコンポーネントには、アプリケーションでの数値の書式設定処理方法を指定する属性がいくつかあります。これらの属性の中には minimumSignificantDigits と maximumSignificantDigits があります。有効数字とは数値の精度のことです。たとえば、1000 の有効数字は 1 ですが、1000.0 の有効数字は 5 です。さらに、maximumFractionDigits を使用して小数点以下の桁数をカスタマイズできます。

デフォルトの小数点以下の桁数は 3 桁です。次の例は 1234.568 を返します。

1<aura:component>
2    <lightning:formattedNumber value="1234.5678" />
3</aura:component>

通貨のデフォルトの小数点以下の桁数は 2 桁です。この例では、書式設定された数値は $5,000.00 と表示されます。

1<aura:component>
2    <lightning:formattedNumber value="5000" style="currency" currencyCode="USD" />
3</aura:component>

パーセントのデフォルトの小数点以下の桁数は 0 桁です。この例では、書式設定された数値は 50% と表示されます。

1<aura:component>
2    <lightning:formattedNumber value="0.5" style="percent" />
3</aura:component>

このコンポーネントは、Apple Safari 10 以下で次のフォールバック動作を提供します。

• style を currency に設定した場合、ロケールとは異なる currencyCode 値を指定すると、記号の代わりに通貨コードが表示されます。次の例では、フォールバックモードの場合に EUR12.34 が表示され、その他の場合に €12.34 が表示されます。
  1<lightning:formattedNumber value="12.34" style="currency"
  2 currencyCode="EUR"/>

• currencyDisplayAs は、記号のみをサポートします。次の例では、currencyCode がユーザのロケール通貨と一致する場合に限ってフォールバックモードで $12.34 が表示され、その他の場合は USD12.34 が表示されます。
  1<lightning:formattedNumber value="12.34" style="currency"
  2 currencyCode="USD" currencyDisplayAs="symbol"/>