js 格式化數字(每三位加逗號)

来源:https://www.cnblogs.com/Byme/archive/2018/03/22/8623754.html
-Advertisement-
Play Games

轉載:http://blog.csdn.net/sushauai/article/details/52958162 侵刪 轉載:http://blog.csdn.net/sushauai/article/details/52958162 侵刪 轉載:http://blog.csdn.net/sush ...



 轉載:http://blog.csdn.net/sushauai/article/details/52958162 侵刪
  1. // 方法一  
  2. unction toThousands(num) {  
  3.     var result = [ ], counter = 0;  
  4.     num = (num || 0).toString().split('');  
  5.     for (var i = num.length - 1; i >= 0; i--) {  
  6.         counter++;  
  7.         result.unshift(num[i]);  
  8.         if (!(counter % 3) && i != 0) { result.unshift(','); }  
  9.     }  
  10.     return result.join('');  
  11. }  


方法一的執行過程就是把數字轉換成字元串後,打散為數組,再從末尾開始,逐個把數組中的元素插入到新數組(result)的開頭。每插入一個元素,counter就計一次數(加1),當counter為3的倍數時,就插入一個逗號,但是要註意開頭(i為0時)不需要逗號。最後通過調用新數組的join方法得出結果。

 

方法一比較清晰易懂,也在項目中用了一段時間。但是直覺告訴我,它的性能並不好。

方法二——方法一的字元串版

[javascript] view plain copy  
  1. // 方法二  
  2. unction toThousands(num) {  
  3.     var result = '', counter = 0;  
  4.     num = (num || 0).toString();  
  5.     for (var i = num.length - 1; i >= 0; i--) {  
  6.         counter++;  
  7.         result = num.charAt(i) + result;  
  8.         if (!(counter % 3) && i != 0) { result = ',' + result; }  
  9.     }  
  10.     return result;  
  11. }  


方法二是方法一的改良版,不把字元串打散為數組,始終對字元串操作。

 

方法三——迴圈匹配末尾的三個數字

 

[javascript] view plain copy  
  1. // 方法三  
  2. unction toThousands(num) {  
  3.     var num = (num || 0).toString(), re = /\d{3}$/, result = '';  
  4.     while ( re.test(num) ) {  
  5.         result = RegExp.lastMatch + result;  
  6.         if (num !== RegExp.lastMatch) {  
  7.             result = ',' + result;  
  8.             num = RegExp.leftContext;  
  9.         } else {  
  10.             num = '';  
  11.             break;  
  12.         }  
  13.     }  
  14.     if (num) { result = num + result; }  
  15.     return result;  
  16. }  

方法三是完全不同的演算法,通過正則表達式迴圈匹配末尾的三個數字,每匹配一次,就把逗號和匹配到的內容插入到結果字元串的開頭,然後把匹配目標(num)賦值為還沒匹配的內容(RegExp.leftContext)。此外,還要註意:

1.如果數字的位數是3的倍數時,最後一次匹配到的內容肯定是三個數字,但是最前面的三個數字前不需要加逗號;
2.如果數字的位數不是3的倍數,那num變數最後肯定會剩下1到2個數字,迴圈過後,要把剩餘的數字插入到結果字元串的開頭。

雖然方法三減少了迴圈次數(一次迴圈處理三個字元),但由於用到了正則表達式,一定程度上增加了消耗。

方法四——方法三的字元串版

[javascript] view plain copy  
  1. // 方法四  
  2. unction toThousands(num) {  
  3.     var num = (num || 0).toString(), result = '';  
  4.     while (num.length > 3) {  
  5.         result = ',' + num.slice(-3) + result;  
  6.         num = num.slice(0, num.length - 3);  
  7.     }  
  8.     if (num) { result = num + result; }  
  9.     return result;  
  10. }  

 

事實上,截取末尾三個字元的功能可以通過字元串類型的slice、substr或substring方法做到。這樣就可以避免使用正則表達式。

方法五——分組合併法

