前端面试相关算法--金钱格式化

函数实现

/*
 *Array.prototype.reverse() Array→String
 *Array.prototype.join() Array→String
 *String.prototype.split() String→Array
 *String.prototype.match() String→Array
*/

function transferToMoney(money) {
    if(money && money != null) {
        money = String(money);
        var left = money.split('.')[0], right = money.split('.')[1];
        right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';
        var tmp = left.split('').reverse().join('').match(/\d{1,3}/g);
        left = tmp.join(',').split('').reverse().join('');
        return (Number(money) < 0 ? '-' : '') + left + right;
    }
    else if(money === 0) {
        return '0.00';
    }
    else {
        return '';
    }
}

在creat-react-app中使用

效果：

• 每三位需用“，”分分隔
• 数值前含￥符
• 整数与小数部分样式不同(没有小数时自动填充.00) 使用：

import Price from '../../components/Price/Price'

<Price>{v.goods_price}</Price>

源码：

• 第一版

import React, { Component } from 'react'
import './Price.css'

export default class Price extends Component {

    state={

        left:0,

        right:0

    }

    transferLeftMoney(money) {

        if(money && money != null) {

            money = String(money);

            var left = money.split('.')[0];

            var tmp = left.split('').reverse().join('').match(/\d{1,3}/g);

            left = tmp.join(',').split('').reverse().join('');

            return (Number(money) < 0 ? '-' : '') + left ;
        }
        else if(money === 0) {
            return '0';
        }
        else {
            return '';
        }
    }

    transferRightMoney(money) {

        if(money && money != null) {

            money = String(money);

            var right = money.split('.')[1];

            right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';

            return (Number(money) < 0 ? '-' : '') + right;

        }

        else if(money === 0) {

            return '.00';

        }

        else {

            return '';

        }

    }

    componentWillMount(){

       console.log(this.props)

       let left=this.transferLeftMoney(this.props.children)

       let right=this.transferRightMoney(this.props.children)

       this.setState({

           left,

           right

       })

    }

    render() {

        return (

        <div className="setprice">

            <div className="icon">&yen;</div>

            <div className="left">{this.state.left}</div>

            <div className="right">{this.state.right}</div>

        </div>

        )

    }

}

• 第二版，由于第一版价格无法根据props的改变而改变，因此采取以下版本

import React, { Component } from 'react'

import './Price.css'

export default class Price extends Component {

    state={

        left:function(money){

            if(money && money != null) {

                money = String(money);

                var left = money.split('.')[0];

                var tmp = left.split('').reverse().join('').match(/\d{1,3}/g);

                left = tmp.join(',').split('').reverse().join('');

                return (Number(money) < 0 ? '-' : '') + left ;

            }

            else if(money === 0) {

                return '0';

            }

            else {

                return '';

            }

        },

        right:function(money){

            if(money && money != null) {

                money = String(money);

                var right = money.split('.')[1];

                right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';

                return (Number(money) < 0 ? '-' : '') + right;

            }

            else if(money === 0) {

                return '.00';

            }

            else {

                return '';

            }

        }

    }

    render() {

        return (

            <div className="setprice">

                <div className="icon">&yen;</div>

                <div className="left">{this.state.left(this.props.children)}</div>

                <div className="right">{this.state.right(this.props.children)}</div>

            </div>

        )

    }

}

样式：

.setprice{

    color: red;

    display: flex;

    align-items: flex-end;;

}

.icon{

    font-size: 12px;

}

.left{

    font-size: 16px;

}

.right{

    font-size: 12px;

}