js字符串怎么按竖线

一、基础方案：使用 split('|') 直接切分

JavaScript 提供了原生内置的 String.prototype.split() 方法。当你的数据源格式规范，竖线两端没有多余的空格或特殊字符时，直接传入单字符字符串 '|' 是最高效、最稳妥的选择。

// 基础示例：按竖线将品类数据切分为数组
const rawText = "苹果|香蕉|西瓜|葡萄";
const fruits = rawText.split('|');

console.log(fruits);
// 示例输出: ["苹果", "香蕉", "西瓜", "葡萄"]
console.log(fruits.length);
// 示例输出: 4

在上面的代码中，split('|') 会依次在字符串中寻找 ASCII 编码为 124 的竖线字符。每定位到一个竖线，就将前面的字符片段存入数组，并最终返回一个包含 4 个元素的新数组实例。这种纯字符串匹配由底层引擎进行快速内存检索，不涉及正则表达式解析与回溯，执行开销极小。

限制返回的切分数量

split() 方法还支持传入可选的第二个参数 limit，用于控制返回结果数组的最大长度。当解析达到指定数量后，引擎便停止后续切分：

const fullLog = "INFO|2026-11-10|14:30:00|系统启动成功";
const summary = fullLog.split('|', 2);

console.log(summary);
// 示例输出: ["INFO", "2026-11-10"]

二、核心陷阱：为什么使用正则时必须写成 /\|/

许多开发者在需要进行复杂模式匹配时，习惯随手传入正则表达式。然而在处理竖线时，常常出现一个隐蔽且严重的 Bug：将代码写成了 str.split(/|/)。

const sample = "北京|上海|广州";

// 【错误写法】未转义的正则
const wrongResult = sample.split(/|/);
console.log(wrongResult);
// 示例输出: ["北", "京", "|", "上", "海", "|", "广", "州"]
// 结果完全背离预期，竖线字符本身甚至被当成了元素保留！

// 【正确写法】通过反斜杠对元字符进行转义
const correctResult = sample.split(/\|/);
console.log(correctResult);
// 示例输出: ["北京", "上海", "广州"]

通过添加反斜杠 \|，我们显式告知正则表达式引擎：放弃竖线的“分支选择”功能，将其还原为纯粹的字面量字符进行精确比对。

三、常见脏数据场景与清洗处理

在实际业务开发中，由用户手动输入、CSV 导出或第三方接口返回的竖线分割文本，往往并不规整。常见问题包括竖线两旁伴随随意空格、首尾多余竖线或连续多个竖线造成空字符串。

1. 吸收竖线两侧的多余空格

如果字符串可能呈现 "Java | Python | Go | Rust" 这种形式，我们希望切分出的数组元素不包含多余的前后空格。此时可以结合正则表达式的 \s*：

const messyText = "Java | Python  |   Go| Rust ";

// 匹配：竖线本身及其左右两端可能出现的任意数量空白字符
const techList = messyText.split(/\s*\|\s*/);

console.log(techList);
// 示例输出: ["Java", "Python", "Go", "Rust "]
// 注意：尾部条目的末尾空格可通过 trim() 或正则进一步净化

更彻底的做法是在切分后串联数组的 map 方法进行整体修剪：

const cleanList = messyText.split('|').map(item => item.trim());
console.log(cleanList);
// 示例输出: ["Java", "Python", "Go", "Rust"]

2. 剔除连续竖线与首尾空项

当文本开头、末尾有竖线，或者中间出现连续竖线 || 时，split() 会在对应位置产生空字符串 ""：

const pipeData = "|订单01||订单02|订单03|";
const rawArr = pipeData.split('|');

console.log(rawArr);
// 示例输出: ["", "订单01", "", "订单02", "订单03", ""]

// 结合 filter(Boolean) 滤除所有虚值（包括空字符串 ""）
const validArr = pipeData.split('|').filter(Boolean);

console.log(validArr);
// 示例输出: ["订单01", "订单02", "订单03"]

3. 内容中包含转义竖线的进阶处理

如果业务文本本身允许包含被反斜杠转义的竖线内容（例如："商品A|单价\|折扣|备注"，其中 单价\|折扣 属于同一个字段，不应被拆开），则可以使用正则表达式的负向后顾断言（Negative Lookbehind）：

const complexStr = "商品A|单价\|折扣|备注";

// 匹配前面没有反斜杠的竖线：(?<!\\)\|
const parsed = complexStr.split(/(?<!\\)\|/);

console.log(parsed);
// 示例输出: ["商品A", "单价\|折扣", "备注"]

四、逆向操作与工程选型建议

在涉及序列化与反序列化的完整数据闭环中，常常需要把拆分修改后的数组重新组装为竖线连接的字符串。JavaScript 提供了与 split 镜像对称的 Array.prototype.join() 方法：

const tags = ["前端", "Node.js", "架构"];
const joinedStr = tags.join('|');

console.log(joinedStr);
// 示例输出: "前端|Node.js|架构"

性能与选型准则

在日常业务编码中，遵循以下三条准则能够规避大部分性能隐患与解析异常：

• 默认优先使用 str.split('|')：无论是 V8 引擎还是 JavaScriptCore，字面量单字符切分都经过深度汇编优化，性能显著高于正则构建。
• 防御性校验：在对未知接口或用户输入变量执行 split 前，务必确认变量为字符串类型（如 typeof str === 'string'），避免因传入 null 或 undefined 触发 TypeError: str.split is not a function。
• 非必要不滥用正则：仅在确实需要容忍动态空格或零宽断言等复杂边界时，才采用 /\|/ 或 /\s*\|\s*/。

五、总结

解决“js字符串怎么按竖线”的核心结论非常明确：

1. 常规规整数据直接使用 str.split('|')，简洁、高效且语义直观；
2. 若需要正则支持，必须通过反斜杠转义写成 str.split(/\|/)，严禁使用未转义的 /|/；
3. 面对杂乱输入，通过链式调用 .map(s => s.trim()) 与 .filter(Boolean) 清理无效空白与空项；
4. 反向拼接统一使用 arr.join('|')。