大幅提升前端工作效率!Numeral.js數值格式化庫來了!

来源:https://www.cnblogs.com/tanggoahead/archive/2023/05/10/17387875.html
-Advertisement-
Play Games

我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神,探索前端道路,為社區積累並傳播經驗價值。。 本文作者:奇銘(掘金) 需求背景 前段時間,離線計算產品接到改造數據同步表單的需求。 一方面,數據同步模塊的代碼可讀性和可維護性比較差,相對應的,在數據同步模塊開發新 ...


我們日常開發中,時常會碰到數值格式化操作的場景,今天了不起就為大家分享一款相對比較全面的數值格式化的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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 摘要:在技術領域中,沒有銀彈。我們需要不斷探索和研究新的技術,結合具體問題和需求,選擇最適合的解決方案。 本文分享自華為雲社區《知乎問題:如何說服技術老大用 Redis ?》,作者:勇哥java實戰分享。 最近在某問答平臺看到一個技術討論:如何說服技術老大用Redis? “他總覺得用Redis每次都 ...
  • 摘要:本文以華為雲圖引擎 GES 為例,來介紹如何使用圖查詢語言 Cypher 表達一些需要做數據局部遍歷的場景。 本文分享自華為雲社區《使用 Cypher 子查詢進行圖探索 -- 以華為雲圖引擎 GES 為例》,作者:蜉蝣與海。 在圖資料庫 / 圖計算領域,很多查詢可以使用圖查詢語言 Cypher ...
  • (如何從800萬數據中快速撈出自己想要的數據) 一、需求調研 正如題目所說,我們使用的是Oracle資料庫,數據量在800萬左右。我們要完成的事情就是在著800萬數據中,通過某些欄位進行模糊查詢,得到我們所需要的結果集。 這是表裡的數據,一共7328976 條數據,接近800萬 select cou ...
  • 摘要:本文分析了分散式資料庫發展情況、分散式資料庫應用的主要問題,從行業應用的角度給出了分散式資料庫發展的建議。 本文分享自華為雲社區《數字化轉型下我國分散式資料庫應用挑戰及發展建議》,作者:資料庫領域科學家、華為雲資料庫GaussDB首席專家 馮柯。 當前,金融等重點行業都在進行數字化轉型,而分佈 ...
  • 1 麻煩的地方 在SQL Server的官方文檔裡面可以看到備份和還原的表,但是這些表裡面只能找到備份成功的相關信息,無法找到備份失敗的記錄,比如msdb.dbo.backupset。對於一些監控系統未監控作業的情況下,想要監控資料庫備份任務執行失敗而觸發告警規則,有些麻煩。 但是SQL serve ...
  • 源碼地址:https://ext.dcloud.net.cn/plugin?id=12272 ...
  • 😊在Nuxt3.0項目中用到了可視化圖表📊,於是我用了EChart可視化圖表庫。但是在官網我沒有找到針對在Nuxt3.0中使用EChart的方法,於是在這裡記錄我的引入EChart並簡單使用的步驟。需要聲明的是,本文只針對在Nuxt3.0項目中使用EChart.js庫的可視化圖表進行講解,不針對 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 先上效果 前言 最近在學Three.js.,對著文檔看了一周多,正好趕上碼上掘金的活動,就順便寫了一個小demo,手搓一個羅盤特效。 太極 先來看一下太極的實現方式,這裡我們使用CircleGeometry,將其分解開來可以看出是由圓形和 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...