還在為了處理數值格式而苦惱嗎?介紹一個好用的工具 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
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 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 ?
Thumbnail
數字快打提供四種數字轉換,原先是為行政、會計等人員設計,實際開發後發現這個功能大家都用的到!而且評價也非常高,用過的朋友都表示數字快打真的能提昇工作效率(灑花)不用離開本來的打字畫面,就可以計算數字!
Thumbnail
數字快打提供四種數字轉換,原先是為行政、會計等人員設計,實際開發後發現這個功能大家都用的到!而且評價也非常高,用過的朋友都表示數字快打真的能提昇工作效率(灑花)不用離開本來的打字畫面,就可以計算數字!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News