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

这篇具有很好参考价值的文章主要介绍了大幅提升前端工作效率!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文章来源地址https://www.toymoban.com/news/detail-437973.html

到了这里,关于大幅提升前端工作效率!Numeral.js数值格式化库来了!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 工作效率提升工具分享

    分类 技术框架   常用工具   解决方案   原型设计   摄影网站   常用网站   视频点播   区块链技术   在线学习   站长工具   元宇宙   CHATGPT AI工具集   技术框架 对于软件研发人员来说,选择合适的技术框架可以提高开发效率和代码质量。以下是一些常用的技术框架:

    2024年02月16日
    浏览(50)
  • 利用ChatGPT提升工作效率

    随着科技的飞速发展,人工智能逐渐成为我们生活的一部分。ChatGPT作为一种先进的自然语言处理技术,已经在各个领域取得了显著的成果。本文将探讨如何利用ChatGPT提升工作效率,让我们的生活变得更加便捷。 一、什么是ChatGPT? ChatGPT,全称Generative Pre-trained Transformer,是一

    2024年02月20日
    浏览(55)
  • 如何用chatgpt提升工作效率

    使用ChatGPT可以提升工作效率的几种方式: 快速撰写文档 :ChatGPT可以根据提供的关键信息,快速生成整篇文章。这样能够节省大量时间和精力。 自动生成报告 :无论是市场分析报告还是销售数据报告,只需提供关键数据和信息,ChatGPT就可以为您生成详实的报告。 创建会议

    2024年01月24日
    浏览(60)
  • 如何利用chatgpt提升工作效率

    项目管理: 制定项目计划、跟踪进度、分配任务和记录里程碑。 客户服务: 回答常见问题、提供产品支持和处理客户投诉,提升客户满意度。 销售支持: 提供销售培训、销售脚本和客户资料,辅助销售团队进行销售活动。 财务管理: 制定预算、进行财务分析、管理账目和

    2024年01月23日
    浏览(58)
  • 使用AIGC工具提升安全工作效率

    新钛云服已累计为您分享 760 篇技术干货 在日常工作中,安全人员可能会涉及各种各样的安全任务,包括但不限于: 开发某些安全工具的插件,满足自己特定的安全需求; 自定义github搜索工具,快速查找所需的安全资料、漏洞poc、exp等; 检索特定应用程序的最新安全漏洞信

    2024年02月13日
    浏览(49)
  • GitHub Copilot 全新升级,工作效率提升 55%

    2021年 6 月,GitHub 和 OpenAI 推出了 GitHub Copilot 预览版,可根据命名或者正在编辑的代码上下文为开发者提供代码建议,被称为“你的 AI 结对程序员”。 近日,GitHub 宣布,经过去年 12 月以来的短暂测试后,发布了个人版和企业版 Copilot 的全新升级。升级后的 GitHub Copilot 将会具

    2024年02月09日
    浏览(63)
  • “一键批量处理:轻松缩小图片像素,提升工作效率“

    \\\"在忙碌的工作中,时间就是金钱。使用我们的图片批量处理工具,轻松缩小图片像素,让您的工作更加高效。一键操作,告别繁琐,让您有更多时间享受生活。高效工作,从这里开始!\\\" 第一步,首先我们要进入首助剪辑高手主页面,并在板块栏里选择图片批量处理板块。

    2024年01月16日
    浏览(47)
  • 提升工作效率与质量——马斯克的五步工作法

    图片来源网络 埃隆·马斯克(Elon Musk)是一位备受赞誉的 创业家和工程师 ,他的成功并非偶然, 而是源于他对问题的深刻理解以及不断追求最佳解决方案的决心。 为了实现这一目标,他制定了一套包含五个步骤的工作方法, 这套方法不仅指引他和他的团队在众多项目中开

    2024年02月06日
    浏览(54)
  • 10个免费的 AI 工具,提升工作效率(附网址)

    人工智能已经渗透到我们的日常生活中,但是,五花八门的AI工具可能会让人感到不知所措。所以我们精选了10个免费、用户友好的AI工具,它们既有效又实用,适合日常使用。 1.深度变换工具:DeepSwap的进化 DeepSwap,一款先进的AI工具,正迎来制作深度伪造视频和图像的新时代

    2024年01月21日
    浏览(48)
  • 从0到1:如何使用AI工具提升工作效率?

    目录 1.chatPPT 2.GitHub Copilot  3.AUto.GPT 4.newBing 5.Microsoft  Designer 6.ChatDOC 7.Excel Formularizer 8.ChatMind. chatGPT国内镜像网站  链接地址 : ChatPPT_AI一键对话生成PPT_智能排版美化 (chat-ppt.com)  ChatPT是必优科技旗下面向PPT使用者提供的A生成PPT产品,产品基于ChatGPT与韦尼克模型,面向PPT用

    2024年02月05日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包