JavaScript中switch语句能否使用startsWith实现前缀匹配？

JavaScript 原生的 switch 语句不支持你写的这种直接前缀匹配的case写法。
switch 的核心匹配逻辑是严格相等（===）判断：它会拿 switch() 括号里的值，和每个 case 后的值/表达式执行结果做严格相等对比。你设想的 case startsWith("save-") 本质是执行startsWith拿到一个布尔值，再拿类名和这个布尔值做相等比较，永远无法匹配成功。

以下几种方案都可以消除冗余case，按需选择即可：

方案1：改动最小，在default分支做前缀判断 #

完全保留你原有精确匹配的case逻辑，只需要删掉所有重复的save类case，在default分支加前缀判断即可：

switch (ev.target.className) {
  case "add-li":
    newOption(ev.target.closest(".opQuestion").querySelector('ul'), false)
    break;
  case "add-starli":
    newStarSubquestion(ev.target.closest(".starQuestion").querySelector('ul'), false)
    break;
  case "add-numli":
    newNumSubquestion(ev.target.closest(".numQuestion").querySelector('ul'), false)
    break;
  default:
    if (ev.target.className.startsWith("save-")) {
      saveEdits(ev.target);
    }
    // 可在这里加其他未匹配场景的兜底逻辑
    break;
}

方案2：switch(true) 写法，支持任意布尔规则匹配 #

如果后续还要加更多类似前缀、包含判断等非严格相等的匹配逻辑，可以把switch的判断值设为true，每个case写返回布尔值的判断表达式，哪个case的结果为true就进入对应分支。注意把精确匹配的case放在前面，避免被宽泛的规则提前拦截：

switch (true) {
  case ev.target.className === "add-li":
    newOption(ev.target.closest(".opQuestion").querySelector('ul'), false)
    break;
  case ev.target.className === "add-starli":
    newStarSubquestion(ev.target.closest(".starQuestion").querySelector('ul'), false)
    break;
  case ev.target.className === "add-numli":
    newNumSubquestion(ev.target.closest(".numQuestion").querySelector('ul'), false)
    break;
  case ev.target.className.startsWith("save-"):
    saveEdits(ev.target);
    break;
}

方案3：策略对象映射，适合规则较多的场景 #

如果后续类名对应的处理逻辑会持续扩展，用对象映射代替switch的可维护性更高：

const actionMap = {
  "add-li": (target) => newOption(target.closest(".opQuestion").querySelector('ul'), false),
  "add-starli": (target) => newStarSubquestion(target.closest(".starQuestion").querySelector('ul'), false),
  "add-numli": (target) => newNumSubquestion(target.closest(".numQuestion").querySelector('ul'), false)
}

const { className } = ev.target
const triggerTarget = ev.target
// 先走精确匹配
if (actionMap[className]) {
  actionMap[className](triggerTarget)
} 
// 再走前缀匹配
else if (className.startsWith("save-")) {
  saveEdits(triggerTarget)
}

如果触发事件的DOM元素可能同时存在多个class（比如class="save-li disabled"），直接读取className得到的是完整类名字符串，做精确匹配或前缀匹配很容易出问题。这种场景更推荐用classListAPI做判断：

• 精确判断单个类是否存在：ev.target.classList.contains('add-li')
• 匹配save前缀类：Array.from(ev.target.classList).some(cls => cls.startsWith('save-'))

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