金额千位数格式化方法

公司做项目需要用到奖金额格式化,每千位用逗号隔开 随写一下方法

  • 实现思路: 首先对传入的数值进行字符串分割,然后分别对整数部分和小数部分进行整理,
  • 为实现的功能,小数位置目前只限制两位,因为公司没有需求,目前没有写
    /**
     * @description 传入一个金额 格式化千位用逗号隔开
     * @param  {number} money 金额,可以是正整数或者浮点说 1 || 1.19
     * @return {string}       返回一个格式化后的字符串 100,000.00
     */
    function formatMonery (money) {
        /***
        *@param Array arr 分割处理整数和小数
        *@param String tempS1 处理整数部分用的零时变量
        *@param String tempS2 处理整数部分用的零时变量
        *@param Number tempIndex 处理整数部分截取字符串的位置
        *@param String tempS3 处理小数部分用的零时变量
        *@param Regexp reg 分割字符串用
        */
        var arr, tempS1, tempS2, tempS3, tempInex,
            reg = /(\d{3})/g;

        if(!money) return '0.00';

        if (typeof money === 'number') money = money + "";
        arr = money.split('.');
        tempS1 = arr[0]

        //整数的处理
        //如果小于1000
        if (tempS1.length > 3) {

            tempInex = tempS1.length % 3;//拿到千位的余数
            tempS2 = tempS1.substring(0, tempInex) //分割拿到%3余数部分
            tempS1 = tempS1.substring(tempInex) //拿到 %3 == 0 的部分 

            // 遍历 进行字符串拼接
            tempS1.split(reg).forEach(item => {

                if(item.length >= 1) {
                    if(tempS2.length == 0){
                        tempS2 = item
                    } 
                    else tempS2 += ',' + item;
                }
            })
            //赋值给S1
            tempS1 = tempS2;
        }
        //小数部分的处理
        if (arr.length == 2) {
            tempS3 = arr[1];
            if (tempS3.length === 1) tempS3 = tempS3 + '0';
            if (tempS3.length >= 3) tempS3 = tempS3.substring(0, 2)
        }

        return `${tempS1}.${tempS3}`
    }

限制input只能输入数字和点

在网上看了很多的例子,发现基本上都是监听input的键盘事件,然后使用正则验证,然后使用字符串replace方法替换,感觉不是很好。然后重新找了以下解决方案!  
  • keydown:用户在键盘上按下某按键时发生。一直按着某按键则会不断触发(opera浏览器除外)。
  • keyup:用户在键盘上按下某按键然后键盘弹起时发生。一直按着某按键则会不断触发(opera浏览器除外)。
  • keypress:用户按下一个按键,并产生一个字符时发生(也就是不管类似shift、alt、ctrl之类的键,就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发)。一直按着某按键则会不断触发。
    • 完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。当按钮被按下时,发生 keydown 事件。keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。
Vue.directive('numberOnly', {
    bind: function (el, vNode) {
        function handler (e) {
             var keyCode = event.keyCode;    
            if ((keyCode >= 48 && keyCode <= 57) || keyCode == 46)    
            {    
                 event.returnValue = true;    
             } else {    
                   event.returnValue = false;    
            }   
        }

        el.addEventListener('keypress', handler)

    },
    unbind: function () {
        // this.el.removeEventListener('keypress', this.handler)
    }
})

猜你喜欢

转载自blog.csdn.net/weixin_33768153/article/details/79423285