数字格式化的 js 库
数字格式化的 js 库
Numeral.js，是一个用于格式化数字和处理数字的 js 库。
Tip：目前 Star 有 9.2k，5年以前就没有在更新。其文档写得不很清晰，比如它提供了多语言，但如何切换成中文，怎么使用却没有说，对于某些问题（abbreviations 报错）笔者只有从源码、更新日志和 Issues 中寻找答案。
使用它
node 中通过 npm 安装即可：
PS E:\react-project> npm i numeral
Tip：也可以在浏览器中直接通过 src 的方式使用。
创建实例
通过 numeral() 创建一个实例：
var myNumeral = numeral(1000);
var value = myNumeral.value();
// value 1000
console.log('value', value)
感觉好鸡肋，但可以取消格式化。比如将 1,000 处理成 1000：
var myNumeral2 = numeral('1,000');
var value2 = myNumeral2.value();
// value2 1000
console.log('value2', value2)
格式化
这部分是我们最关心的。比如笔者的需求有：
- 将后台的字节数根据数值大小自动转为
KB、MB、GB等对应的单位 - 数字太长，显示区域有限，比如将
123456789转为123.5m或123.5百万
format()
通过 format() 可以将 1000 格式化成 1,000，将 123456789 格式化成 123,456,789。请看示例：
var number = numeral(1000).format('0,0');
// number: 1,000
console.log('number: ', number);
var number2 = numeral(123456789).format('0,0');
// number2: 123,456,789
console.log('number2: ', number2);
// 四舍五入
var number3 = numeral(1.93).format('0,0');
// number3: 2
console.log('number3: ', number3);
// 四舍五入
var number4 = numeral(1.23).format('0,0');
// number4: 1
console.log('number4: ', number4);
Tip：上面我们用了 0,0 这种格式，其他格式请直接看 numeral.js:
// node_modules\numeral\tests\numeral.js
describe('Format', function() {
it('should format to a number', function() {
var tests = [
[0, null, '0'],
[0, '0.00', '0.00'],
[null, null, '0'],
[NaN, '0.0', '0.0'],
[1.23,'0,0','1'],
[10000,'0,0.0000','10,000.0000'],
[10000.23,'0,0','10,000'],
[-10000,'0,0.0','-10,000.0'],
[10000.1234,'0.000','10000.123'],
[10000,'0[.]00','10000'],
[10000.1,'0[.]00','10000.10'],
[10000.123,'0[.]00','10000.12'],
[10000.456,'0[.]00','10000.46'],
[10000.001,'0[.]00','10000'],
[10000.45,'0[.]00[0]','10000.45'],
[10000.456,'0[.]00[0]','10000.456'],
[10000,'(0,0.0000)','10,000.0000'],
[-10000,'(0,0.0000)','(10,000.0000)'],
[-12300,'+0,0.0000','-12,300.0000'],
[1230,'+0,0','+1,230'],
[1230,'-0,0','1,230'],
[-1230,'-0,0','-1,230'],
[-1230.4,'0,0.0+','1,230.4-'],
[-1230.4,'0,0.0-','1,230.4-'],
[1230.4,'0,0.0-','1,230.4'],
[100.78, '0', '101'],
[100.28, '0', '100'],
[1.932,'0.0','1.9'],
[1.9687,'0','2'],
[1.9687,'0.0','2.0'],
[-0.23,'.00','-.23'],
[-0.23,'(.00)','(.23)'],
[0.23,'0.00000','0.23000'],
[0.67,'0.0[0000]','0.67'],
[3162.63,'0.0[00000000000000]','3162.63'],
[1.99,'0.[0]','2'],
[1.0501,'0.00[0]','1.05'],
[1.005,'0.00','1.01'],
// leading zero
[0, '00.0', '00.0'],
[0.23, '000.[00]', '000.23'],
[4, '000', '004'],
[10, '00000', '00010'],
[1000, '000,0', '1,000'],
[1000, '00000,0', '01,000'],
[1000, '0000000,0', '0,001,000'],
// abbreviations
[2000000000,'0.0a','2.0b'],
[1230974,'0.0a','1.2m'],
[1460,'0a','1k'],
[-104000,'0 a','-104 k'],
[999950,'0.0a','1.0m'],
[999999999,'0a','1b'],
// forced abbreviations
[-5444333222111, '0,0 ak', '-5,444,333,222 k'],
[5444333222111, '0,0 am', '5,444,333 m'],
[-5444333222111, '0,0 ab', '-5,444 b'],
[-5444333222111, '0,0 at', '-5 t'],
[123456, '0.0[0] ak', '123.46 k'],
[150,'0.0 ak','0.2 k']
],
i,
n,
output;
for (i = 0; i < tests.length; i++) {
n = numeral(tests[i][0]);
output = n.format(tests[i][1]);
expect(output).to.equal(tests[i][2]);
expect(typeof output).to.equal('string');
}
});
});
字节转换
比如将 1024 转为 1KB，将 1024*1024 转为 1MB。将请看示例：
PS D:\spug-study> node
Welcome to Node.js v16.14.2.
Type ".help" for more information.
> let numeral = require('numeral')
undefined
> numeral(1024).format('0b')
'1KB'
> numeral(1024*1024).format('0b')
'1MB'
> numeral(1024*1024*1024).format('0b')
'1GB'
> numeral(1024*1024*1024*1024).format('0b')
'1TB'
> numeral(1024*1024*1024*1024*32).format('0b')
'35TB'
>
Tip：笔者直接在 node 环境下运行。更多格式化语法请看 bytes.js 文件。
// node_modules\numeral\tests\formats\bytes.js
it('should format to bytes', function() {
var decimal = 1000;
var binary = 1024;
var tests = [
[0,'0b','0B'],
[null,'0 b','0 B'],
[100,'0b','100B'],
[binary * 2,'0 ib','2 KiB'],
[Math.pow(binary, 2) * 5,'0ib','5MiB'],
[Math.pow(binary, 3) * 7.343,'0.[0] ib','7.3 GiB'],
[Math.pow(binary, 4) * 3.1536544,'0.000ib','3.154TiB'],
[Math.pow(binary, 5) * 2.953454534534,'0ib','3PiB'],
[decimal * 2,'0 b','2 KB'],
[Math.pow(decimal, 2) * 5,'0b','5MB'],
[Math.pow(decimal, 3) * 7.343,'0.[0] b','7.3 GB'],
[Math.pow(decimal, 4) * 3.1536544,'0.000b','3.154TB'],
[Math.pow(decimal, 5) * 2.953454534534,'0b','3PB']
],
i;
for (i = 0; i < tests.length; i++) {
expect(numeral(tests[i][0]).format(tests[i][1])).to.equal(tests[i][2]);
}
});
字节转数字
比如可以将 1KB 转为数字，但结果只是 1000，如果要 1024，需要使用 1 KiB。请看示例：
> numeral('1KB').value()
1000
> numeral('1 KiB').value()
1024
> numeral('1MB').value()
1000000
Tip：有关字节反解析的更多介绍请看 bytes.js。
// node_modules\numeral\tests\formats\bytes.js
it('should unformat to number', function() {
var decimal = 1000;
var binary = 1024;
var tests = [
['0B', 0],
['0 B', 0],
['100B', 100],
['2 KiB', binary * 2],
['5MiB', Math.pow(binary, 2) * 5],
['7.3 GiB', Math.pow(binary, 3) * 7.3],
['3.154TiB', Math.pow(binary, 4) * 3.154],
['3PiB', Math.pow(binary, 5) * 3],
['2 KB', decimal * 2],
['5MB', Math.pow(decimal, 2) * 5],
['7.3 GB', Math.pow(decimal, 3) * 7.3],
['3.154TB', Math.pow(decimal, 4) * 3.154],
['3PB', Math.pow(decimal, 5) * 3]
],
i;
for (i = 0; i < tests.length; i++) {
expect(numeral(tests[i][0]).value()).to.equal(tests[i][1]);
}
});
时间转换转化
将数字（秒）转为时间形式。请看示例：
> numeral(1).format('00:00:00')
'0:00:01'
> numeral(60).format('00:00:00')
'0:01:00'
> numeral(60*60).format('00:00:00')
'1:00:00'
百分比转化
请看示例：
> numeral(0.974878234).format('0.000%')
'97.488%'
> numeral(0).format('0%')
'0%'
> numeral(1).format('0%')
'100%'
Tip：更多介绍请看 node_modules\numeral\tests\formats\percentage.js。
货币转化
请看示例：
> numeral(1000.234).format('$0,0.00')
'$1,000.23'
Tip：更多用法请看 currency.js。
// node_modules\numeral\tests\formats\currency.js
describe('Currency', function() {
after(function() {
numeral.reset();
});
it('should format to currency', function() {
var tests = [
[0,'$0.00','$0.00'],
[null,'$0.00','$0.00'],
[0.99,'$0,0.00','$0.99'],
[1000.234,'$0,0.00','$1,000.23'],
[1001,'$ 0,0.[00]','$ 1,001'],
[1000.234,'0,0.00 $','1,000.23 $'],
[-1000.234,'0,0.00 $','-1,000.23 $'],
[-1000.234,'($0,0)','($1,000)'],
[-1000.234,'(0,0$)','(1,000$)'],
[-1000.234,'(0,0 $)','(1,000 $)'],
[-1000.234,'$0.00','-$1000.23'],
[-1000.234,'$ 0.00','-$ 1000.23'],
[1230974,'($0.00 a)','$1.23 m'],
[-1000.234,'$ (0,0)','$ (1,000)'],
[-1000.234,'$(0,0)','$(1,000)'],
[-1000.234,'$ (0,0.00)','$ (1,000.23)'],
[-1000.234,'$(0,0.00)','$(1,000.23)'],
[-1000.238,'$(0,0.00)','$(1,000.24)'],
[-1000.234,'$-0,0','$-1,000'],
[-1000.234,'$ -0,0','$ -1,000'],
[1000.234,'$ (0,0)','$ 1,000'],
[1000.234,'$(0,0)','$1,000'],
[1000.234,'$ (0,0.00)','$ 1,000.23'],
[1000.234,'$(0,0.00)','$1,000.23'],
[1000.238,'$(0,0.00)','$1,000.24'],
[1000.234,'$-0,0','$1,000'],
[1000.234,'$ -0,0','$ 1,000']
],
i;
for (i = 0; i < tests.length; i++) {
expect(numeral(tests[i][0]).format(tests[i][1])).to.equal(tests[i][2]);
}
});
it('should unformat to currency', function() {
var tests = [
['$0.00', 0],
['$0.99', 0.99],
['$1,000.23', 1000.23],
['1,000.23 $', 1000.23],
['($1,000)', -1000],
['-1,000$', -1000],
['$1.23 m', 1230000],
],
i;
for (i = 0; i < tests.length; i++) {
expect(numeral(tests[i][0]).value()).to.equal(tests[i][1]);
}
});
});
指数转化
请看示例：
> numeral(77777777.1234).format('0.0e+0')
'7.8e+7'
Tip：更多用法请看 exponential.js。
// node_modules\numeral\tests\formats\exponential.js
it('should format to exponential notation', function() {
var tests = [
[0,'0e+0','0e+0'],
[null,'0e+0','0e+0'],
[1,'0e+0','1e+0'],
[77.1234,'0.0e+0','7.7e+1'],
[0.000000771234,'0.0e-0','7.7e-7'],
[-0.000000771234,'0.00e-0','-7.71e-7'],
[77.1234,'0.000e+0','7.712e+1'],
[-1000830298,'0.0[000]e+0','-1.0008e+9']
],
i;
for (i = 0; i < tests.length; i++) {
expect(numeral(tests[i][0]).format(tests[i][1])).to.equal(tests[i][2]);
}
});
比特率转化
比特率，是指单位时间内传送的比特（bit）数，单位为bps（bit per second）。
> numeral(.0056).format('0 BPS')
'56 BPS'
Tip：更多用法请看 bps.js：
// node_modules\numeral\tests\formats\bps.js
it('should format to bps', function() {
var tests = [
[0,'0 BPS','0 BPS'],
[0.0001, '0 BPS', '1 BPS'],
[.0056, '0 BPS', '56 BPS'],
[.25, '0BPS', '2500BPS'],
[.000001, '0.00 BPS', '0.01 BPS']
],
i;
for (i = 0; i < tests.length; i++) {
expect(numeral(tests[i][0]).format(tests[i][1])).to.equal(tests[i][2]);
}
});
四则运算
numeral 提供加减乘除四则运算的方法，例如 1000 加 10 等于 1010。请看示例：
> numeral(1000).add(10).value()
1010
Tip：更多介绍请看 numeral.js。
// node_modules\numeral\tests\numeral.js
describe('Manipulate', function() {
// 加法
describe('Add', function() {
it('should add', function() {
var tests = [
[1000,10,1010],
[0.5,3,3.5],
[-100,200,100],
[0.1,0.2,0.3],
[0.28,0.01,0.29],
[0.289999,0.000001,0.29],
[0.29,0.01,0.3]
],
num;
for (var i = 0; i < tests.length; i++) {
num = numeral(tests[i][0]);
num.add(tests[i][1]);
expect(num.value()).to.equal(tests[i][2]);
}
});
});
// 减法
describe('Subtract', function() {
it('should subtract', function() {
var tests = [
[1000,10,990],
[0.5,3,-2.5],
[-100,200,-300],
[0.3,0.1,0.2],
[0.28,0.01,0.27],
[0.29,0.01,0.28]
],
num;
for (var i = 0; i < tests.length; i++) {
num = numeral(tests[i][0]);
num.subtract(tests[i][1]);
expect(num.value()).to.equal(tests[i][2]);
}
});
});
// 乘法
describe('Multiply', function() {
it('should multiply', function() {
var tests = [
[1000,10,10000],
[0.5,3,1.5],
[-100,200,-20000],
[0.1,0.2,0.02],
[0.28,0.01,0.0028],
[0.29,0.01,0.0029],
[0.00000231,10000000,23.1]
],
num;
for (var i = 0; i < tests.length; i++) {
num = numeral(tests[i][0]);
num.multiply(tests[i][1]);
expect(num.value()).to.equal(tests[i][2]);
}
});
});
// 除法
describe('Divide', function() {
it('should divide', function() {
var tests = [
[1000,10,100],
[0.5,3,0.16666666666666666],
[-100,200,-0.5],
[5.3,0.1,53],
[0.28,0.01,28],
[0.29,0.01,29]
],
num;
for (var i = 0; i < tests.length; i++) {
num = numeral(tests[i][0]);
num.divide(tests[i][1]);
expect(num.value()).to.equal(tests[i][2]);
}
});
});
// 差值。例如 1000 和 10 相差 990。
describe('Difference', function() {
it('should find a difference', function() {
var tests = [
[1000,10,990],
[0.5,3,2.5],
[-100,200,300],
[0.3,0.2,0.1],
[0.28,0.01,0.27],
[0.29,0.01,0.28]
],
num;
for (var i = 0; i < tests.length; i++) {
num = numeral(tests[i][0]);
expect(num.difference(tests[i][1])).to.equal(tests[i][2]);
}
});
});
// 四舍五入。
describe('Rounding', function() {
it('should format with rounding', function() {
var tests = [
// value, format string, expected w/ floor, expected w/ ceil
[2280002, '0.00a', '2.28m', '2.29m'],
[10000.23,'0,0','10,000', '10,001'],
[1000.234,'0,0.00','1,000.23', '1,000.24'],
[0.97487823,'0.000','0.974','0.975'],
[-0.433,'0.0','-0.5', '-0.4']
],
i;
for (i = 0; i < tests.length; i++) {
// floor
expect(numeral(tests[i][0]).format(tests[i][1], Math.floor)).to.equal(tests[i][2]);
// ceil
expect(numeral(tests[i][0]).format(tests[i][1], Math.ceil)).to.equal(tests[i][3]);
}
});
});
});
多语言
需求：数字很长时，由于排版的考虑，需要将数字显示的更短，转为指数勉强可以，但对很多人还是不友好，如果能转为 123.5百万 这种形式就完美了。
numeral 提供了缩写，比如可以将 1230974 转为 1.2m（m，指百万）：
// node_modules\numeral\tests\numeral.js
...
// abbreviations
[2000000000,'0.0a','2.0b'],
[1230974,'0.0a','1.2m'],
[1460,'0a','1k'],
[-104000,'0 a','-104 k'],
[999950,'0.0a','1.0m'],
[999999999,'0a','1b'],
请看示例：
const numeral = require('numeral');
var number5 = numeral(123456789).format('0.0a')
// 123.5m
console.log('number5: ', number5);
123.5m 是多少，能否转为中文？笔者在 chs.js 中找到如下代码：
// node_modules\numeral\locales\chs.js
numeral.register('locale', 'chs', {
delimiters: {
thousands: ',',
decimal: '.'
},
abbreviations: {
thousand: '千',
million: '百万',
billion: '十亿',
trillion: '兆'
},
ordinal: function (number) {
return '.';
},
currency: {
symbol: '¥'
}
});
通过引入 chs 并切换成中文，成功将 123456789 转为 123.5百万。请看示例：
const numeral = require('numeral');
// 加载中文
+ require('numeral/locales/chs')
// 切换成中文
+ numeral.locale('chs')
const number5 = numeral(123456789).format('0.0a')
// number5: 123.5百万
console.log('number5: ', number5);
Tip：对于单页面项目，在其他组件中若需要使用英文，比如不要 123.5百万，而要 123.5m，直接切换语言（numeral.locale('en')）即可。就像这样：
...
const number5 = numeral(123456789).format('0.0a')
// number5: 123.5百万
console.log('number5: ', number5);
+ numeral.locale('en')
const number6 = numeral(123456789).format('0.0a')
// number6: 123.5m
console.log('number6: ', number6);
笔者的示例
import React from 'react';
const numeral = require('numeral');
require('numeral/locales/chs')
numeral.locale('chs')
function Test() {
const number = numeral(1000).format('0,0');
// number: 1,000
console.log('number: ', number);
const number2 = numeral(123456789).format('0,0');
// number2: 123,456,789
console.log('number2: ', number2);
// 四舍五入
const number3 = numeral(1.93).format('0,0');
// number3: 2
console.log('number3: ', number3);
// 四舍五入
const number4 = numeral(1.23).format('0,0');
// number4: 1
console.log('number4: ', number4);
const number5 = numeral(123456789).format('0.0a')
// number5: 123.5百万
console.log('number5: ', number5);
numeral.locale('en')
const number6 = numeral(123456789).format('0.0a')
// number6: 123.5m
console.log('number6: ', number6);
return (
<div>
react 项目
</div>
)
}
export default Test
数字格式化的 js 库的更多相关文章
- Numeral.js 是一个用于格式化和数字四则运算的js 库
1.Numeral.js 是一个用于格式化和数字四则运算的js 库. 2.支持多种语言,包含中文在内的17种语言. 在浏览器中引用js文件: <script src="numeral. ...
- js 金融数字格式化
js 金融数字格式化 finance money number format 数字格式化 regex `123456789`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') ...
- js数字格式化-四舍五入精简版
搜索网上的,数字格式化过余复杂,自己想了个简单方法,欢迎吐槽. 简化说明: '123333' => 12.3万 parseInt('123333') 字符串转整型 parseInt('12333 ...
- Vue-admin工作整理（十九）：从数字渐变组件谈第三方JS库Count-to的使用
1.组件封装基础 npm install countup@latest 2.组件中使用id值 3.组件中获得dom 如何封装一个组件,在组件中用到需要传入HTML元素ID值的JS库时如何处理,如何获取 ...
- js数字格式化(截断格式化或四舍五入格式化)
/*** * 数字格式化(适合金融产品截断小数位后展示) * @param num * @param pattern (标准格式:#,###.## 或#.## 或#,###00.00) * @para ...
- 主流JS库一览
主流JS库一览 标签: prototypedojomootoolsprototypejsjqueryjavascript 2009-10-14 22:52 19936人阅读 评论(2) 收藏 举报 ...
- 12个值得关注的顶级可视化JS库 涉及图表、动画、时间处理，表格操作
本文是译文,原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库,这个也是毫不逊色其他图表库的.另外Handsontable电子表格库也是 ...
- 一些JS库汇总
作者:wlove 链接:https://www.zhihu.com/question/429436558/answer/2348777302 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权, ...
- 近期写js库中遇到的一个判别的问题
最近在写一个自己的js库,正写到数组包,在里面定义了一个排序,只对纯数字数据进行排序的方法,但是在测试的时候发现一个很诡异的问题,那就是传入一个对象的时候,它没有返回erroemsg而是返回了对象,上 ...
随机推荐
- OpenHarmony标准设备应用开发（一）——HelloWorld
(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 邢碌 本文是 OpenAtom OpenHarmony(以下简称"OpenHarmony")标准设 ...
- grpc流模式-go实现
目录 1. 什么是数据流 2. grpc的四种数据流 2.1 简单模式 2.2 服务端数据流模式 2.3 客户端数据流模式 2.4 双向数据流 3. 上代码 3.1 代码目录 3.2 编写stream ...
- JavaScript深入理解系列：call与apply
定义 call和apply:函数调动call()方法在执行的时候,函数的里面的this会指向第一个参数值,除第一个参数值后面的若干支都是传进该函数,简而言之就是改变函数运行时的this指向. 使用示例 ...
- Bugku练习题---MISC---1和0的故事
Bugku练习题---MISC---1和0的故事 flag:flag{QR_c0de_1s_1nterest1n9} 解题步骤: 1.观察题目,下载附件 2.不得不说这道题挺贵的,打开是这个样子的,由 ...
- SQL安装
安装教程 点击传送 遇到的问题 解决方案1:
- 机器学习-学习笔记(一) --> （假设空间 & 版本空间）及 归纳偏好
机器学习 一.机器学习概念 啥是机器学习 机器学习:假设用P来评估计算机程序在某任务类T上的性能,若一个程序通过利用经验E在T中任务上获得了性能改善,则关于T和P,该程序对E进行了学习 通俗讲:通过计 ...
- .NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件
系列目录 [已更新最新开发文章,点击查看详细] WebView2组件支持在WinForm.WPF.WinUI3.Win32应用程序中集成加载Web网页功能应用.本篇主要介绍如何在WinForm ...
- css实现弹框
CSS遮罩层实现思路:遮罩层的影藏方式一般有display:none.visibility:none.opacity: 0.遮罩层从无到有的出现效果一般是opacity值从0~1,结合transiti ...
- OpenStack平台镜像优化
在使用打快照方式制作镜像后,镜像的大小会变得非常大,比如一个基础的CentOS镜像大小为400M左右,但是使用打快照方式制作的镜像大小会有1个G左右,具体的大小还要根据安装的东西来实际情况实际分析. ...
- NMS技术总结（NMS原理、多类别NMS、NMS的缺陷、NMS的改进思路、各种NMS方法）
前言 本文介绍了NMS的应用场合.基本原理.多类别NMS方法和实践代码.NMS的缺陷和改进思路.介绍了改进NMS的几种常用方法.提供了其它不常用的方法的链接. 本文很早以前发过,有个读者评论说 ...