记一次小程序的数字三分

项目中需要将整数部分超过三位的数字中间使用逗号隔开，效果如下：

12345678.111
        |
123,456,78.111

本来这种需求，直接使用Number.prototype.toLocalString()方法就可以直接达到该效果，但是在开发者工具和真机调试上都是没有问题，只要小程序发布到线上时这个方法就不管作用了。说明小程序是不支持这个JS方法的。这里就花了半天时间写了一个将数字添加逗号的方法。在此记录一下。

1.功能需求

1. 小数部分：多位小数（大于三位）只保留三位小数。截取方法：四舍五入
2. 整数部分：大于三位的每隔三位添加逗号

2.思路

• 小数部分不能用toFixed()方法直接处理，因为小数部分不足3位，使用该方法会在小数后面填充0，比如：

  • let n = 123.1
    n.toFixed(3)   // 123.100

  • 又因为这个项目其他地方也需要用到截取小数点三位的功能，且效果一样，所以将处理小数部分单独提取成一个方法
• 整数部分也单独提取成一个方法

3.代码

• 小数部分截取：

  • /**
     * @param {String | Number} num
     * @return {String}
     * @description :将数字转为三位小数点的方法，没有小数位返回原数字
     */
    function numtoFix(num) {
        let strNum = '' + num
        if (strNum.indexOf('.') >= 0) {
            let decimals = strNum.split('.')[1]
            let integer = strNum.split('.')[0]
            if (decimals.length > 3) {
                return integer + `.${parseFloat('0.' + decimals).toFixed(3)*1000}`
            } else {
                return '' + num
            }
        } else {
            return '' + num
        }
    }

  • 说明：
    • 小数部分小于等于3位，返回原数字
    • 小数部分大于三位，使用toFixed()方法四舍五入处理
    • 返回值为String格式
• 整数部分：

  • /**
     * @param {String} n
     * @return {String}
     * @description ：将上面转为三位浮点的方法返回的String类型的数字转为三分格式的数字
     * */
    function get3Num(n) {
        if (!n) return 0
        let fixedNum = numtoFix(n)
        // 传进来的是String格式的
        let integer = fixedNum.split('.')[0] // 整数
        let decimals = fixedNum.split('.')[1] // 小数
    
        // 将整数部分三分
        // 先将整数部分倒序组成一个新字符
        let reIntrger = integer.split('').reverse().join('')
        // 每三个隔开
        let arr_3 = reIntrger.split('')
        let arr_3_sp = arr_3.map((e, i, a) => {
            // 如果是3的倍数，将当前的元素加上“,”，后面拆分
            if ((i + 1) % 3 === 0) {
                a[i] = a[i] + ','
            }
            return a[i]
        })
        let newInteger = arr_3_sp.map((e, i, a) => {
            a[i] = a[i].split('')
            return a[i]
        }).flat().reverse()   /* 这里flat方法也不确定能否在小程序环境使用*/
        if (newInteger[0] === ',') {
            // 当位数是3的倍数时，删除第一个逗号
            newInteger.shift()
        }
        newInteger = newInteger.join('')
        // 将整数部分与小数部分拼接起来
        let finalNum = ''
        if (decimals) {
            finalNum = `${newInteger}.${decimals}`
        } else {
            finalNum = newInteger
        }
    
        return finalNum 
    }

  • 说明：
    • 基本思路：
      • 将传入的String格式的数字打散成数组，执行翻转添加元素的操作

4.思考：

　　这种添加逗号的方法，印象中使用正则匹配应该也是可以的，所以这个方法应该还有使用正则方法达到该目的的途径。所以有待完善