還在為了處理數值格式而苦惱嗎?介紹一個好用的工具 Numeral.js

更新於 發佈於 閱讀時間約 1 分鐘

前言

網站只要有處理到錢和點數等,一定都會有數值顯示的問題想要統一,特別是後台數據呈現的時候,這時候選擇一個方便的工具統整顯示格式就非常重要了。

使用方式

Numeral.js安裝

npm install numeral

或者Script引入資源也可以

<script src="numeral.min.js"></script>

➋ 方法

針對數值最常見應該是千分位和小數點後兩位,直接使用這個套件,將你要的格式填上去就可以轉換成所需的樣子。

可以注意的小地方是,當格式轉換後回傳的型態是string

const number = numeral(1234)

number.format('0,0');
// 千分位:1,234

number.format('$0,0');
// 千分位+錢字符號:$1,234

number.format('0,0.00');
// 千分位+固定小數點後兩位:1,234.00

number.format('0,0.[00]');
// 千分位+小數點後兩位:1,234
// 注意:當是小數是0時不會顯示

➌ 其他

Numeral.js 有提供其他格式化得選擇,像是百分比等等的,依照網站需求去配置即可。

(這邊不貼套件有提供的格式有哪些,可以直接點進去網站看!)

結語

這邊推薦處理數值的格式方式,其實有很多種的處理方式,但都會建議把方法包裝起來,讓每個地方都統一使用,未來若需要異動格式時直接由包裝好的方法去異動就可以了!

留言
avatar-img
留言分享你的想法!
avatar-img
卡比的工程師之旅的沙龍
7會員
15內容數
開發之路有你有我有卡比,收錄各種開發的技術分享與疑難雜症解★☆
2024/08/07
首先確定VS Code的版本,如果你的版本跟我一樣是1.92.0那麼你可以參考我的作法...
Thumbnail
2024/08/07
首先確定VS Code的版本,如果你的版本跟我一樣是1.92.0那麼你可以參考我的作法...
Thumbnail
2024/01/04
問ChatGPT前端專案架構建議
Thumbnail
2024/01/04
問ChatGPT前端專案架構建議
Thumbnail
2024/01/03
JavaScript重組資料:flatMap與map的差異
Thumbnail
2024/01/03
JavaScript重組資料:flatMap與map的差異
Thumbnail
看更多
你可能也想看
Thumbnail
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
家中修繕或裝潢想要找各種小零件時,直接上網採買可以省去不少煩惱~看看Sylvia這回為了工地買了些什麼吧~
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
👜簡單生活,從整理包包開始!我的三款愛用包+隨身小物清單開箱,一起來看看我每天都帶些什麼吧🌿✨
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
本章節介紹了PHP中的各種運算符,包括算數運算子、比較運算子、賦值運算子和位元運算子。還討論了運算子的優先等級及其在表達式中的應用。了解這些運算符及其優先等級可以幫助編寫更高效和準確的PHP代碼。
Thumbnail
本章節介紹了PHP中的各種運算符,包括算數運算子、比較運算子、賦值運算子和位元運算子。還討論了運算子的優先等級及其在表達式中的應用。了解這些運算符及其優先等級可以幫助編寫更高效和準確的PHP代碼。
Thumbnail
此文件的目的是教授 Kotlin 程式語言的運算符,包括算數運算子、比較運算子、賦值運算子、位元運算子以及運算子的優先等級。這將有助於讀者更好地理解和撰寫 Kotlin 程式碼。
Thumbnail
此文件的目的是教授 Kotlin 程式語言的運算符,包括算數運算子、比較運算子、賦值運算子、位元運算子以及運算子的優先等級。這將有助於讀者更好地理解和撰寫 Kotlin 程式碼。
Thumbnail
此章節旨在介紹TypeScript中的運算符,包括算數運算子、比較運算子、賦值運算子、位元運算子,以及他們的優先等級。每種運算子都以清晰的解釋和代碼範例進行詳細說明,幫助讀者理解並有效地在自己的程式碼中使用。
Thumbnail
此章節旨在介紹TypeScript中的運算符,包括算數運算子、比較運算子、賦值運算子、位元運算子,以及他們的優先等級。每種運算子都以清晰的解釋和代碼範例進行詳細說明,幫助讀者理解並有效地在自己的程式碼中使用。
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
在EXCEL中如果要進行四則運算,必須先輸入一個等於『=』,之後再輸入想要運算的算式。 但如果EXCEL的資料中,有一堆算式,但是前面沒有等於該怎麼快速計算呢😣 【📁檔案下載】 看教學之前可以先下載練習檔,學中做、做中學效果更好哦。 檔案下載 【▶️影音教學】
Thumbnail
在EXCEL中如果要進行四則運算,必須先輸入一個等於『=』,之後再輸入想要運算的算式。 但如果EXCEL的資料中,有一堆算式,但是前面沒有等於該怎麼快速計算呢😣 【📁檔案下載】 看教學之前可以先下載練習檔,學中做、做中學效果更好哦。 檔案下載 【▶️影音教學】
Thumbnail
在Python中,數值運算非常直觀,你可以使用標準的數學運算符號進行基本的數值運算。以下是一些基本的數值運算: 進行計算時,按照「先乘除後加減」的規則,並優先計算小括號刮起來的運算式。 print('答案:' ,(1+1)*2) #​答案: 4 復合型態的運算子 指定運算子 = 若是結合算術
Thumbnail
在Python中,數值運算非常直觀,你可以使用標準的數學運算符號進行基本的數值運算。以下是一些基本的數值運算: 進行計算時,按照「先乘除後加減」的規則,並優先計算小括號刮起來的運算式。 print('答案:' ,(1+1)*2) #​答案: 4 復合型態的運算子 指定運算子 = 若是結合算術
Thumbnail
  在計算數字時我們要先搞懂運算符號代表的涵義,Python裡面的符號跟我們認知的不會有太大的差別,但是有一些代表不一樣的意思,就必須搞懂才不會在寫程式時,程式碼的重複性太高,會導致日後的維修性降低。
Thumbnail
  在計算數字時我們要先搞懂運算符號代表的涵義,Python裡面的符號跟我們認知的不會有太大的差別,但是有一些代表不一樣的意思,就必須搞懂才不會在寫程式時,程式碼的重複性太高,會導致日後的維修性降低。
Thumbnail
開始更新「給文組人的 Formula 用法」系列。 本篇方格子的重點是 ❶如何將「輸入的數字」顯示成百分比? ❷數字與數值的差別? ❸如何使用 format ?
Thumbnail
開始更新「給文組人的 Formula 用法」系列。 本篇方格子的重點是 ❶如何將「輸入的數字」顯示成百分比? ❷數字與數值的差別? ❸如何使用 format ?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News