[javascript] view plain copy  
  1. // 方法五  
  2. unction toThousands(num) {  
  3.     var num = (num || 0).toString(), temp = num.length % 3;  
  4.     switch (temp) {  
  5.         case 1:  
  6.             num = '00' + num;  
  7.             break;  
  8.         case 2:  
  9.             num = '0' + num;  
  10.             break;  
  11.     }  
  12.     return num.match(/\d{3}/g).join(',').replace(/^0+/, '');  
  13. }  

先把數字的位數補足為3的倍數,通過正則表達式,將其切割成每三個數字一個分組,再通過join方法添加逗號,最後還要把補的0移除。

方法六——懶人法

[javascript] view plain copy  
  1. // 方法六  
  2. unction toThousands(num) {  
  3.     return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');  
  4. }  


一直覺得這個格式化是可以通過一條正則表達式替換做出來的,但是需要用到斷言等寫法,無奈自己對這部分不太熟。Google了一下,還真找到了這麼一條正則表達式,這估計是代碼最短的實現。

 

測試結果

數字執行5000次消耗的時間(ms)
方法一方法二方法三方法四方法五方法六
1 4 1 3 1 14 2
10 14 1 3 0 7 2
100 12 1 2 4 5 3
1000 13 2 3 2 9 5
10000 21 4 3 1 6 3
100000 21 3 2 1 5 6

 

方法一和方法二的強烈對比表明,字元串操作的效率比數組操作的效率要高得多;方法六的測試結果告訴我們,代碼長短跟性能高低沒有關係。方法四的綜合性能是最好的(但為何num為100的時候,性能有所降低呢,這個實在不解),主要原因是:

1.對比方法一、二,每次操作3個字元而不是1個字元,減少迴圈次數;
2.對比方法三、五、六,沒有使用正則表達式,減少了消耗。

最後,我選擇了方法四作為最終的優化方案。各位讀者如有更好的實現方法或改良意見,可以發表評論。


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

-Advertisement-
Play Games
更多相關文章
  • 一、兩者的區別 相等:先強制轉換變數類型,再比較 全等:不轉換類型,一旦類型不同,就是不全等。 二、相等和不相等的比較規則 1.操作符中有布爾值時: 比較前先將之轉換為數值 false = 0 , true = 1 2.字元串,另一個是數值: 字元串去將就數值 3.對象: object.valueO ...
  • 賬單列印 Ι 收據列印 返回賬單列表 列印 ... ...
  • 我上一篇關於vue的文章和這一篇時間隔了有點久了。最近終於寫完了。 因為我一直想寫個有點實績的東西,而不是隨便寫一個教程一樣東西。結合最近在項目中學到的經驗和我的一點創意。 首先介紹下這是個什麼! H5直播平臺! 不是一個標題,我已經開發完了。 接著這裡是登錄註冊的流程圖 這邊微信登錄,因為沒有我個 ...
  • function smalltoBIG(n) { var fraction = ['角', '分']; var digit = ['零', '壹', '貳', '叄', '肆', '伍', '陸', '柒', '捌', '玖']; var unit = [ ['元', '萬', '億'... ...
  • function getYourString(s) { var res = ''; var length = s.length; for (var i = 0, j = 1; i '; } else { res += s[i]; } } ... ...
  • module.exports返回的是一個{}, expoerts是對module.exports的一個引用; 即: module.exports = { abc: ‘abc’ }; exports.hehe = ‘hehe’; 等價於: module.exports = { abc: ‘abc’, ...
  • Web Component 在介紹Angular Component之前,我們先簡單瞭解下 "W3C Web Components" 定義 W3C為統一組件化標準方式,提出Web Component的標準。 每個組件包含自己的html、css、js代碼。 Web Component標準包括以下四個重 ...
  • 模仿對象 此前在嘗試製作時,我採用 Nike+ 官網效果為模板仿製。目前 Nike+ 已經升級,看不了之前版本的樣式及動態效果,暫且看看樣式區別不大的 Nike+ Run Club App 地圖,動畫部分依然以此前 Nike+ 官網效果為準。 分析一下,想要仿製跑步路線圖,其中有兩個難點,第一個是畫 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...