NumberFormat 数字格式

按当前语言格式化数字。

收藏 13万次，好评率 96.4%

定价 ¥1,280.00

import { NumberFormat, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-sm">
      <Text>
        收藏 <NumberFormat value={128456} format="compact" /> 次，好评率{' '}
        <NumberFormat value={0.964} format="percent" precision={1} />
      </Text>
      <Text tone="muted">
        定价 <NumberFormat value={1280} format="currency" currency="CNY" />
      </Text>
    </Stack>
  )
}

tsx

用法

import { NumberFormat } from '@hina-ui/react'

value 是要显示的数字。组件按当前语言输出，默认加千位分隔。

1,234,567.891

import { NumberFormat } from '@hina-ui/react'

export default function Demo() {
  return <NumberFormat value={1234567.891} />
}

tsx

示例

格式

共四档。decimal 是普通数字，compact 缩写大数，percent 把小数显示为百分比，currency 需要同时提供 currency 代码。

decimal: 1,234,567
compact: 123万
percent: 86%
currency: ¥1,234.50

import { DescriptionDetails, DescriptionList, DescriptionTerm, NumberFormat } from '@hina-ui/react'

export default function Demo() {
  return (
    <DescriptionList className="grid max-w-sm grid-cols-[6rem_1fr] gap-y-2 [&>dd]:m-0! [&>dt]:m-0!">
      <DescriptionTerm>decimal</DescriptionTerm>
      <DescriptionDetails>
        <NumberFormat value={1234567} />
      </DescriptionDetails>
      <DescriptionTerm>compact</DescriptionTerm>
      <DescriptionDetails>
        <NumberFormat value={1234567} format="compact" />
      </DescriptionDetails>
      <DescriptionTerm>percent</DescriptionTerm>
      <DescriptionDetails>
        <NumberFormat value={0.8642} format="percent" />
      </DescriptionDetails>
      <DescriptionTerm>currency</DescriptionTerm>
      <DescriptionDetails>
        <NumberFormat value={1234.5} format="currency" currency="CNY" />
      </DescriptionDetails>
    </DescriptionList>
  )
}

tsx

小数位

precision 限制最多显示几位小数，不足的位数不会补零。

默认： 3.142

precision 为 2： 3.14

precision 为 0： 3

import { NumberFormat, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-sm">
      <Text>
        默认： <NumberFormat value={3.14159} />
      </Text>
      <Text>
        precision 为 2： <NumberFormat value={3.14159} precision={2} />
      </Text>
      <Text>
        precision 为 0： <NumberFormat value={3.14159} precision={0} />
      </Text>
    </Stack>
  )
}

tsx

随语言变化

输出跟随 provideUiLocale 提供的语言。同一个数字在简体中文下按万进位，在英文下按千进位。

简体中文： 123万

English： 1.2M

import { createElement, type ReactNode } from 'react'
import { NumberFormat, Stack, Text, UiLocaleProvider, enUS } from '@hina-ui/react'

function English({ children }: { children?: ReactNode }) {
  return createElement(
    'span',
    null,
    <UiLocaleProvider messages={enUS}>{children}</UiLocaleProvider>,
  )
}

export default function Demo() {
  return (
    <Stack className="max-w-sm">
      <Text>
        简体中文： <NumberFormat value={1234567} format="compact" />
      </Text>
      <Text>
        English：{' '}
        <English>
          <NumberFormat value={1234567} format="compact" />
        </English>
      </Text>
    </Stack>
  )
}

tsx

无效值

value 为 null、NaN 或者无穷大时显示一条短横线，不会渲染成 NaN。

数值为 null： —

数值为 NaN： —

import { NumberFormat, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="max-w-sm">
      <Text>
        数值为 null： <NumberFormat value={null} />
      </Text>
      <Text>
        数值为 NaN： <NumberFormat value={Number.NaN} />
      </Text>
    </Stack>
  )
}

tsx

行为

compact 档会把完整数字写入 title，指针悬停即可看到未缩写的数值。
currency 档缺少 currency 代码时退回 decimal，并在开发环境输出告警。

API

Props

属性	类型	默认值	说明
`value`	`number \| null`	—	要显示的数字
`format`	`'decimal' \| 'compact' \| 'percent' \| 'currency'`	`'decimal'`	输出格式
`currency`	`string`	—	货币代码，`currency` 档必填
`precision`	`number`	—	最多显示的小数位
`className`	`string`	—	追加至根元素的类名

用法

示例

格式

小数位

随语言变化

无效值

行为

无障碍

API

Props