JavaScript字符串截取与连接方法详解

在 JavaScript 中处理字符串是日常开发中几乎每天都会遇到的任务，尤其是截取与连接这两个基础操作。虽然它们看似简单，但细节中隐藏着不少陷阱，例如负索引的处理、越界行为、以及字符串不可变性等特性。如果稍不注意，就很容易写出意料之外的 Bug。今天我们将系统性地梳理这些方法，深入剖析 slice、substring、substr 之间的区别，以及 split 和多种字符串连接方式的正确用法，帮你一次性彻底掌握。

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

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

• slice(start, end)：支持负数索引（从末尾向前计数），并且 end 位置的字符不包含在结果中。如果 start 大于 end，则返回空字符串。当参数超出字符串长度时，会自动截断到末尾，例如长度为 5 的字符串调用 slice(2, 100) 只会返回从索引 2 到末尾的部分。这是最推荐使用的方法，语义清晰且直观。
• 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(", ") 就能优雅地跳过空值。

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