千分位分隔數字并自定義保留小數位數

caoym 發布于2019-08-26 11:37 / 2789人閱讀

摘要：實現思路使用正則，用數字中的小數點做匹配尾部參考，來匹配某個數字后面的一個或多個連續位數字，如果匹配到把該數字替換成自身加分隔符，如下示例分隔數字解釋和之間有一個連續位數字，那么給后面添加一個分隔符得到結果。

功能：可實現不同符號分隔數字，可自定義分隔后數字保留的小數位數。

實現思路

????使用正則，用數字中的小數點做匹配尾部參考，來匹配某個數字后面的一個或多個連續3位數字，如果匹配到把該數字替換成自身加分隔符，如下：

示例

1、分隔數字：123456.1

解釋：3和.之間有一個連續3位數字（456），那么給3后面添加一個分隔符得到結果：123,456.1。

2、分隔數字：1234567.1

解釋：1和.之間有兩個連續3位數字（234和567），那么給1后面添加一個分隔符，然后數字4后面也存在一個連續三位數字（567），那么也給4后面添加一個分隔符，最終得到結果1,234,567.1

匹配的正則表達式

/(d)(?=(d{3})+.)/g;

這里最難理解的就是(?=(d{3})+.)，且看語法：
x(?=y)：正向肯定查找，匹配后面帶有y的x項目

那么在這里意思是：查找一個和“.”之間帶有一個或多個連續3位數字的數字（x）

最終實現

/**
 *num 要分隔的數字（必填）
 *n 保留的小數位數（可選）
 *symbol 分隔數字使用的符號（可選，默認為","）
 */ 
function splitNum(num,n,symbol) {
    if(!num)throw new Error("splitNum需要傳入一個待轉換的數據");
    if(typeof num!=="number")throw new TypeError("num參數應該是一個number類型");
    if(n<0)throw new Error("參數n不應該小于0");
    var hasDot=parseInt(num)!=num;//這里檢測num是否為小數，true表示小數
    var m=(n!=undefined&&n!=null)?n:1;
    num=m==0?num.toFixed(m)+".":hasDot?(n?num.toFixed(n):num):num.toFixed(m);
    symbol=symbol||",";
    num=num.toString().replace(/(d)(?=(d{3})+.)/g,function(match, p1,p2) {
        return p1 + symbol;
    });
    if(n==0||(!hasDot&&!n)){//如果n為0或者傳入的num是整數并且沒有指定整數的保留位數，則去掉前面操作中的小數位
        num=num.substring(0,num.indexOf("."));
    }
    return num;
}

難點解惑

1、也許有人會問，這里是用“.”號做參考進行匹配的，如果傳進來的數字是一個整數呢，不就沒“.”號了嗎，所以在方法內部定義了m變量使其在操作過程中總能有個“.”號。

2、num=m==0?num.toFixed(m)+".":hasDot?(n?num.toFixed(n):num):num.toFixed(m);

num=m==0?num.toFixed(m)+".":hasDot?(n?num.toFixed(n):num):num.toFixed(m);

作用：這里的操作保證的是小數傳n、小數不傳n、整數傳n、整數不傳n四種情況都能正確返回小數位數
詳解：
1、如果m為零（傳入n=0）則直接經toFixed操作后再后面補“.”
2、如果m不為0，
    a、如果傳入數為小數
        a"、如果傳了n表示要保留小數，那么需要num.toFixed(n)
        b"、如果沒傳n表示不需要對小數進行操作，直接返回原num
    b、如果傳入數為整數
        a"、直接對num進行toFixed(m)操作

說明：該方法只適用于常用數字的操作，當數字超過一定位數時產生的精度問題這里暫不做處理

自己寫的方法，如果有什么不足之處歡迎指出交流，這里的replace方法可參考我的另一篇文章

補充：更簡單的原生方法

number類型可調用toLocalString()方法把他轉成本地語言環境格式顯示，經測試是可行的，但不需要攜帶參數，因為這些參數還是具有一定兼容性問題的，直接可以像下面使用，具體參見MDN：

var number=1234567891.23;
console.log(number.toLocaleString());//1,234,567,891.23

GPU云服務器云服務器 java保留多位小數 php保留6位小數 php保留6位小數點 js小數點保留2位

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107264.html

ES6學習第六章數值的擴展

摘要：前言本章介紹數值的擴展。本章原文鏈接數值的擴展進制表示法提供了二進制和八進制數值的新的寫法，分別用前綴或和或表示。科學計數法里面，表示指數的或前后不能有分隔符。函數返回數值的雙曲余弦函數可用表示。與數值的類型不同。前言本章介紹數值的擴展。新增了很多方法，有些不常用的方法了解即可。本章原文鏈接：數值的擴展進制表...

番茄西紅柿 2021-11-29 10:50 評論0 收藏2637
［PHP源碼閱讀］number_format函數

摘要：上次講到是如何解析大整數的，一筆帶過了的處理，再詳細閱讀該函數的源碼，以下是小分析。總結閱讀完這個函數的源碼，學習到的是浮動數與字符串的互相轉換的實現細節，字符串與浮點數之間的關系較復雜，之后還要繼續學習。上次講到PHP是如何解析大整數的，一筆帶過了number_format的處理，再詳細閱讀該函數的源碼，以下是小分析。函數原型 string number_format ( flo...

itvincent 2019-06-28 13:48 評論0 收藏0
簡單學習 JavaScript 正則表達式

摘要：對于對象，方法返回一個該正則表達式的字面量。顯示顯示正則表達式在的應用一個在字符串中執行查找匹配的方法，它返回一個數組或者在未匹配到時返回。為什么要用正則表達式簡單的說：我們與字符串接觸的頻率非常之高，正則表達式可以極大的提高復雜文本分析的效率，快速匹配出復雜的字符串。創建一個正則表達式直接量語法（字面量） var expression = /pattern/flags ;...

nevermind 2019-08-20 12:03 評論0 收藏0
JS核心知識點梳理——正則篇（下）

摘要：正則引言正則是一個前端必須掌握的知識。但是由于用的少，忘了記，記了忘，導致面試經常坐蠟。這里上篇先介紹正則的規則，下篇結合一些具體題目，帶大家重新學習鞏固一下正則，爭取面試給自己加分。正則 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言正則是一個前端必須掌握的知識。但是由于用的少，忘了記，記了忘，導致面...

jemygraw 2019-08-26 13:47 評論0 收藏0