作用
numbrojs 可以将数字设置为看起来像货币,百分比,时间,甚至是带有小数位,千位和缩写的普通旧数字。
例如://10,000.23、+10,000.23、 1千、104k、第一、52号等等
使用
yarn add numbro
import numbro from "numbro";
// 引入语言包 "./node_modules/numbro/dist/languages.min.js"
numbro.setLanguage("zh-CN");
numbro(value).format(formatAgr);// 输出对应格式化好的字符串
在ts中不可以直接import 语言包会报错,解决方法如下:
setNumbroLocale(locale: string){ try { if (!numbro.languages()[locale]) { // Unfortunatelly we need to include the languages file directly. // eslint-disable-next-line @typescript-eslint/no-var-requires const languages = require("numbro/dist/languages.min.js"); if (languages) { const numbroLanguage = languages[locale]; if (numbroLanguage) { numbro.registerLanguage(numbroLanguage); } } } numbro.setLanguage(locale); } catch (e:any) { console.log( "Error with configuring numbro" + (e.message ? ": " + e.message : ".") ); console.log(e); } } setNumbroLocale("zh-CN")
常用
numbro常用方法
| 方法名 | 解释 | 示例 |
|---|---|---|
| numbro.isNumbro() | 是否为Numbro | numbro.isNumbro(numbro(1000))//true |
| language() | 当前语言 | numbro.language()// "zh-CN" |
| registerLanguage() | 注册语言 | 注册完才能设置 |
| setLanguage() | 设置语言 | numbro.setLanguage("zh-CN") |
| languages() | 返回当前语言信息 | numbro.languages()// {"zh-CN":{语言信息}} |
| languageData() | 返回当前语言信息 | numbro.languageData()//{语言信息} |
| zeroFormat('string') | 当格式化值为的数字时,设置自定义输出 | numbro.zeroFormat('N/A'); numbro(0).format('0.0')// 'N/A' |
| defaultFormat() | 输出默认设置 | numbro.defaultFormat()// {} |
| setDefaults() | 设置默认 | numbro.setDefaults({ thousandSeparated: true, mantissa: 2 });// |
| defaultCurrencyFormat() | 输出货币格式默认设置 | //{spaceSeparated:true,spaceSeparatedCurrency: true,thousandSeparated: true,totalLength: 4} |
| validate(string,Format) | 校验格式是否符合要求 | numbro.validate("1,000",{spaceSeparated:true,spaceSeparatedCurrency: true,thousandSeparated: true,totalLength: 4})//true |
| loadLanguagesInNode() | 加载与 TAGS 匹配的语言 | |
| unformat() | 反向格式化 | numbro.unformat("1,000")//1000 |
numbro(value)常用方法
| 方法名 | 解释 | 示例 |
|---|---|---|
| clone() | 复制出一个 | numbro(1000).clone().value()//1000 |
| format(format?: Format、string): string; | 格式化 | numbro(1000).format({thousandSeparated: true})//1,000 |
| formatCurrency(参数同上) | 格式化成货币格式 | numbro(3332222).formatCurrency()¥ 3.332 百万 |
| formatTime(参数同上) | 格式化成时间格式 | numbro(60).formatTime()// 0:01:00 |
| binaryByteUnits() | 二进制字节单位 | numbro(22222).binaryByteUnits()//KiB |
| decimalByteUnits() | 十进制字节单位 | numbro(22222).binaryByteUnits()//KB |
| byteUnits() | 字节单位 | numbro(22222).binaryByteUnits()//KB |
| difference(number) | 两个数的差值 | numbro(50).binaryByteUnits(10)//40 |
| add(number) | 增加 | numbro(50).add(10).value()//60 |
| subtract(number) | 减去 | numbro(50).subtract(10).value()//40 |
| multiply(number) | 乘以 | numbro(50).multiply(10).value()//500 |
| divide(number) | 除以 | numbro(50).divide(10).value()//5 |
| set(number) | 设置值 | numbro(50).set(10).value()//10 |
| value() | 值 | numbro(50).value()//50 |
| valueOf() | 值 | numbro(50).valueOf()//50 |
Format 常用配置信息
| 属性 | 解释 | 可选值 | 示例 |
|---|---|---|---|
| output | 输出格式 | "currency" 、 "percent"/百分 、"byte" 、"time" 、 "ordinal"/顺序 、"number" | { output: "percent" }//43 % |
| base | 进制转换格式 | "decimal"/十进制 、 "binary"/二进制 、"general" | { output: "byte", base: "binary"}//2 KiB |
| characteristic | 整数部分的长度 | number | 32.35689 //0032.35689 |
| prefix | 前缀 | {"output":"currency","prefix":"NI" } | 32.35689//NI¥32.35689 |
| postfix | 后缀 | {"output":"currency","postfix":"NI" } | 32.35689//¥32.35689NI |
| forceAverage | 强制四舍五入 | "trillion" 、 "billion" 、 "million" 、 "thousand" | 1132.3//¥1千 |
| average | 是否四舍五入 | boolean{"output":"currency","average":false} | 1632.35689//¥1632.35689 |
| currencyPosition | 货币符号位置 | "prefix"、"infix"、"postfix"{"output":"currency","currencyPosition":"infix"} | 1632.35689//1632¥35689 |
| currencySymbol | 货币符号 | {"output":"currency","currencySymbol":"DD"} | //DD1632.35689 |
| totalLength | 总长度 | {"output":"currency","currencySymbol":"DD","totalLength":3} | //DD1.63千 |
| mantissa | 尾数 | {"output":"currency","currencySymbol":"DD","mantissa":3} | //DD1632.357 |
| trimMantissa | 是否去掉0 | {"output":"currency","trimMantissa":true,"mantissa":6} | //¥1632.35689 |
| thousandSeparated | 千分位 | {"output":"currency","thousandSeparated":true,"characteristic":6} | //¥001,632.35689 |
| abbreviations | 缩写配置 | ||
| negative | 负值显示 | "sign"(-1632.35689返回-¥1,632.35689)、"parenthesis"(-1632.35689返回¥(1,632.35689)) | |
| forceSign | 显示符号 | {"output":"number","forceSign":true,"negative":"sign"} | 1632.3//+1632.3 |
| spaceSeparated | 与单位之间的空格 | {"output":"currency","spaceSeparated":true} | //¥ 1632.32 |
| exponential | 科学计数法 | {"output":"currency","exponential":true} | //¥1.63232e+3 |
| prefixSymbol | 前缀符号 | {"output":"percent","prefixSymbol":true,"prefix":"nini"} | //nini%163232 |
| lowPrecision | 低精度 |
以上为常用方法,官网地址为numbrojs.com/format.html…