React字符串数字判断问题：如何正确识别含1-7的字符串？

问题说明 #

需要判断类似"Galley1"、"Galley2"…"Galley20"的字符串：若包含1-7的数字，设置cartOptions为"1"，否则设为"2"。现有代码无法得到预期结果，需进行改进。

现有代码问题 #

原代码中trolleyName.includes("1"||"2"||"3"||"4"||"5"||"6"||"7")的写法逻辑错误，"1"||"2"这类表达式会直接返回第一个真值（也就是"1"），导致代码只会检查字符串是否包含"1"，完全忽略了2-7的判断，这就是结果不符合预期的核心原因。

改进方案 #

方案一：数组遍历检测（直观易懂） #

这种方法适合需要明确指定检测范围的场景，逻辑清晰：

const [cartOptions, setCartOptions] = useState(null);

useEffect(() => {
  if (trolleyName) {
    trolleyFinder(trolleyName);
  }
}, [trolleyName]);

const trolleyFinder = (trolleyName) => {
  // 定义需要检测的数字集合
  const targetNumbers = ["1", "2", "3", "4", "5", "6", "7"];
  // 检查字符串是否包含集合中的任意一个数字
  const isMatch = targetNumbers.some(num => trolleyName.includes(num));
  setCartOptions(isMatch ? "1" : "2");
};

方案二：正则表达式匹配（简洁高效） #

如果字符串中的数字是独立存在的（比如作为后缀），用正则会更简洁：

const [cartOptions, setCartOptions] = useState(null);

useEffect(() => {
  if (trolleyName) {
    trolleyFinder(trolleyName);
  }
}, [trolleyName]);

const trolleyFinder = (trolleyName) => {
  // 匹配字符串中是否存在1-7的数字
  const regex = /[1-7]/;
  const isMatch = regex.test(trolleyName);
  setCartOptions(isMatch ? "1" : "2");
};

如果数字一定是作为后缀出现（比如"Galley12"这种格式），可以把正则改成/\d*[1-7]\d*$/，精准匹配结尾的数字范围。

额外补充 #

如果需要在页面关闭（组件卸载）时重置cartOptions为null，可以用useEffect的清理函数实现：

useEffect(() => {
  return () => {
    setCartOptions(null);
  };
}, []);

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