我们日常开发中,时常会碰到数值格式化操作的场景,今天了不起就为大家分享一款相对比较全面的数值格式化的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数值格式化库来了!的更多相关文章

  1. js 数值格式化函数

    function ForDight(Dight,How){ ,How))/Math.pow(,How); return Dight; } //ForDight(Dight,How):数值格式化函数; ...

  2. 使用Fiddler提高前端工作效率 (实例篇)

    上篇中,我们对Fiddler Web Debugger有了简单的接触,也许你已经开始在用Fiddler进行HTTP相关的调试,在这一篇,我们将通过一个实例了解Fiddler的神奇魔法. 在我们前端开发 ...

  3. 使用Fiddler提高前端工作效率 (介绍篇)

    1. Fiddler 是什么? Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器.英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让 ...

  4. moment.js时间格式化库

    网址:momentjs.cn 主要用来操作时间的格式化.通过发送API请求获取到的数据中:例如[新闻]中的 发布时间,有的时候.请求到的时间,后台没处理过,那么只能前端来操作数据了. moment.j ...

  5. Numeral.js – 格式化和操作数字的 JavaScript 库

    Numeral.js 是一个用于格式化和操作数字的 JavaScript 库.数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大.支持包括中文在内的17种语言. 您可能感兴 ...

  6. 开发谷歌浏览器插件会上瘾,搞了一个JSONViewer,一个页面格式化多条JSON,提升工作效率

    最近写了一个谷歌浏览器插件(Chrome extension),拿出来分享下,希望能提升大家的工作效率. 一.背景 先说痛点:日常开发中,经常需要不停的把接口输出的JSON拷贝到在线JSON格式化页面 ...

  7. 提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件

    Chrome插件,官方名称extensions(扩展程序):为了方便理解,以下都称为插件. 我们开发的插件需要在浏览器里面运行,打开浏览器,通过右上角的三个点(自定义及控制)-更多工具-拓展程序-打开 ...

  8. Numeral.js 是一个用于格式化和数字四则运算的js 库

    1.Numeral.js 是一个用于格式化和数字四则运算的js 库. 2.支持多种语言,包含中文在内的17种语言. 在浏览器中引用js文件: <script src="numeral. ...

  9. paip.提高工作效率--数据绑定到table原则和过程Angular js jquery实现

    paip.提高工作效率--数据绑定到table原理和流程Angular js  jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #----- ...

  10. 前端工作流程自动化——Grunt/Gulp 自动化

    什么是自动化 先来说说为什么要自动化.凡是要考虑到自动化时,你所做的工作必然是存在很多重复乏味的劳作,很有必要通过程序来完成这些任务.这样一来就可以解放生产力,将更多的精力和时间投入到更多有意义的事情 ...

随机推荐

  1. 使用nsis美化安装向导后,安装时实现浏览器自定义协议打开

    1. electron官方提供api,支持向注册表中写入协议,可通过浏览器打开 app.setAsDefaultProtocolClient('open-electron') 问题:1. 因为该方法时 ...

  2. 可靠消息最终一致性【本地消息表、RocketMQ 事务消息方案】

    更多内容,前往IT-BLOG 一.可靠消息最终一致性事务概述 可靠消息最终一致性方案是指当事务发起方执行完成本地事务后并发出一条消息,事务参与方(消息消费者)一定能够接收消息并处理事务成功,此方案强调 ...

  3. 【数仓运维实践】关于GaussDB(DWS)单SQL磁盘空间管控

    摘要:本文主要讲解数仓运维中遇到单SQL磁盘空间管控问题的解析和方案. 本文分享自华为云社区<GaussDB(DWS)运维 -- 单SQL磁盘空间管控>,作者: 譡里个檔. [问题描述] ...

  4. Tomcat启动报错,Server Tomcat v8.0 Server at localhost failed to start

    Eclipse 中Tomcat 启动报错Eclipse的提示窗口  Server Tomcat v8.0 Server at localhost failed to start .日志输出中报   F ...

  5. GIT 操作大全 基于廖雪峰

    命令显示从最近到最远的提交日志  git log /  git log --pretty=oneline 回退到上一个版本:$ git reset --hard HEAD^   (用HEAD表示当前版 ...

  6. 最新版本 Stable Diffusion 开源 AI 绘画工具之图生图进阶篇

    目录 图生图基本参数 图生图(img2img) 涂鸦绘制(Sketch) 局部绘制(Inpaint) 涂鸦蒙版(Inpaint sketch) 上传蒙版(Inpaint upload) 图生图基本参数 ...

  7. Git多平台/多账号配置

    有时候需要在一台电脑使用多个git平台(Gitee.GitHub.Gitlab...)或者一个平台多个不同账号,比如想同时配置公司git和个人的git,提交代码时提交到对应的平台/账号的代码仓库且互不 ...

  8. Yii2批量插入数据

    方法一 yii2一次插入多行数据  /** * @inheritdoc 批量添加 * @params $add array 添加数据 */ public function add_all($add) ...

  9. php7的一些新特性

    php7的一些特性 打破一切 PHP7要打破一切. PHP开发人员应该接受打破版本之间向下兼容的定律.只要不允许大量的向后兼容,PHP7将是一个高度尊重的语言. 1.创建一个具体的核心语言 删除所有库 ...

  10. 如何确定 this 指向?改变 this 指向的方式有哪些?

    this 指向: 1. 全局上下文(函数外) 无论是否为严格模式,均指向全局对象.注意:严格模式下全局对象为undifined 2. 函数上下文(函数内) 默认的,指向函数的调用对象,且是最直接的调用 ...