JavaScript程序优化需求：禁止空白输入与非数字输入校验

需求说明 #

现有一个询问用户计算距离（km）、时间（h）或速度（kph）的JavaScript程序，需完成以下优化：

• 禁止用户输入空白内容
• 在数字输入环节，若用户输入非有效数字则阻止程序继续执行

优化后的代码 #

// 该程序询问用户是否要计算距离、时间或速度
// 根据用户的回答，要求输入另外两个参数的值
// 随后程序计算出对应的速度、距离或时间
function calculate() {
  // 获取并验证用户的计算类型选择
  let calculationType;
  while (true) {
    calculationType = prompt("请选择要计算的内容：距离(km)、时间(h) 或 速度(kph)");
    // 处理空白输入或取消操作
    if (!calculationType) {
      alert("请输入有效的计算类型！");
      continue;
    }
    calculationType = calculationType.trim().toLowerCase();
    // 验证输入是否为合法选项，支持中英文输入
    if (["distance", "时间", "time", "速度", "speed", "距离"].includes(calculationType)) {
      // 统一为英文标识方便后续判断
      calculationType = calculationType === "距离" ? "distance" : 
                        calculationType === "时间" ? "time" : 
                        calculationType === "速度" ? "speed" : calculationType;
      break;
    } else {
      alert("输入无效，请输入 距离、时间 或 速度！");
    }
  }

  // 通用函数：获取并验证数字输入
  function getValidNumber(promptText) {
    while (true) {
      const input = prompt(promptText);
      // 处理空白输入或取消操作
      if (!input) {
        alert("请输入有效的数字！");
        continue;
      }
      const num = Number(input.trim());
      // 验证是否为有效正数（排除NaN、0和负数，避免计算逻辑错误）
      if (!isNaN(num) && num > 0) {
        return num;
      } else {
        alert("输入无效，请输入大于0的数字！");
      }
    }
  }

  // 根据选择执行对应计算
  switch (calculationType) {
    case "distance":
      const time = getValidNumber("请输入时间（小时）：");
      const speed = getValidNumber("请输入速度（kph）：");
      const distance = speed * time;
      console.log(`计算结果：距离为 ${distance.toFixed(2)} km`);
      break;
    case "time":
      const dist = getValidNumber("请输入距离（km）：");
      const spd = getValidNumber("请输入速度（kph）：");
      const timeResult = dist / spd;
      console.log(`计算结果：时间为 ${timeResult.toFixed(2)} 小时`);
      break;
    case "speed":
      const d = getValidNumber("请输入距离（km）：");
      const t = getValidNumber("请输入时间（小时）：");
      const speedResult = d / t;
      console.log(`计算结果：速度为 ${speedResult.toFixed(2)} kph`);
      break;
  }
}

calculate();

优化点说明 #

• 空白输入拦截：通过trim()去除输入首尾空格，判断输入是否为空或仅含空格，若不符合则提示用户重新输入
• 数字输入验证：封装getValidNumber函数统一处理数字输入，验证输入是否为有效正数，排除NaN、0和负数，确保计算逻辑合法
• 用户体验优化：支持中英文输入选项，使用循环替代原递归逻辑避免栈溢出，计算结果保留两位小数更直观
• 变量作用域优化：所有变量均在对应代码块内声明，避免全局变量污染

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