JavaScript中字符串截取与连接

JavaScript 中字符串的处理，几乎每天都会碰到。尤其是截取和连接这两个基础操作，看似简单，但细节上的坑还真不少。比如负索引、越界、原字符串不可变这些特性，如果不注意，很容易写出意料之外的 Bug。今天就来系统梳理一下，把 slice、substring、substr 的区别，以及 split 和连接方式，一次性讲透彻。

截取字符串：slice、substring、substr 的区别与用法

这三种方法都不会修改原字符串，而是返回一个新的子串。关键差异在于它们处理参数的方式完全不同。

• slice(start, end)：支持负数索引（从末尾开始往前数），并且 end 位置不包含在内。如果 start 比 end 大，返回空字符串。越界时会自动截断，比如长度为 5 的字符串调用 slice(2, 100)，只会取到末尾。这是最推荐使用的方法，语义直观。
• substring(start, end)：不支持负数，负数会被当作 0 处理。它的一个“特色”是会自动交换 start 和 end 的大小，所以 substring(3, 1) 等价于 substring(1, 3)。这个行为有时候会带来意想不到的结果，需要特别留意。
• substr(start, length)：第二个参数不是结束位置，而是截取的长度。这个方法已经被废弃了（ECMAScript 标准不推荐使用），新项目里应该彻底避开它。

日常开发中统一用 slice() 就够了。举个例子："hello".slice(-3) 返回 "llo"，"world".slice(1, 4) 返回 "orl"——负索引和正索引都能处理，非常顺手。

按分隔符截取：split() 与数组操作结合

split() 按指定分隔符将字符串转成数组，适合提取结构化数据。

• 分隔符可以是字符串或正则表达式，比如 "a,b,c".split(",") 得到 ["a","b","c"]。
• 可选参数 limit 控制返回数组的最大长度，"x-y-z-w".split("-", 2) 只会返回 ["x","y"]。
• 用空字符串调用 split("") 可以逐字符拆分；而 split(/\s+/) 则能处理多个连续空白符。

需要注意一个边界情况：空字符串调用 split("") 返回的是 [""] 而不是空数组，这一点很容易被忽略。

字符串连接：+、concat() 和模板字面量

连接字符串的方式不少，但适用场景各有侧重：

• 加号 (+) 最常用，能隐式转换类型（比如 "num: " + 42 得到 "num: 42"）。不过大量拼接时性能会稍微差一些。
• concat() 可以接收多个参数，比如 "a".concat("b", "c") 得到 "abc"，但现在基本被加号或模板字面量取代了。
• 模板字面量（反引号） 支持嵌入表达式和多行文本，可读性极高：`Hello ${name}! You have ${count} messages.`，是当前最推荐的方式。

实用技巧：安全截取与动态连接

实际项目中经常需要做容错处理，这里分享几个经验：

• 想截取前 n 个字符，直接用 str.slice(0, n) 比 substring 更稳妥，不需要手动判断字符串长度是否足够。
• 想安全地取后几位，用 str.slice(-n)——即使 n 大于字符串长度，也只会返回整个字符串，不会报错。
• 做条件连接时，可以用数组过滤加 join 来避免多余的间隔符，比如 [a, b, c].filter(Boolean).join(", ") 就能优雅地跳过空值。

这些细节不复杂，但一旦忽略，排查起来也挺花时间的。掌握好这些方法，字符串操作就能更从容。