如何在JavaScript的includes()中匹配精确值？解决复选框误选问题

当用竖线（|）分隔的字符串判断复选框选中状态时，includes()方法会匹配子串，导致名称相似的选项（如English和Non-English、Name和First Name）被误判为选中。

问题场景示例 #

React状态定义：

const [state, setState] = useState({    
    language: "English|Non-English",
})

复选框渲染逻辑：

{language.map((item) => {
   const checkboxvalues = state.language 
   return (
      <Grid key={item} item sm={4} md={3}>
         <FormControlLabel
            className={classes.switchcontrol}
            control={
               <Checkbox 
                  size="small" 
                  name={item} 
                  value={item} 
                  checked={checkboxvalues.includes(item)} // 此处会导致相似选项误判
                  onChange={handleOnChange} 
                />
             }
             label={item}
          />
       </Grid>
   );
})}

解决方案 #

方法1：将状态改为数组存储（推荐） #

把竖线分隔的字符串转为数组存储，直接用数组的includes()判断，从根源避免子串匹配问题。

修改状态定义：

const [state, setState] = useState({    
    language: ["English", "Non-English"],
})

调整复选框的checked判断：

checked={state.language.includes(item)}

对应的handleOnChange逻辑（维护数组的添加/移除）：

const handleOnChange = (event) => {
  const { value, checked } = event.target;
  setState(prevState => {
    const updatedLangs = [...prevState.language];
    if (checked) {
      // 未选中则添加
      !updatedLangs.includes(value) && updatedLangs.push(value);
    } else {
      // 已选中则移除
      const index = updatedLangs.indexOf(value);
      index !== -1 && updatedLangs.splice(index, 1);
    }
    return { ...prevState, language: updatedLangs };
  });
};

如果需要和后端交互时用竖线分隔的字符串，只需在提交时将数组转为字符串：state.language.join('|')。

方法2：拆分字符串为数组后判断（兼容原有字符串格式） #

如果必须保留字符串格式，可在判断时先将字符串拆分为数组，再用includes()：

checked={checkboxvalues.split('|').includes(item)}

方法3：正则表达式精确匹配（不推荐，需处理特殊字符） #

用正则匹配选项的完整边界（开头/竖线、结尾/竖线），避免子串匹配：

checked={new RegExp(`(^|\\|)${item.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(\\||$)`).test(checkboxvalues)}

注：replace(/[.*+?^${}()|[\]\\]/g, '\\$&')是为了转义选项名称中的正则特殊字符（如.、*等），防止正则出错。这种方法逻辑复杂，仅在无法修改状态格式时使用。

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