前端小知识：我居然没学会用 split 方法？！

小伙伴们，你们会用 JavaScript 的 split 方法吗？最近我才发现，原来我多年来一直没真正掌握它，结果在解题时被卡住了。所以今天，我决定好好整理一下这个方法的用法。

在讨论问题之前，先来看一下 split 的两种基本用法。

split 的两种基本用法

1. 字符参数拆分

split 方法的主要用途就是分割字符串，最常见的就是用某个特定字符作为分隔符，比如电商平台上生成商品编号时，需要根据特定字符对名称进行拆分：

'Product:Code:2024'.split(':');
// 结果：['Product', 'Code', '2024']

在这个例子中，使用 : 作为分隔符，把字符串分割成多个部分。这个用法大家应该很熟悉，在生成或解析带有固定分隔符的数据时非常常用。

2. 正则表达式分隔：按字符类型拆分

有时候，我们并不是按某个具体字符，而是按一类字符来分割字符串。比如在评论数据处理中，我们想去掉所有标点符号，只保留文字内容：

'Hello, how are you?'.split(/\W+/).filter(Boolean);
// 结果：['Hello', 'how', 'are', 'you']

在这个例子中：

• 使用正则表达式 \W+ 来匹配一个或多个非字母字符，并将它们作为分隔符。

• split 按这些分隔符将字符串分割成单词列表。

• filter(Boolean) 去除了分割后产生的空字符串，确保得到的数组只包含有效的单词。

这种用法在清理用户输入的文本或提取内容时非常有用。

为什么说我没学会 split 呢？

带捕获组的正则分割

看看下面这个代码示例：

'alphaABbetaCDgamma'.split(/(AB|CD)/);

如果你以为结果是 ['alpha', 'beta', 'gamma']，那么需要重新思考了！

// 实际结果：['alpha', 'AB', 'beta', 'CD', 'gamma']

没错，结果数组中不仅包含分割后的文本，还包含了分隔符 AB 和 CD。当 split 使用正则表达式分隔时，如果正则中有捕获组，那么匹配到的捕获组内容也会出现在最终的结果中。这一点非常容易被忽略。

处理多分隔符日期字符串

假设我们需要处理一组日期字符串，这些日期可能用 - 或 / 作为分隔符。我们想把年份加 1 并保留原有的分隔符格式。这种场景下，用带捕获组的正则表达式非常便捷：

function addOneYear(date) {
  const parts = date.split(/(-|\/)/);  // 捕获分隔符 - 或 /
  parts[0] = Number(parts[0]) + 1;     // 将年份加 1
  return parts.join('');               // 保留分隔符
}

console.log(addOneYear('2023-05-15')); // 输出: 2024-05-15
console.log(addOneYear('2023/05/15')); // 输出: 2024/05/15

在这里，分隔符 - 或 / 被保留在结果数组中，这样在处理完数据后可以重新拼接出原来的日期格式，非常方便。

限制分割次数

split 方法的第二个参数 limit 可以限制返回数组的长度。在处理一些日志或长文本时，我们可能只想要前几段内容，后续内容可以忽略。这时 limit 就派上用场了。

'section1ABsection2CDsection3'.split(/(AB|CD)/, 3);
// 结果：['section1', 'AB', 'section2']

在这个例子中，我们用 limit 限制了数组长度为 3，因此 split 从第一个匹配位置分割，并在达到限制长度后停止，剩下的部分被忽略。这种用法对于需要提取特定部分内容时很实用，比如只保留标题和前两段描述。

总结

通过以上进阶用法，我们可以更灵活地使用 split 处理字符串数据。无论是在电商中生成规范的商品代码，还是在处理评论内容、日期格式等场景中，这些技巧都能帮助我们更高效地进行字符串分割。

希望这些用法能给大家带来帮助！如果你也有 split 方法的使用心得，欢迎在评论区分享，我们一起讨论！