Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

FormatNumber

FormatNumber は、特定のロケールとオプションに合わせて数値をフォーマットするために使用されます。

ソース@yamada-ui/format

インポート

import { FormatNumber } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<FormatNumber value={1234567.89} />
Copied!

ロケールの変更する

ロケールを変更する場合は、localeに値を設定します。

編集可能な例

<Grid templateColumns="auto 1fr" gap="sm">
  <Text fontWeight="semibold">en-US</Text>
  <FormatNumber value={1234567.89} locale="en-US" />

  <Text fontWeight="semibold">ja-JP</Text>
  <FormatNumber value={1234567.89} locale="ja-JP" />

  <Text fontWeight="semibold">de-DE</Text>
  <FormatNumber value={1234567.89} locale="de-DE" />

  <Text fontWeight="semibold">fr-FR</Text>
  <FormatNumber value={1234567.89} locale="fr-FR" />

  <Text fontWeight="semibold">zh-CN</Text>
  <FormatNumber value={1234567.89} locale="zh-CN" />
</Grid>
Copied!

コンフィグからカスタマイズする

アプリケーション全体のロケールの設定をしたい場合は、コンフィグをカスタマイズします。

import { UIProvider, extendConfig } from "@yamada-ui/react"


const customConfig = extendConfig({
  locale: "ja-JP",
})


const App = () => {
  return (
    <UIProvider config={customConfig}>
      <YourApplication />
    </UIProvider>
  )
}
Copied!

通貨に変換する

通貨に変換する場合は、styleに"currency"を設定します。

編集可能な例

<Grid templateColumns="auto 1fr" gap="sm">
  <Text fontWeight="semibold">USD</Text>
  <FormatNumber value={1234567.89} style="currency" currency="USD" />

  <Text fontWeight="semibold">EUR</Text>
  <FormatNumber
    value={1234567.89}
    style="currency"
    currency="EUR"
    currencyDisplay="name"
    locale="de-DE"
  />

  <Text fontWeight="semibold">JPY</Text>
  <FormatNumber
    value={1234567.89}
    style="currency"
    currency="JPY"
    currencySign="accounting"
    locale="ja-JP"
  />
</Grid>
Copied!

単位に変換する

単位に変換する場合は、styleに"unit"を設定します。

編集可能な例

<VStack gap="sm">
  <FormatNumber value={100} style="unit" unit="kilogram" />
  <FormatNumber value={100} style="unit" unit="celsius" unitDisplay="long" />
  <FormatNumber
    value={100}
    style="unit"
    unit="kilometer-per-hour"
    unitDisplay="narrow"
  />
</VStack>
Copied!

パーセントに変換する

パーセントに変換する場合は、styleに"percent"を設定します。

編集可能な例

<VStack gap="sm">
  <FormatNumber value={0.45} style="percent" />
  <FormatNumber value={0.45} style="percent" minimumFractionDigits={2} />
</VStack>
Copied!

表記に変換する

表記に変換する場合は、notationに値を設定します。

編集可能な例

<VStack gap="sm">
  <FormatNumber value={1234567.89} notation="standard" />
  <FormatNumber value={1234567.89} notation="scientific" />
  <FormatNumber value={1234567.89} notation="engineering" />
  <FormatNumber value={1234567.89} notation="compact" />
</VStack>
Copied!

小数点以下の桁数を制御する

小数点以下の桁数を制御する場合は、minimumFractionDigitsとmaximumFractionDigitsを使用します。

編集可能な例

<VStack gap="sm">
  <FormatNumber
    value={1234.5678}
    minimumFractionDigits={2}
    maximumFractionDigits={2}
  />
  <FormatNumber
    value={1234.5678}
    minimumFractionDigits={1}
    maximumFractionDigits={4}
  />
</VStack>
Copied!

グループ化を無効にする

グループ化を無効にする場合は、useGroupingにfalseを設定します。

編集可能な例

<FormatNumber value={1234567.89} useGrouping={false} />
Copied!

符号の表示を変更する

符号の表示を変更する場合は、signDisplayに値を設定します。

編集可能な例

<VStack gap="sm">
  <FormatNumber value={1234.5} signDisplay="always" />
  <FormatNumber value={-1234.5} signDisplay="exceptZero" />
</VStack>
Copied!

GitHubでこのページを編集する

前FormatByte次Ripple