当前位置：首页 > 文章列表 > 文章 > 前端 > JS按位置分割字符串的实用方法

JS按位置分割字符串的实用方法

2025-08-29 23:10:17 0浏览收藏

还在苦恼 JavaScript 中如何按位置分割字符串？本文为你带来两种实用技巧！**JavaScript 按位置分割字符串**是前端开发中常见的需求。本文详细讲解如何使用正则表达式和 `String.prototype.slice` 方法来实现字符串分割，并提供清晰的代码示例。通过学习本文，你将掌握根据指定位置精确分割字符串的方法，了解两种方法的优缺点，从而在实际开发中灵活选择最适合的方案。无论是处理用户输入还是解析数据，都能轻松应对字符串分割的挑战，提升你的 JavaScript 编程效率。快来学习吧！

JavaScript 中按指定位置分割字符串的实用方法

本文旨在介绍在 JavaScript 中如何将字符串按照指定位置分割成多个子字符串。我们将探讨两种常用的方法：使用正则表达式和 String.prototype.slice 方法。通过示例代码和详细解释，你将能够灵活地根据需求分割字符串，并了解这两种方法的优缺点。

使用正则表达式分割字符串

正则表达式是一种强大的文本匹配工具，可以用来查找、替换和分割字符串。在本例中，我们可以使用正则表达式来匹配前 11 个字符，并将剩余的字符作为第二个子字符串。

const orignalValue = 'BERNY564567JH89E';
const [match, group1, group2] = orignalValue.match(/([a-z0-9]{11})([a-z0-9]*)/i) ?? [];

console.log({ group1, group2 }); // { "group1": "BERNY564567", "group2": "JH89E" }

代码解释:

orignalValue.match(/([a-z0-9]{11})([a-z0-9]*)/i)：使用 match 方法和正则表达式来匹配字符串。
- ([a-z0-9]{11})：第一个捕获组，匹配 11 个字母或数字字符。
- ([a-z0-9]*)：第二个捕获组，匹配 0 个或多个字母或数字字符。
- /i：忽略大小写。
[match, group1, group2]：使用数组解构将匹配结果赋值给变量。match 是完整的匹配字符串，group1 是第一个捕获组的内容，group2 是第二个捕获组的内容。
?? []：空值合并运算符，如果 match 方法返回 null (未找到匹配项)，则将 [] 赋值给左侧的变量，避免解构 null 导致错误。

注意事项:

正则表达式可能比较复杂，需要一定的学习成本。
如果字符串不符合正则表达式的模式，match 方法可能返回 null，需要进行处理。

使用 String.prototype.slice 方法分割字符串

String.prototype.slice 方法可以提取字符串的某个部分，并返回一个新的字符串。我们可以使用它来分割字符串。

const orignalValue = 'BERNY564567JH89E';
const splitAtIndex = (str, index) => [str.slice(0, index), str.slice(index)];
const [head, tail] = splitAtIndex(orignalValue, 11);

console.log({ head, tail }); // { "head": "BERNY564567", "tail": "JH89E" }

代码解释:

splitAtIndex = (str, index) => [str.slice(0, index), str.slice(index)]：定义一个函数 splitAtIndex，接收字符串 str 和索引 index 作为参数。
- str.slice(0, index)：提取从索引 0 到 index (不包括 index) 的子字符串。
- str.slice(index)：提取从索引 index 到字符串末尾的子字符串。
- [..., ...]：将两个子字符串放入一个数组中。
[head, tail] = splitAtIndex(orignalValue, 11)：使用数组解构将 splitAtIndex 函数返回的数组赋值给变量 head 和 tail。

注意事项: