JS数字控件之Numbro

978 阅读3分钟

作用

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()是否为Numbronumbro.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整数部分的长度number32.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…

扫码_搜索联合传播样式-标准色版.png