初学者自己制作的计算器问题

Question

此段代码有没有什么修改的地方，请指导一下
怎么能更好的让input中键盘输入的时候可以不出现不是加减乘除和数字的情况

<template>
    <view>
        <input class="shuru" type="text"  @input="jianpan" style="background-color: darkturquoise;font-size: 1px;" />
        <view style="display:block;position:absolute;margin-top: -33px;">{{Com}}</view>
    </view>
    <view class="num"  v-for="eye in shu">
        <button class="numsty" @click="tan(eye)">{{eye}}</button>
    </view>
    <view class="suan">
        <button class="bth" @click="add">+</button>
        <button class="bth" @click="jian">-</button>
        <button class="bth" @click="cheng">*</button>
        <button class="bth" @click="chu">/</button>
        <button class="bth" @click="deng">=</button>
        <button class="bth" @click="qing">c</button>
        </view>
</template>

<script>
import { toValue } from 'vue';
    export default {
        data() {
            return {
                
                Com:'',
                shu:[1,2,3,4,5,6,7,8,9,0],
                a:'',//结果
                firstnumber:'',//第一个值
                firstcun:'',//符号
                lastnumber:'',//第二个值
                
            }
        },
        methods: {
            tan(number){
                this.Com=this.Com+number.toString()
                
              },
             
              jianpan(e){
  
                var string=e.detail.value;
                for (let i = 0; i < string.length; i++) {
                      let char = string[i];
                      if (!(char >= '0' && char <= '9' || char == '+' || char == '-' || char == '*' || char == '/')) {
                        // 如果不是数字也不是操作符，则替换
                        string = string.replace(char, '');
                      }
                    }
                
                    // 更新 Com 值，只保留数字和操作符
                    this.Com = string;

                
                if(string[string.length-1]=="+"){
                    this.add();
                }
                else if(string[string.length-1]=="-"){
                    this.jian();
                    
                }
                else if(string[string.length-1]=="*"){
                    this.cheng();
                    
                }
                else if(string[string.length-1]=="/"){
                    this.chu();
                    
                }
                else{
                    this.Com+=string[string.length-1];
                }
                
              },
            
            
            add(){
                if(this.firstnumber != ''){
                 this.deng();    
                }
                
                this.firstnumber = this.Com;
                //这里要给 用户的输入框赋值一个+号 让用户看到的表达式成立
                this.Com+= "+";
                this.firstcun='+';
            },
            jian(){
                if(this.firstnumber != ''){
                 this.deng();    
                }
                this.firstnumber = this.Com;
                this.Com += '-';
                this.firstcun = '-';
            },
            cheng(){
                if(this.firstnumber != ''){
                 this.deng();    
                }
                this.firstnumber = this.Com;
                this.Com += '*';
                this.firstcun = '*';
            },
            chu(){
                if(this.firstnumber != ''){
                 this.deng();    
                }
                this.firstnumber = this.Com
                this.Com += '/';
                this.firstcun = '/';
            },
            deng(){
                
                if(this.firstcun=='+'){
                    //加法运算
                    this.Com = (parseInt(this.firstnumber) + parseInt(this.Com.split("+")[1])).toString();
                }
                else if(this.firstcun=='-'){
                    //减法运算
                    this.Com = (parseInt(this.firstnumber) - parseInt(this.Com.split("-")[1])).toString();
                }
                else if(this.firstcun=='*'){
                    //乘法运算
                    this.Com = (parseInt(this.firstnumber)  * parseInt(this.Com.split("*")[1])).toString();
                }
                else if(this.firstcun=='/'){
                    //除法运算
                    if(this.lastnumber==='0'){
                        this.Com = 'Error';
                        return;
                    }
                    this.Com = (parseInt(this.firstnumber) / parseInt(this.Com.split("/")[1])).toString();
                }
                else{
                }
                  
            },
            
            qing() {
                   this.Com = '';
                   this.a = '';
                   this.firstnumber = '';
                   this.firstcun = '';
                   this.lastnumber = '';
            },
            
            
            
    
            
    
        }
    }
</script>

<style>
    .shuru{
        width: 400px;
        height: 50px;
    }
    .numsty{
        width: 50px;
          height: 40px;
          margin: 2px;
          border: none;
          background-color: #f0f0f0;
          cursor: pointer;
          
        
    }
    .suan{
         display: flex;
         justify-content: space-around;
    }
    .bth{
         width: 50px;
         height: 40px;
         margin: 2px;
         border: none;
         background-color: #f0f0f0;
         cursor: pointer;
    }
    
    
    
    
</style>

Answer 1

以下是优化后的代码：

const string = e.detail.value;
const allowedChars = /[0-9+\-*/]/;
let newString = '';
for (let i = 0; i < string.length; i++) {
    if (allowedChars.test(string[i])) {
        newString += string[i];
    }
}
this.Com = newString;

优化思路：

• 使用正则表达式/[0-9+\-*/]/来判断字符是否为数字或允许的操作符，比逐个比较更加简洁高效。
• 避免使用replace方法不断修改字符串，而是直接构建一个新的字符串，减少不必要的操作。