计算器:将字符串转换为数学运算(JavaScript)

时间:2018-07-17 00:12:11

标签: javascript html

如何将字符串转换为数学运算?我不能使用eval。有什么建议么? 到目前为止,这就是我所拥有的。我将字符串拆分为数组,但是如何将'=','-'等转换为实际的数学运算。另外,我知道我可以使用parseInt将“数字”转换为实际数字,但是代码中的外观如何?不确定如何开始。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
    <title>JavaScript HW3</title>
    <script type="text/javascript">
      function display(num) {
        var node = document.getElementById("display");  
        node.value+=num;    
      }

      function result(){
        document.getElementById("display").value = (document.getElementById("display").value).split("");
      }
    </script>
  </head>
  <body> 
    <h1>Simple calculator</h1>


    <form action="" method="get">
      <p>
        <input type="text" id="display"/>       
      </p>
    </form>

    <form action=""  method="get">
      <div class="button">
        <input type="button" class="btn" name="b7" value="7" onclick='display("7")'/>
        <input type="button" class="btn" name="b8" value="8" onclick='display("8")'/>
        <input type="button" class="btn" name="b9" value="9" onclick='display("9")'/>
        <input type="button" class="btn" name="db" value="/" onclick='display("/")'/>
        <br/>
        <input type="button" class="btn" name="b4" value="6" onclick='display("6")'/>
        <input type="button" class="btn" name="b5" value="5" onclick='display("5")'/>
        <input type="button" class="btn" name="b6" value="4" onclick='display("4")'/>
        <input type="button" class="btn" name="mb" value="*" onclick='display("*")'/>
        <br/>    
        <input type="button" class="btn" name="b1" value="3" onclick='display("3")'/>
        <input type="button" class="btn" name="b2" value="2" onclick='display("2")'/>
        <input type="button" class="btn" name="b3" value="1" onclick='display("1")'/>
        <input type="button" class="btn" name="mib" value="-" onclick='display("-")'/>
        <br></br>

        <input type="button" class="btn" name="db" value="." onclick='display(".")'/>
        <input type="button" class="btn" name="b0" value="0" onclick='display("0")'/>
        <input type="button" class="btn" name="eb" value="=" onclick='result("")'/>
        <input type="button" class="btn" name="ab" value="+" onclick='display("+")'/>
        <br/>
      </div>
    </form>

    <!-- W3C XHTML Validation logo-->
    <p>
      <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml11"
        alt="Valid XHTML 1.1" height="31" width="88" /></a>
    </p>
  </body>
</html>

2 个答案:

答案 0 :(得分:1)

我不想写全部,但这是您可以走的一个方向。您可以将字符串转换为以字符串为键和函数为值的对象的操作。考虑一个看起来像这样的对象:

var operations = {
    current: 0,
    '=': function(){
        return this.current
    },
    '+': function(n){
        this.current += Number(n)
        return this
    }
}
operations['+'](100)
operations['+'](50)
var total = operations['=']()
console.log("total: ", total )

这可能不是整个项目的最佳方法,但可能会给您一个想法,不会导致if/elseswitch语句的混乱。

答案 1 :(得分:0)

您可以使用类似的方法,在这种情况下,当用户按下=按钮时,您会从计算器中获取字符串并调用calculateString

不支持方括号/括号()

function calculateString(str){
    var valArr = str.split(/\s[+-/*]\s/),//split string on each operator (having a space either side allowing for a negative value)
        opArr = str.match(/\s[+-/*]\s/g);//return all operators from string

    for(var i=0,len=valArr.length;i<len;i++){
        //convert each value to a number instead of string
        valArr[i] = +valArr[i];
    }
    for(var i=0,len=opArr.length;i<len;i++){
        //cleanup whitespace from operators
        opArr[i] = opArr[i].trim();
    }

    var currentTotal = valArr[0];
    for(var i=0,len=opArr.length;i<len;i++){
        switch(opArr[i]){
            case '+':
                currentTotal = currentTotal + valArr[i+1];
                break;
            case '-':
                currentTotal = currentTotal - valArr[i+1];
                break;
            case '*':
                currentTotal = currentTotal * valArr[i+1];
                break;
            case '/':
                currentTotal = currentTotal / valArr[i+1];
                break;
        }
    }
    return currentTotal;
}

要使其正常工作,每个操作员的两侧都必须有一个空格。

例如"1 + 2 / 3 * 10"

如果希望使用负值,请在-号和该值之间不要留空格

例如"1 + 2 * -3 / 2"