JavaScript开发：如何将多prompt购物清单输入简化为单行代码？

方案1：单prompt输入+解构赋值（简化代码） #

让用户在一个prompt里用分隔符（比如逗号）输入所有购物项，拆分后解构到item1/item2/item3变量，既减少prompt调用次数，又满足单独存储的需求：

const nameUser = prompt("What is your name?");
// 提示用户用逗号分隔购物项，自动去除每个项的前后空格
const [item1, item2, item3] = prompt("Enter your 3 shopping items, separated by commas:")
  .split(",")
  .map(item => item.trim());

console.log(`${nameUser}'s shopping list:
${item1}
${item2}
${item3}
`);

如果追求紧凑的“单行逻辑”（兼顾可读性），可以合并为：

const nameUser = prompt("What is your name?"), [item1, item2, item3] = prompt("Enter 3 items (comma-separated):").split(",").map(i => i.trim());

方案2：模拟多行输入弹窗 #

原生prompt不支持多行输入，你可以用自定义模态框结合textarea实现多行输入交互，用户可逐行输入购物项：

const nameUser = prompt("What is your name?");

// 创建自定义多行输入弹窗
const createMultiLinePrompt = (message) => {
  const container = document.createElement("div");
  container.style.cssText = "position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px;background:white;border:1px solid #ccc;z-index:9999;";
  
  const label = document.createElement("p");
  label.textContent = message;
  
  const textarea = document.createElement("textarea");
  textarea.style.cssText = "width:300px;height:120px;margin:10px 0;";
  textarea.placeholder = "Enter each item on a new line";
  
  const button = document.createElement("button");
  button.textContent = "Submit";
  
  let result = null;
  button.addEventListener("click", () => {
    result = textarea.value;
    document.body.removeChild(container);
  });
  
  container.append(label, textarea, button);
  document.body.appendChild(container);
  
  // 等待用户提交
  return new Promise(resolve => {
    const interval = setInterval(() => {
      if (result !== null) {
        clearInterval(interval);
        resolve(result);
      }
    }, 100);
  });
};

// 使用自定义弹窗获取购物项
createMultiLinePrompt("Enter your 3 shopping items (one per line):")
  .then(itemsText => {
    // 拆分每行，过滤空行，取前3个项
    const [item1, item2, item3] = itemsText.split("\n").filter(item => item.trim()).map(item => item.trim());
    console.log(`${nameUser}'s shopping list:
${item1}
${item2}
${item3}
`);
  });

补充提示 #

• 方案1可添加默认值处理输入不规范的情况，比如用户输入少于3项：

  const [item1 = "Unspecified", item2 = "Unspecified", item3 = "Unspecified"] = ...
  

• 方案2交互更友好，适合网页场景，能直观支持多行输入。

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