大幅提升前端工作效率!Numeral.js数值格式化库来了!
我们日常开发中,时常会碰到数值格式化操作的场景,今天了不起就为大家分享一款相对比较全面的数值格式化的JS库:Numeral.js
Numeral.js
Numeral.js 是一个用来对数值进行操作和格式化的 JS 库。可将数字格式化为货币、百分比、时间,甚至是序数词的缩写(比如1st,100th)。

安装
下载到本地引入
<script src="numeral.min.js"></script>
或使用CDN路径
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
当然,Node.js 环境还可以使用npm包。
npm install numeral
使用
在需要用到的地方声明即可
var numeral = require('numeral');
这相当于创建一个numeral实例。接着就可以拿着这个实例使用了。
- 数字格式化

numeral(1000).format('0,0');
// '1,000'
numeral(1234).format('0,0');
// 1,234 不带小数
numeral(1234).format('0,0.00');
// 1,234.00 保留两位小数
numeral(1).format('0o');
// 1st
numeral(2).format('0o');
// 2nd
numeral(10).format('0o');
// 10th
表中的格式完全够日常开发所用了。
- 货币格式化

numeral(1000.234).format('$0,0.00');
// $1,000.23
ps:自动千分位分隔,四舍五入取值。
- 字节格式化

ps:字节格式化主要用在存储统计上。
- 百分比格式化

遵循四舍五入规则,小数转换为百分比,同时避免了浮点运算精度的问题。
numeral(0.144252).format('0.00%');
// 14.43% 小数点四舍五入
ps:如果直接将0.144252乘以100,会得到什么结果呢?大家不妨试试!
- 时间格式化

numeral(238).format('00:00:00');
// 0:03:58
- 指数格式化

numeral(1123456789).format('0.0e+0');// 1.1e+9
numeral(0.000134255).format('0.0e+0');// 1.3e-4
这也就是我们的科学计数法表示方式。
- 计算相关

哈哈,加、减、乘、除来一套!
var number = numeral(1000);
var result = number.add(100);
// 1100
其他
除了上面的方法之外,numeral.js 中还包括设值、差异求值、复制克隆、本地化、自定义格式等方法和功能。欢迎大家查阅下发地址进一步了解。
Github地址:https://github.com/adamwdraper/Numeral-js
官方网站:
http://numeraljs.com
大幅提升前端工作效率!Numeral.js数值格式化库来了!的更多相关文章
- js 数值格式化函数
function ForDight(Dight,How){ ,How))/Math.pow(,How); return Dight; } //ForDight(Dight,How):数值格式化函数; ...
- 使用Fiddler提高前端工作效率 (实例篇)
上篇中,我们对Fiddler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解Fiddler的神奇魔法. 在我们前端开发 ...
- 使用Fiddler提高前端工作效率 (介绍篇)
1. Fiddler 是什么? Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器.英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让 ...
- moment.js时间格式化库
网址:momentjs.cn 主要用来操作时间的格式化.通过发送API请求获取到的数据中:例如[新闻]中的 发布时间,有的时候.请求到的时间,后台没处理过,那么只能前端来操作数据了. moment.j ...
- Numeral.js – 格式化和操作数字的 JavaScript 库
Numeral.js 是一个用于格式化和操作数字的 JavaScript 库.数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大.支持包括中文在内的17种语言. 您可能感兴 ...
- 开发谷歌浏览器插件会上瘾,搞了一个JSONViewer,一个页面格式化多条JSON,提升工作效率
最近写了一个谷歌浏览器插件(Chrome extension),拿出来分享下,希望能提升大家的工作效率. 一.背景 先说痛点:日常开发中,经常需要不停的把接口输出的JSON拷贝到在线JSON格式化页面 ...
- 提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件
Chrome插件,官方名称extensions(扩展程序):为了方便理解,以下都称为插件. 我们开发的插件需要在浏览器里面运行,打开浏览器,通过右上角的三个点(自定义及控制)-更多工具-拓展程序-打开 ...
- Numeral.js 是一个用于格式化和数字四则运算的js 库
1.Numeral.js 是一个用于格式化和数字四则运算的js 库. 2.支持多种语言,包含中文在内的17种语言. 在浏览器中引用js文件: <script src="numeral. ...
- paip.提高工作效率--数据绑定到table原则和过程Angular js jquery实现
paip.提高工作效率--数据绑定到table原理和流程Angular js jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #----- ...
- 前端工作流程自动化——Grunt/Gulp 自动化
什么是自动化 先来说说为什么要自动化.凡是要考虑到自动化时,你所做的工作必然是存在很多重复乏味的劳作,很有必要通过程序来完成这些任务.这样一来就可以解放生产力,将更多的精力和时间投入到更多有意义的事情 ...
随机推荐
- Java 泛型与通配符 定义与使用
一.泛型 定义: 把类型明确的工作推迟到创建对象或调用方法时才明确的类型,简而言之,未明确的数据类型. 类型: 泛型类,泛型方法,方形接口. 格式 泛型类格式:class 类名<E变量>{ ...
- XAML 设计器已意外退出。(退出代码: e0434352)
一.前言 开门见山,这个问题我遇到过两次,第一次因为项目刚开始不长时间,我查了很长时间都没解决,然后就直接重写了,几乎一样的写法,但问题没复现了,但程序员思维告诉我,一定还是有比较关键的地方出现了问题 ...
- 2020寒假学习笔记12------Python基础语法学习(一)
代码的组织和缩进 Python 语言直接通过缩进来组织 代码块."缩进"成为了 Python 语法强制的规定.缩进时,几个空格都是允许的,但是数目必须统一.我们通常采用" ...
- GLM:通用语言模型
ChatGPT已经火了一段时间了,国内也出现了一些平替,其中比较容易使用的是ChatGLM-6B:https://github.com/THUDM/ChatGLM-6B ,主要是能够让我们基于单卡自己 ...
- flask-wtfwkfom使用
我们在使用flask框架来搭建自己的博客,只要是设涉及到表单相关,必然会想起Flask-WTF与WTForms.对于flask初学者来说,比较容易混淆两者.今天想来一一解释两者的用法. Flask-W ...
- 简单的cs修改器
目录 各个函数解析 main() GetPid() 无限子弹 无限血 无限金币 Patch() 无僵直 稳定射击 Depatch1 手枪连发 Depatch 源代码部分 各个函数解析 这是我根据b站上 ...
- day60:Linux压缩与打包&用户管理&用户提权sudo&grep,sed,awk,sort,uniq
目录 1.文件管理-压缩与打包 2.用户管理 用户怎么查 如何创建用户 创建的用户信息都存储在哪? 用户存储密码的文件 如何为用户设定密码? 3.用户组 4.用户提权相关 5.Extra:额外补充 文 ...
- MySQL(一)Linux下MySQL的安装
Linux下MySQL的安装 1 MySQL的安装 1.1 Linux系统以及工具的准备 这里使用两台CentOS7虚拟机,一台安装8.0版本,另一台克隆的虚拟机安装5.7版本 克隆的虚拟机需要进行配 ...
- 如何确定 this 指向?改变 this 指向的方式有哪些?
this 指向: 1. 全局上下文(函数外) 无论是否为严格模式,均指向全局对象.注意:严格模式下全局对象为undifined 2. 函数上下文(函数内) 默认的,指向函数的调用对象,且是最直接的调用 ...
- java项目 宿舍管理系统 (源码+数据库文件+1w字论文+ppt)
java项目 宿舍管理系统 (源码+数据库文件+1w字论文+ppt)技术框架:java+springboot+vue+mysql后端框架: Spring Boot.Spring MVC.MyBatis ...