split(' ')、split(/( )/)区别及split(/(?:_| )+/)中?:的作用是什么

疑问1：split(' ')和split(/( )/)返回结果差异的原因 #

• 核心原因是正则捕获组的特殊处理规则：ECMAScript 规范明确规定，当 split() 方法的参数是包含捕获组（也就是用()包裹的正则片段）的正则表达式时，每一次匹配到的分隔符对应的捕获组内容，会被主动插入到返回数组的对应位置。
• split(' ') 是普通字符串分隔逻辑，不存在捕获组，所以只会返回分割后的非分隔符内容，不会保留空格本身。
• 你观察到的单词之间的非预期元素，其实是捕获组匹配到的空格本身，不是空元素；如果存在连续空格的场景，还会出现空串占位，这都是捕获组触发的额外返回逻辑。

举个直观的测试例子：

console.log('a b c'.split(' ')) // 输出：['a', 'b', 'c']
console.log('a b c'.split(/( )/)) // 输出：['a', ' ', 'b', ' ', 'c']

疑问2：split(/(?:_| )+/) 中?:的作用 #

首先纠正一个常见的正则语法误解：?: 出现在分组开头时，不是代表“后面跟随的内容”（那是正向预查(?=pattern)的语法），它是非捕获组的标识。

• 非捕获组的作用是：只做匹配逻辑，不会把匹配到的内容存入捕获组，自然也不会被split()方法插入到返回数组中。
• 这个场景下使用?:的原因：
  这段代码的目标是把字符串转为 spinal case（全小写、短横线分隔的格式），需要按空格或者下划线分割出单词部分，不需要保留分隔符本身。
  如果去掉?:写成split(/(_| )+/)，捕获组会把匹配到的空格/下划线也放到结果数组里，最终join('-')后会得到类似this-_-is- -test的错误结果。使用非捕获组就能避免分隔符被返回，只保留需要的单词片段，最终拼接出正确的短横线分隔格式。

你提供的代码运行效果如下：

function spinalCase(str) {     
  // 小写字母后接大写字母的位置插入空格，处理驼峰格式
  str = str.replace(/([a-z])([A-Z])/g, "$1 $2");   
    
  // 按空格和下划线分割，用短横线拼接
  return str
        .toLowerCase()
        .split(/(?:_| )+/)
        .join("-");
}
    
console.log( spinalCase("This Is Spinal Tap") ); // 输出：this-is-spinal-tap

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