大幅提升前端工作效率!Numeral.js数值格式化库来了!

我们日常开发中,时常会碰到数值格式化操作的场景,今天了不起就为大家分享一款相对比较全面的数值格式化的JS库:Numeral.js

Numeral.js

Numeral.js 是一个用来对数值进行操作和格式化的 JS 库。可将数字格式化为货币、百分比、时间,甚至是序数词的缩写(比如1st,100th)。

大幅提升前端工作效率!Numeral.js数值格式化库来了!

安装

下载到本地引入

<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.js数值格式化库来了!

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.js数值格式化库来了!

numeral(1000.234).format('$0,0.00');
// $1,000.23

ps:自动千分位分隔,四舍五入取值。

  • 字节格式化

大幅提升前端工作效率!Numeral.js数值格式化库来了!
ps:字节格式化主要用在存储统计上。

  • 百分比格式化

大幅提升前端工作效率!Numeral.js数值格式化库来了!
遵循四舍五入规则,小数转换为百分比,同时避免了浮点运算精度的问题。

numeral(0.144252).format('0.00%');
// 14.43% 小数点四舍五入

ps:如果直接将0.144252乘以100,会得到什么结果呢?大家不妨试试!

  • 时间格式化

大幅提升前端工作效率!Numeral.js数值格式化库来了!

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

大幅提升前端工作效率!Numeral.js数值格式化库来了!

numeral(1123456789).format('0.0e+0');// 1.1e+9
numeral(0.000134255).format('0.0e+0');// 1.3e-4

这也就是我们的科学计数法表示方式。

  • 计算相关

大幅提升前端工作效率!Numeral.js数值格式化库来了!
哈哈,加、减、乘、除来一套!

var number = numeral(1000);
var result = number.add(100);
// 1100

其他

除了上面的方法之外,numeral.js 中还包括设值、差异求值、复制克隆、本地化、自定义格式等方法和功能。欢迎大家查阅下发地址进一步了解。

Github地址:https://github.com/adamwdraper/Numeral-js
官方网站:
http://numeraljs.com

原文链接:https://www.cnblogs.com/tanggoahead/p/17387875.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:大幅提升前端工作效率!Numeral.js数值格式化库来了! - Python技术站

(0)
上一篇 2023年5月10日
下一篇 2023年5月11日

相关文章

  • ElementUI在实际项目使用步骤详解

    下面我将为你详细讲解“ElementUI在实际项目使用步骤详解”的完整攻略。 入门准备 在使用ElementUI之前,需要在项目中安装ElementUI库,可以使用npm进行安装,具体步骤如下: 第一步:在终端中打开项目目录,并执行以下命令: npm install element-ui -S 第二步:在main.js文件中引入ElementUI库,并注册组…

    JavaScript 2023年6月10日
    00
  • 详解JavaScript 中 if / if…else…替换方式

    下面我将详细讲解“详解JavaScript中if/if…else…替换方式”的完整攻略。 一、背景介绍 在JavaScript编程中,常用的逻辑判断方式是if语句和if…else语句。然而,当判断条件多且复杂时,使用if语句或if…else语句显得比较繁琐。为了解决这个问题,我们可以采用一些替换方式来简化代码的书写,并且使其更易懂。 二、替换…

    JavaScript 2023年6月10日
    00
  • js canvas实现圆形流水动画

    下面是详细的js canvas实现圆形流水动画的攻略: 1. 准备工作 在HTML中,我们需要创建一个canvas元素,用于显示流水效果。 <canvas id="myCanvas"></canvas> 在JavaScript中,我们需要获取该canvas元素,并在其中绘制圆形流水。需要注意:canvas绘图需要在…

    JavaScript 2023年6月10日
    00
  • JavaScript 数组详解

    JavaScript 数组详解 简介 JavaScript 中的数组是一种用于存储和操作一组或多组数据的有序集合。数组可以存储任何类型的数据、可以根据需要进行扩展或缩小。JavaScript 数组有许多强大的方法和属性,可以对数组进行各种处理,例如查找、添加、删除和排序等操作。 数组的基本操作 声明数组 在 JavaScript 中,可以使用以下方式声明一个…

    JavaScript 2023年5月17日
    00
  • 如何在VSCode Webview中打开一个新的页面

      上一篇我介绍了如何在VSCode Webview中实现点击链接下载图片或文件,本文介绍如何在默认浏览器中打开一个新的页面。   在浏览器中,如果要实现打开一个新的页面有许多种不同的方法,例如: window.open(“https://www.cnblogs.com/jaxu”, “_blank”);   或者直接在页面上放一个<a>标签:&…

    JavaScript 2023年5月9日
    00
  • jQuery表单验证插件formValidator(改进版)

    jQuery表单验证插件formValidator(改进版)攻略 一、简介 jQuery表单验证插件formValidator是一款实用的前端验证插件,可以方便地验证表单输入是否符合指定的规则,从而提高用户输入数据的准确度,避免非法数据被提交。经过改进的formValidator拓展了原版的功能,增加了新的验证规则,如密码强度验证、手机号码验证等,同时去除了…

    JavaScript 2023年6月10日
    00
  • javascript中函数作为参数调用的方法

    作为网站作者,我们需要详细讲解“JavaScript中函数作为参数调用的方法”的完整攻略。 什么是函数作为参数调用的方法? 在JavaScript中,函数可以作为参数传递给其他函数,在后者中被调用。这种函数作为参数调用的方法称为“函数回调”或“高阶函数”。 像其他数据类型一样,函数可以存储在变量中,并且可以作为参数传递给函数或从函数返回。通过这种方式,我们可…

    JavaScript 2023年5月28日
    00
  • javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

    下面是 “javascript运动效果实例总结(放大缩小、滑动淡入、滚动)” 的详细攻略: 1. 放大缩小实例 该实例可以通过javascript实现图片的放大和缩小,具体思路如下: 1.1 给图片添加鼠标事件 在html中给需要放大缩小的图片添加mouseenter事件: <img src="picture.jpg" id=&qu…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部