JavaScript如何处理带千分位逗号的数值计算并重新输出千分位格式结果

你的NaN报错确实是带千分位逗号的字符串无法直接识别为数值导致的，按以下步骤修改即可：

核心修改点 #

• 计算前先将salary输入值的逗号全部清除，再转为数值类型
• 计算完成后将结果转成千分位格式，同时注意要将annumSalary输入框的type="number"改为type="text"，因为number类型输入框不支持带逗号的字符串值
• 可删除重复引入的jQuery，保留一个版本即可

修改后完整代码 #

JS部分 #

$('input.number').keyup(function(event) {
    // 跳过方向键操作
    if (event.which >= 37 && event.which <= 40) return;
    // 千分位格式化
    $(this).val(function(index, value) {
      return value
        .replace(/\D/g, "")
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    });
  }); 

  function calculateSalary() {
    // 清除salary值里的逗号后转成数值，空值兜底为0
    var salary = Number(document.getElementById("salary").value.replace(/,/g, '')) || 0;
    // years也转数值做兜底处理
    var years = Number(document.getElementById("years").value) || 0;

    var annumSalary = Math.round(salary * years);
    // 计算结果转千分位后赋值
    document.getElementById("annumSalary").value = annumSalary.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  } 

HTML部分 #

<!-- 删除重复引入的jQuery，只保留一个版本即可 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<label>Salary</label>
<input class="form-control number" name="salary" id="salary"  required/>
<br>
<label>Years</label>
<input class="form-control" name="years" id="years" value="" type="number" required/>
<br>
<label>Annual Salary</label>
<!-- type改为text，支持带逗号的千分位格式展示 -->
<input class="form-control number" name="annumSalary" id="annumSalary" value="" type="text" readonly/>
<br>
<input type="submit" name="calculate" id="calculate" value="Calculate" onClick="calculateSalary()" />

内容的提问来源于stack exchange，提问作者user17131817