将 JavaScript 输入数字格式化为带有两位小数的浮点数，并对所有操作强制执行

Question

这是我正在构建的应用程序的原型视图：

问题是，100就像你所说的那样int- 但我想说100.00，因为它代表金钱$- 所以它应该始终以小​​数点后两位结尾。这意味着 - 本质上我试图创建的表示是一个带有两个尾随小数位的浮点数。

所以，这个应用程序本身是在 React 中构建的，并且状态是按如下方式创建和持久化的，这本质上是我的程序中最重要的文件，它被称为App.js：

import React, { Component } from 'react';
import ButtonNumberContainer from './ButtonNumberContainer.js'
import ButtonEquationContainer from './ButtonEquationContainer.js'
import Result from './Result'
import './App.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
      equation: "",
    }

    this.addLogicToEquation = this.addLogicToEquation.bind(this)
    this.evalEquation = this.evalEquation.bind(this)
  }

  addLogicToEquation(newLogic) {
    let equation = this.state.equation

    if(newLogic==="10%"){
      let newEquation = Number(equation) + (Number(equation) * 0.10)
      console.log(newEquation)
      this.setState({equation: newEquation})
    }else if (newLogic==="15%"){
      let newEquation = Number(equation) + (Number(equation) * 0.15)
      console.log(newEquation)
      this.setState({equation: newEquation})
    }else if (newLogic==="20%"){
      let newEquation = Number(equation) + (Number(equation) * 0.20)
      console.log(newEquation)
      this.setState({equation: newEquation})
    }
    else{
      // we're adding more numbers
      let newEquation = equation + newLogic
      this.setState({equation: newEquation})
    }
  }

  evalEquation() {
    let str = this.state.equation.toString()
    console.log('str: ', str)

    palindrome(str)

    function palindrome(str) {
      let re = /[\W_]/g;
      let lowRegStr = str.toLowerCase().replace(re, '')
      let reverseStr = lowRegStr.split('').reverse().join('') 
      if(reverseStr === lowRegStr) {
        console.log("YES")
        console.log("str: ", str)
      } else {
        console.log("NOT")
        console.log("str: ", str)
      }
    }
  }

  render() {
    return (
      <div className="App">
        <Result text={this.state.equation}/>
        <ButtonNumberContainer addLogicToEquation={this.addLogicToEquation}/>
        <ButtonEquationContainer addLogicToEquation={this.addLogicToEquation}
                                 evalEquation={this.evalEquation}/>
      </div>
    );
  }
}

export default App;

这也是代码的重要部分——也许我们也需要考虑这一点：

import React, { Component, PropTypes } from 'react';

export default class ButtonNumber extends Component {
  render() {
    const { number, addLogicToEquation, evalEquation } = this.props
    const numberClass = " btn btn-number-" + number

    return (
      <button className={numberClass} onClick={() => {addLogicToEquation(number)}}>
        {number}
      </button>
    )
  }
}

如果您需要在代码库中检查参考内容，可以在我的 GitHub 页面上找到它。

更新：

addLogicToEquation(newLogic) {
  let equation = Number(this.state.equation).toFixed(2)

  if(newLogic==="10%"){
    let newEquation = Number(equation) + (Number(equation) * 0.10)
    console.log(newEquation)
    this.setState({equation: Number(newEquation).toFixed(2)})
  }else if (newLogic==="15%"){
    let newEquation = Number(equation) + (Number(equation) * 0.15)
    console.log(newEquation)
    this.setState({equation: Number(newEquation).toFixed(2)})
  }else if (newLogic==="20%"){
    let newEquation = Number(equation) + (Number(equation) * 0.20)
    console.log(newEquation)
    this.setState({equation: Number(newEquation).toFixed(2)})
  }
  else{
    // we're adding more numbers
    let newEquation = equation + Number(newLogic).toFixed(2)
    this.setState({equation: Number(newEquation).toFixed(2)})
  }

}

现在我最终遇到以下错误：

Answer 1

您可以使用number.toFixed(2)输出 100.00 而不是 100。