NumberFormat 数字格式

按当前语言格式化数字。

收藏 13万次，好评率 96.4%

定价 ¥1,280.00

<script setup lang="ts">
  import { NumberFormat, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="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>
</template>

vue

用法

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

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

1,234,567.891

<script setup lang="ts">
  import { NumberFormat } from '@hina-ui/vue'
</script>

<template>
  <NumberFormat :value="1234567.891" />
</template>

vue

示例

格式

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

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

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm, NumberFormat } from '@hina-ui/vue'
</script>

<template>
  <DescriptionList class="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>
</template>

vue

小数位

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

默认： 3.142

precision 为 2： 3.14

precision 为 0： 3

<script setup lang="ts">
  import { NumberFormat, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="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>
</template>

vue

随语言变化

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

简体中文： 123万

English： 1.2M

<script setup lang="ts">
  import { NumberFormat, Stack, Text, enUS, provideUiLocale } from '@hina-ui/vue'
  import { defineComponent, h } from 'vue'

  const English = defineComponent({
    setup(_, { slots }) {
      provideUiLocale(enUS)
      return () => h('span', slots.default?.())
    },
  })
</script>

<template>
  <Stack class="max-w-sm">
    <Text>
      简体中文：
      <NumberFormat :value="1234567" format="compact" />
    </Text>
    <Text>
      English：
      <English><NumberFormat :value="1234567" format="compact" /></English>
    </Text>
  </Stack>
</template>

vue

无效值

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

数值为 null： —

数值为 NaN： —

<script setup lang="ts">
  import { NumberFormat, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-sm">
    <Text>
      数值为 null：
      <NumberFormat :value="null" />
    </Text>
    <Text>
      数值为 NaN：
      <NumberFormat :value="Number.NaN" />
    </Text>
  </Stack>
</template>

vue

行为

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

API

Props

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

用法

示例

格式

小数位

随语言变化

无效值

行为

无障碍

API

Props