如何使用Vue.js判断数值范围 解决折扣计算器区间判定冲突问题

问题根源 #

触发两类折扣同时选中的核心原因是折扣区间的判断逻辑没有做互斥处理，大概率是第一个区间的上限设置错误，比如误写为<=100，导致100同时命中两个区间的判断条件。

修复方案 #

1. 修正区间判断边界 #

严格按照预设规则设置判断阈值：

• 10-90区间对应50%折扣，判断条件写为：price >= 10 && price <= 90
• 100-900区间对应90%折扣，判断条件写为：price >= 100 && price <= 900

2. 优化判断逻辑结构 #

不要使用两个独立的if语句做判断，改用else if串联判断逻辑，天然实现条件互斥，避免后续修改边界时再次出现重叠问题，示例代码如下：

// 先将输入框的字符串类型值转换为数值，避免字符串比较逻辑错误
const inputPrice = Number(输入框取值变量)
let discount = 1 // 默认无折扣
if (inputPrice >= 10 && inputPrice <=90) {
  discount = 0.5
} else if (inputPrice >= 100 && inputPrice <=900) {
  discount = 0.9
}

3. 补充异常值处理 #

可以额外增加非数字、负值、超出900的价格的默认处理逻辑，避免出现计算错误。

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