正则校验多语言路径时if判断始终为true、else分支不执行如何解决？

问题原因 #

你的正则没有匹配边界，只要路径任意位置连续出现es、ar、en这两个字母的组合就会返回true，比如路径/ru/personal里包含的son片段就命中了en，所以永远不会触发else分支。

解决方案 #

方案1：修正正则匹配逻辑 #

如果你的多语言标识固定在路径的第一个段，推荐用正则严格匹配路径开头的语言段，避免误匹配：

useEffect(() => {
    // ^\/ 匹配路径开头的斜杠，(es|ar|en) 匹配指定语言，(?:\/|$) 匹配后续要么是路径分隔符要么是路径结束
    if (/^\/(es|ar|en)(?:\/|$)/.test(window.location.pathname)) {
        history.push(window.location.pathname)
    } else {
        history.goBack()
    }
}, [window.location]);

如果语言标识可能出现在路径任意位置，可以加单词边界降低误判概率：

if (/\b(es|ar|en)\b/.test(window.location.pathname)) {
  // 业务逻辑
}

方案2：数组校验（更易维护） #

你提到includes只能校验单个值，其实可以把支持的语言存为数组，拆分路径后判断即可，后续新增支持语言直接修改数组就行，不用调整正则：

useEffect(() => {
    const supportedLangs = ['es', 'ar', 'en']
    // 拆分路径去掉空值，取第一个路径段作为语言标识
    const pathSegments = window.location.pathname.split('/').filter(Boolean)
    const currentLang = pathSegments[0]

    if (supportedLangs.includes(currentLang)) {
        history.push(window.location.pathname)
    } else {
        history.goBack()
    }
}, [window.location]);

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