主頁 > 企業開發 > JavaScript 格式化金額

JavaScript 格式化金額

2023-05-26 13:24:07 企業開發

JavaScript 格式化金額

一、使用 toLocaleString()

要格式化金額,可以使用 JavaScript 的 toLocaleString() 方法,該方法可以將數字轉換為本地化的字串表示形式,并可以指定貨幣符號、小數點和千位分隔符等格式,

代碼如下:

  1. 美元

    const amount = 1234567.89;
    const formattedAmount = amount.toLocaleString("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
    console.log(formattedAmount);
    
  2. 人民幣

    const amount = 1234567.89;
    const formattedAmount = amount.toLocaleString("zh-CN", {
      style: "currency",
      currency: "CNY",
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
    console.log(formattedAmount);
    

在這個示例中,將數字變數 amount 使用 toLocaleString() 方法轉換為本地化的字串表示形式,并指定了以下格式:

  • style: 'currency' 表示使用貨幣格式顯示金額,
  • currency: 'USD' 表示使用美元符號作為貨幣符號,
  • minimumFractionDigits: 2 表示最少保留兩位小數,
  • maximumFractionDigits: 2 表示最多保留兩位小數,

通過這種方式,可以使用 JavaScript 快速簡單地實作金額格式化效果,需要注意的是,toLocaleString() 方法在不同的瀏覽器和作業系統中可能存在差異,需要進行兼容性測驗和兼容性處理,

二、 使用模板字串 + toFixed + 正則替換

const amount = 1234567.89;
const formattedAmount = `¥${amount
  .toFixed(2)
  .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`;
console.log(formattedAmount);

在這個示例中,通過 toFixed 使金額保留兩位小數,使用正則替換的方式增加千位分隔符,再使用模板字串進行拼接,

作者:飛仔FeiZai

出處:https://www.cnblogs.com/yuzhihui/p/17433979.html

宣告:歡迎任何形式的轉載,但請務必注明出處!!!

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/553465.html

標籤:其他

上一篇:【一步步開發AI運動小程式】八、利用body-calc進行姿態識別

下一篇:返回列表

標籤雲
其他(159744) Python(38169) JavaScript(25456) Java(18129) C(15231) 區塊鏈(8268) C#(7972) AI(7469) 爪哇(7425) MySQL(7211) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5873) 数组(5741) R(5409) Linux(5341) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4576) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2434) ASP.NET(2403) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) .NET技术(1976) 功能(1967) Web開發(1951) HtmlCss(1948) C++(1922) python-3.x(1918) 弹簧靴(1913) xml(1889) PostgreSQL(1878) .NETCore(1861) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • JavaScript 格式化金額

    # JavaScript 格式化金額 ## 一、使用 `toLocaleString()` 要格式化金額,可以使用 JavaScript 的 `toLocaleString()` 方法。該方法可以將數字轉換為本地化的字串表示形式,并可以指定貨幣符號、小數點和千位分隔符等格式。 代碼如下: 1. 美 ......

    uj5u.com 2023-05-26 13:24:07 more
  • 【一步步開發AI運動小程式】八、利用body-calc進行姿態識別

    > 隨著人工智能技術的不斷發展,阿里體育等IT大廠,推出的“樂動力”、“天天跳繩”AI運動APP,讓**云上運動會、線上運動會、健身打卡、AI體育指導**等概念空前火熱。那么,能否將這些在APP成功應用的場景搬上小程式,分享這些概念的紅利呢?本系列文章就帶您一步一步從零開始開發一個AI運動小程式,本 ......

    uj5u.com 2023-05-26 13:10:31 more
  • Nodejs 應用編譯構建提速建議

    前端構建的提速是一項比較復雜且細節的工程, 目前產品上在持續跟蹤構建慢的應用, 努力優化編譯速度, 但前端本身擁有一個比較自由的技識訓境, 沒有統一的構建工具與流程, 另外語言本身的執行效率、單執行緒的構建也不好讓編譯機發揮其最大能力, 所以目前全域的通用優化手段還是會比較局限, 還是依賴專案自身的優... ......

    uj5u.com 2023-05-26 13:05:20 more
  • CSS中通配輸入文字的小技巧——如何在元素名中包含通配符

    CSS中,*的作用是通配表示“全部”。遺憾的是,并沒有一種通配元素名的方法。 例如,我有好幾個東西class都標記為了my-element-序號,就像這樣: ```html ... ``` 我現在希望讓所有這些class的東西都應用同一個css規則。可惜,css并不支持這么一種寫法: ```css ......

    uj5u.com 2023-05-26 13:05:15 more
  • uniapp 渲染Markdown

    近日在撰寫一個小程式,將日記功能移植到小程式中,雖然在手機端寫日記一般用不到Markdown,但是仍想在小程式中查看在電腦端寫的Markdown格式的內容,如代碼塊等。 經過查詢,找到一個被廣泛使用的解決方案是towxml 現記錄如下: > 首先將代碼克隆下來 ```js git clone htt ......

    uj5u.com 2023-05-26 13:05:11 more
  • React實作可頁面可調節

    > 效果預覽 ![調節頁面.gif](https://wansherry.com/api/fc01e2c58219126e20367e856ebad24c.gif) > 關鍵代碼 ```javascript //調節視窗大小 useEffect(() => { if (conref.current) ......

    uj5u.com 2023-05-26 13:05:04 more
  • 記錄--超長溢位頭部省略打點,坑這么大,技巧這么多?

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 在業務中,有這么一種場景,表格下的某一列 ID 值,文本超長了,正常而言會是這樣: 通常,這種情況都需要超長省略溢位打點,那么,就會變成這樣: 但是,這種展示有個缺點,3 個 ID 看上去就完全一致了,因此,PM 希望能夠實作頭部省略打點 ......

    uj5u.com 2023-05-26 12:51:08 more
  • 前端微服務無界實踐

    隨著專案的發展,前端SPA應用的規模不斷加大、業務代碼耦合、編譯慢,導致日常的維護難度日益增加。同時前端技術的發展迅猛,導致功能擴展吃力,重構成本高,穩定性低。因此前端微服務應運而生。 ......

    uj5u.com 2023-05-26 12:43:27 more
  • 影片

    1. 影片 影片(animation)是CSS3中具有顛覆性的特征之一,可以通過設定都各節點來精確控制一個或一組影片,常用來實作復雜的影片效果。 相比較過度,影片可以實作更多變化,更多控制,連續自動播放等效果。 1.1 影片的基本使用 制作影片分為兩步: (1)先定義影片。 (2)再使用(呼叫)影片 ......

    uj5u.com 2023-05-26 12:43:10 more
  • C#與Node JS互相實作DES加密解密

    具體的加密演算法可以可自行查詢其區別,這里只是拋磚引玉,大部分加密方法基本都能通過改變傳入引數來實作。 C#相關類檔案: System.Security.Cryptography 命名空間 | Microsoft Learn Node JS相關檔案:Crypto | Node.js v16.20.0 ......

    uj5u.com 2023-05-26 12:42:30 more