关于 Format numbers
面向 Ghost UI 开发的技能，规定在 `.tsx` 文件中使用 `@tryghost/shade/utils` 的 `formatNumber` 格式化用户可见数字，并介绍相关工具。
主要功能
- 01使用 `formatNumber` 格式化显示值
- 02避免直接或手动格式化数字
- 03使用百分比和缩写工具
- 04格式化货币前转换美分
适用场景
- 01显示会员或订阅者数量
- 02展示邮件互动和文章分析数据
- 03格式化界面中的收入金额
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/format-numbers确认已加载。
详细介绍
格式化数字
在编辑 .tsx 文件时，确保所有面向用户的数字都使用 @tryghost/shade/utils 中的 formatNumber 工具进行格式化。
导入
import { formatNumber } from '@tryghost/shade/utils';
何时使用 formatNumber
在渲染任何向用户展示的数值时，都应使用 formatNumber()，包括：
- 成员数、访客数、订阅者数
- 邮件互动指标（打开数、点击数、退信数）
- 收入金额（货币值需与
centsToDollars()结合使用） - 文章分析数据（浏览量、链接点击数）
- UI 中显示的任何计数或数量
正确用法
<span>{formatNumber(totalMembers)}</span>
<span>{formatNumber(link.count || 0)}</span>
<span>{`${currencySymbol}${formatNumber(centsToDollars(mrr))}`}</span>
<span>{post.members > 0 ? `+${formatNumber(post.members)}` : '0'}</span>
应避免的反模式
在 TSX 文件中格式化数字时，请勿使用以下任何一种模式：
// BAD: raw .toLocaleString()
<span>{count.toLocaleString()}</span>
// BAD: manual Intl.NumberFormat
<span>{new Intl.NumberFormat('en-US').format(count)}</span>
// BAD: raw number without formatting
<span>{memberCount}</span>
// BAD: manual regex formatting
<span>{count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</span>
相关工具
formatPercentage()- 用于百分比（例如打开率、点击率）abbreviateNumber()- 用于紧凑表示法（例如 1.2M、50k）centsToDollars()- 在传给formatNumber之前将分转换为元
所有这些都从 @tryghost/shade/utils 导入。
评论
支持 Markdown