如何判断下拉选中字符串是否存在于单/多值sales字段中

需要判断下拉筛选器的选中字符串是否存在于数据对象的sales属性中，该属性的值可能是单个字符串，也可能是逗号分隔的多个字符串。当前使用includes的判断逻辑在sales为单个值时正常，但多值场景下失效。

原代码片段：

const data = [
  { id: 123, sales: "online" }, 
  { id: 231, sales: "retail, online, mall" },
  { id: 311, sales: "retail" }
]

const selectedItem = "retail"

for (const item of data) {
  if (selectedItem.length > 0 && selectedItem.includes(item.sales)) {
    console.log('true')
  } else {
    console.log('false')
  }
}

预期输出：

false
true
true

解决方案 #

问题分析 #

原代码有两个核心问题：

1. 判断逻辑倒置：应该检查sales内容是否包含选中项，而非选中项包含sales
2. 多值场景未处理：逗号分隔的字符串需要拆分为独立项后再匹配，否则会因为空格或整体字符串匹配导致失效

方案一：拆分字符串为数组匹配 #

这是最直观的实现方式，兼容单值和多值场景：

const data = [
  { id: 123, sales: "online" }, 
  { id: 231, sales: "retail, online, mall" },
  { id: 311, sales: "retail" }
]

const selectedItem = "retail"

for (const item of data) {
  if (selectedItem.length > 0) {
    // 将sales拆分为去空格的独立项数组
    const salesItems = item.sales.split(',').map(item => item.trim())
    // 判断选中项是否在数组中
    const isMatch = salesItems.includes(selectedItem)
    console.log(isMatch ? 'true' : 'false')
  } else {
    console.log('false')
  }
}

逻辑说明

• split(',')：把逗号分隔的字符串拆分为数组，单值字符串拆分后会得到仅含一个元素的数组
• map(item => item.trim())：去除每个项前后的空格，避免因空格导致匹配失败（比如" retail"无法匹配"retail"）
• includes(selectedItem)：直接判断选中项是否存在于数组中，逻辑清晰

方案二：正则表达式匹配 #

如果不想拆分数组，可以用正则匹配完整的项，还能避免部分匹配的问题（比如不会把"retailer"误判为包含"retail"）：

const data = [
  { id: 123, sales: "online" }, 
  { id: 231, sales: "retail, online, mall" },
  { id: 311, sales: "retail" }
]

const selectedItem = "retail"

for (const item of data) {
  if (selectedItem.length > 0) {
    // 构建正则：匹配选中项是单独项（开头/逗号空格后，结尾/空格逗号前）
    const matchRegex = new RegExp(`(^|,\\s*)${selectedItem}(\\s*,|$)`)
    const isMatch = matchRegex.test(item.sales)
    console.log(isMatch ? 'true' : 'false')
  } else {
    console.log('false')
  }
}

逻辑说明

• 正则(^|,\\s*)：匹配字符串开头，或者逗号加任意空格的位置
• ${selectedItem}：匹配目标选中项
• (\\s*,|$)：匹配任意空格加逗号，或者字符串结尾
• 确保匹配的是完整的sales项，不会出现部分匹配的误判

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