SuperAPI AI 工具集

Format numbers

前端与建站

查看项目

更新于 10-16 02:06

技能介绍

Format Numbers 是一个面向 TSX 文件的数字格式化技能。它的核心用途是:当有人编辑 .tsx 文件时,确保所有面向用户的数字都通过 @tryghost/shade/utils 提供的 formatNumber 工具函数进行格式化。

导入方式为:import { formatNumber } from '@tryghost/shade/utils'。

主要能力与使用场景包括:渲染任何展示给用户的数值时都应使用 formatNumber(),例如成员数量、访客数量、订阅者数量;邮件互动指标,如打开、点击、退信;收入金额,此时可结合 centsToDollars() 处理货币值;文章分析数据,如浏览量、链接点击;以及界面中显示的任何计数或数量。

正确用法示例:<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>。

需要避免的反模式包括:使用原始的 .toLocaleString(),如 <span>{count.toLocaleString()}</span>;手动使用 Intl.NumberFormat,如 <span>{new Intl.NumberFormat('en-US').format(count)}</span>;直接输出未格式化的原始数字,如 <span>{memberCount}</span>;以及手动正则格式化,如 <span>{count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</span>。

相关工具函数还包括:formatPercentage(),用于百分比,例如打开率、点击率;abbreviateNumber(),用于紧凑表示,例如 1.2M、50k;centsToDollars(),用于在传给 formatNumber 之前将美分转换为美元。这些函数均从 @tryghost/shade/utils 导入。