如何在JavaScript中通过prompt接收用户输入数据？

基础用法 #

prompt() 是浏览器原生函数，用于弹出对话框获取用户文本输入。语法如下：

const userInput = prompt(提示文本, [默认输入值]);

• 第一个参数是显示给用户的提示内容
• 第二个参数可选，用于设置输入框的默认值
• 用户点击「确定」时，函数返回输入的字符串；点击「取消」时返回 null

餐厅菜单选择的实现示例 #

以下是完整代码，模拟收集顾客的菜单选择流程：

1. 定义菜单数据

先整理菜品信息，方便后续验证和展示：

// 餐厅菜单：键为选项编号，值包含菜品名称和价格
const restaurantMenu = {
  1: { name: "经典牛肉汉堡", price: 39 },
  2: { name: "凯撒鸡肉沙拉", price: 28 },
  3: { name: "番茄肉酱意面", price: 45 },
  4: { name: "奥利奥芝士蛋糕", price: 22 },
  5: { name: "鲜榨橙汁", price: 18 }
};

2. 构建提示文本

自动生成包含所有菜品的提示内容，避免手动拼接：

let menuPrompt = "欢迎光临！请输入对应编号选择菜品：\n";
// 遍历菜单，拼接每一项到提示文本
for (const [id, item] of Object.entries(restaurantMenu)) {
  menuPrompt += `${id}. ${item.name} - ${item.price}元\n`;
}

3. 获取并处理用户输入

弹出对话框获取选择，同时处理「取消」和「无效输入」的情况：

const userChoice = prompt(menuPrompt);

if (userChoice === null) {
  // 用户点击取消
  alert("您已取消选择，期待下次光临！");
} else if (restaurantMenu[userChoice]) {
  // 输入有效，匹配到菜单菜品
  const selected = restaurantMenu[userChoice];
  alert(`您选择了：${selected.name}\n总价：${selected.price}元\n感谢您的点餐！`);
} else {
  // 输入无效，提示重新选择
  alert("输入的编号不存在，请重新选择！");
}

进阶优化：循环验证输入 #

如果需要确保用户输入有效（直到选择正确或取消），可以用循环实现：

let validSelection = false;
let selectedItem = null;

while (!validSelection) {
  const userChoice = prompt(menuPrompt);
  
  if (userChoice === null) {
    alert("您已取消点餐，欢迎下次再来！");
    break;
  }
  
  if (restaurantMenu[userChoice]) {
    // 用confirm确认用户选择
    const confirmOrder = confirm(`您确定要选择「${restaurantMenu[userChoice].name}」吗？`);
    if (confirmOrder) {
      selectedItem = restaurantMenu[userChoice];
      validSelection = true;
      alert(`订单确认：${selectedItem.name}，总价${selectedItem.price}元\n我们会尽快为您准备！`);
    } else {
      alert("请重新选择您的菜品！");
    }
  } else {
    alert("无效的编号，请输入菜单上的数字！");
  }
}

注意事项 #

• prompt() 返回的始终是字符串，如果需要处理数字类型（比如点餐数量），需要用 parseInt() 或 Number() 转换
• 该函数是阻塞式的，会暂停页面其他脚本执行，直到用户关闭对话框
• 仅适用于简单的文本/选择场景，复杂表单建议使用HTML原生表单控件

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