還在為了處理數值格式而苦惱嗎?介紹一個好用的工具 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
卡比的工程師之旅的沙龍
8會員
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
此章節旨在介紹TypeScript中的運算符,包括算數運算子、比較運算子、賦值運算子、位元運算子,以及他們的優先等級。每種運算子都以清晰的解釋和代碼範例進行詳細說明,幫助讀者理解並有效地在自己的程式碼中使用。
Thumbnail
此章節旨在介紹TypeScript中的運算符,包括算數運算子、比較運算子、賦值運算子、位元運算子,以及他們的優先等級。每種運算子都以清晰的解釋和代碼範例進行詳細說明,幫助讀者理解並有效地在自己的程式碼中使用。
Thumbnail
在EXCEL中如果要進行四則運算,必須先輸入一個等於『=』,之後再輸入想要運算的算式。 但如果EXCEL的資料中,有一堆算式,但是前面沒有等於該怎麼快速計算呢😣 【📁檔案下載】 看教學之前可以先下載練習檔,學中做、做中學效果更好哦。 檔案下載 【▶️影音教學】
Thumbnail
在EXCEL中如果要進行四則運算,必須先輸入一個等於『=』,之後再輸入想要運算的算式。 但如果EXCEL的資料中,有一堆算式,但是前面沒有等於該怎麼快速計算呢😣 【📁檔案下載】 看教學之前可以先下載練習檔,學中做、做中學效果更好哦。 檔案下載 【▶️影音教學】
Thumbnail
  在計算數字時我們要先搞懂運算符號代表的涵義,Python裡面的符號跟我們認知的不會有太大的差別,但是有一些代表不一樣的意思,就必須搞懂才不會在寫程式時,程式碼的重複性太高,會導致日後的維修性降低。
Thumbnail
  在計算數字時我們要先搞懂運算符號代表的涵義,Python裡面的符號跟我們認知的不會有太大的差別,但是有一些代表不一樣的意思,就必須搞懂才不會在寫程式時,程式碼的重複性太高,會導致日後的維修性降低。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
此文件的目的是教授 Kotlin 程式語言的運算符,包括算數運算子、比較運算子、賦值運算子、位元運算子以及運算子的優先等級。這將有助於讀者更好地理解和撰寫 Kotlin 程式碼。
Thumbnail
此文件的目的是教授 Kotlin 程式語言的運算符,包括算數運算子、比較運算子、賦值運算子、位元運算子以及運算子的優先等級。這將有助於讀者更好地理解和撰寫 Kotlin 程式碼。
Thumbnail
長期以來,西方美學以《維特魯威人》式的幾何比例定義「完美身體」,這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯.奧尼奎庫的舞作《轉轉生》,探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。
Thumbnail
長期以來,西方美學以《維特魯威人》式的幾何比例定義「完美身體」,這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯.奧尼奎庫的舞作《轉轉生》,探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。
Thumbnail
全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼,反而利用華麗的秀場視覺,引導觀眾在晚期資本主義的消費愉悅之中,而能驚覺「批判」本身亦可能被收編——而當絞繩升起,這場關於如何生存的黑色遊戲,又將帶領新時代的我們走向何種後現代的自我解構?
Thumbnail
全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼,反而利用華麗的秀場視覺,引導觀眾在晚期資本主義的消費愉悅之中,而能驚覺「批判」本身亦可能被收編——而當絞繩升起,這場關於如何生存的黑色遊戲,又將帶領新時代的我們走向何種後現代的自我解構?
Thumbnail
在Python中,數值運算非常直觀,你可以使用標準的數學運算符號進行基本的數值運算。以下是一些基本的數值運算: 進行計算時,按照「先乘除後加減」的規則,並優先計算小括號刮起來的運算式。 print('答案:' ,(1+1)*2) #​答案: 4 復合型態的運算子 指定運算子 = 若是結合算術
Thumbnail
在Python中,數值運算非常直觀,你可以使用標準的數學運算符號進行基本的數值運算。以下是一些基本的數值運算: 進行計算時,按照「先乘除後加減」的規則,並優先計算小括號刮起來的運算式。 print('答案:' ,(1+1)*2) #​答案: 4 復合型態的運算子 指定運算子 = 若是結合算術
Thumbnail
若說易卜生的《玩偶之家》為 19 世紀的女性,開啟了一扇離家的窄門,那麼《海妲.蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆,同為熟稔文本的演員,亦是深刻體察制度縫隙的當代女性,此文所看見的不僅僅是崩壞前夕的最後發聲,更是女人被迫置於冷酷的制度之下,步步陷入無以言說的困境。
Thumbnail
若說易卜生的《玩偶之家》為 19 世紀的女性,開啟了一扇離家的窄門,那麼《海妲.蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆,同為熟稔文本的演員,亦是深刻體察制度縫隙的當代女性,此文所看見的不僅僅是崩壞前夕的最後發聲,更是女人被迫置於冷酷的制度之下,步步陷入無以言說的困境。
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
本章節介紹了PHP中的各種運算符,包括算數運算子、比較運算子、賦值運算子和位元運算子。還討論了運算子的優先等級及其在表達式中的應用。了解這些運算符及其優先等級可以幫助編寫更高效和準確的PHP代碼。
Thumbnail
本章節介紹了PHP中的各種運算符,包括算數運算子、比較運算子、賦值運算子和位元運算子。還討論了運算子的優先等級及其在表達式中的應用。了解這些運算符及其優先等級可以幫助編寫更高效和準確的PHP代碼。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News