JavaScript 字符串截取神器：深入解析 substring()，兼谈与 slice()、substr() 的异同175

哈喽，各位前端爱好者！我是您的中文知识博主。在前端开发中，字符串操作是家常便饭，而其中最常用的操作之一就是“截取”字符串。今天，我们要深入探讨的正是 JavaScript 中一个强大而又容易让人混淆的字符串截取方法——`substring()`。它就像一把锋利的剪刀，能精准地剪下你想要的字符串片段。但你知道它与`slice()`、`substr()`之间有哪些微妙的差异吗？又如何在不同场景下选择最合适的工具呢？别急，本文将为您一一揭秘！

一、`substring()` 方法的庐山真面目

`substring()` 方法用于提取字符串中介于两个指定下标之间的字符。简单来说，它会返回一个全新的子字符串，而原始字符串本身不会被修改。这是所有字符串方法的一个共同特点：它们返回新字符串，而不是修改原字符串。

基本语法：

(indexStart[, indexEnd])
`str`: 要操作的字符串。
`indexStart`: 必需。一个整数，表示子字符串的起始位置（包含该位置的字符）。
`indexEnd`: 可选。一个整数，表示子字符串的结束位置（不包含该位置的字符）。如果省略，则子字符串将一直延伸到原始字符串的末尾。

基础用法示例：

让我们通过几个例子来快速理解它的基本行为：const greeting = "Hello, JavaScript!";
// 1. 只指定起始位置，截取到字符串末尾
let part1 = (7); // 从索引7开始，截取到末尾
(part1); // 输出: "JavaScript!"
// 2. 指定起始和结束位置
let part2 = (0, 5); // 从索引0开始，到索引5之前结束
(part2); // 输出: "Hello"
// 3. 截取单个字符（起始索引和结束索引相差1）
let charA = (1, 2);
(charA); // 输出: "e"
// 4. 尝试截取整个字符串 (0 到 length)
let fullString = (0, );
(fullString); // 输出: "Hello, JavaScript!"

二、`substring()` 的“非凡”行为：你可能不知道的细节

`substring()` 并非只是简单的截取，它在处理某些特殊参数时有着自己独有的逻辑。理解这些“非凡”行为，能帮助我们避免潜在的bug，并更灵活地运用它。

1. 自动交换起始和结束位置

这是 `substring()` 与 `slice()` 最主要的区别之一！如果 `indexStart` 大于 `indexEnd`，`substring()` 会自动交换这两个参数的值，然后进行截取。const str = "JavaScript";
// indexStart (7) 大于 indexEnd (3)，substring会自动交换它们，变为 substring(3, 7)
let result1 = (7, 3);
(result1); // 输出: "aScr"
// 对比正常的顺序
let result2 = (3, 7);
(result2); // 输出: "aScr"

可以看到，`substring(7, 3)` 和 `substring(3, 7)` 的结果是完全一样的。这对于健壮性代码来说可能是一个便利，但也可能与你基于其他语言的直觉相悖。

2. 负数参数的处理

`substring()` 不接受负数作为索引。如果传入负数，它会被视为 `0`。const str = "JavaScript";
// 负数参数被视为 0
let result1 = (-5, 5); // 相当于 substring(0, 5)
(result1); // 输出: "JavaS"
let result2 = (5, -1); // 负数 -1 被视为 0，又因为 5 > 0，所以交换参数，相当于 substring(0, 5)
(result2); // 输出: "JavaS"

3. 非数字参数的处理

如果传入的参数不是数字，`substring()` 会尝试将其转换为数字。如果转换失败（例如传入 `undefined`、`null`、`'abc'` 等），该参数会被视为 `0`。const str = "JavaScript";
let result1 = ("hello", 4); // "hello" 无法转为数字，被视为 0，相当于 substring(0, 4)
(result1); // 输出: "Java"
let result2 = (2, null); // null 被视为 0，又因为 2 > 0，所以交换参数，相当于 substring(0, 2)
(result2); // 输出: "Ja"
let result3 = (undefined, 5); // undefined 被视为 0，相当于 substring(0, 5)
(result3); // 输出: "JavaS"

4. 参数超出字符串长度的处理

如果任一参数超出了字符串的长度，它会被视为等于字符串的长度。const str = "JavaScript"; // 长度为 10
let result1 = (5, 100); // 100 超过长度，被视为 10，相当于 substring(5, 10)
(result1); // 输出: "Script"
let result2 = (15); // 15 超过长度，被视为 10，相当于 substring(10)
(result2); // 输出: "" (从索引10开始到末尾，没有字符)

三、拨开迷雾：`substring()`、`slice()`、`substr()` 的深度对比

在 JavaScript 中，除了 `substring()`，我们还有 `slice()` 和 `substr()` 这两个方法也能进行字符串截取。它们之间既有相似之处，又有关键差异，常常是面试高频考点，也是实际开发中容易混淆的地方。理解它们的不同，能帮助我们选择最合适的工具。

1. `substring()` vs `slice()`

这是最常见的对比！它们大多数时候行为一致，但有两大关键区别：

相似点：
都接受两个参数：`indexStart` (包含) 和 `indexEnd` (不包含)。
如果省略 `indexEnd`，都会截取到字符串末尾。

关键区别：

负数参数处理：

`slice()`: 负数参数表示从字符串末尾开始计算的偏移量。例如，`-1` 表示倒数第一个字符，`-2` 表示倒数第二个字符。
`substring()`: 负数参数被视为 `0`。



`indexStart` 大于 `indexEnd`：

`slice()`: 如果 `indexStart` 大于 `indexEnd`，会返回一个空字符串。
`substring()`: 会自动交换这两个参数，然后进行截取。



const text = "Hello World"; // 长度为 11
// 对比 1: 负数参数
("--- 负数参数对比 ---");
((-5)); // 输出: "World" (从倒数第5个字符开始)
((-5)); // 输出: "Hello World" (负数被视为0，相当于 substring(0))
((0, -6)); // 输出: "Hello" (从0开始，到倒数第6个字符之前)
((0, -6)); // 输出: "" (负数被视为0，0 > 0，所以交换参数后仍为 substring(0, 0))
// 对比 2: indexStart > indexEnd
("--- indexStart > indexEnd 对比 ---");
((5, 0)); // 输出: "" (slice直接返回空字符串)
((5, 0)); // 输出: "Hello" (substring自动交换参数，相当于 substring(0, 5))

何时选择？
如果你需要处理负数索引（从末尾开始截取），或者希望在 `indexStart > indexEnd` 时得到空字符串作为明确的错误信号，那么 `slice()` 是更好的选择。
如果你希望代码在 `indexStart` 和 `indexEnd` 顺序颠倒时也能正常工作（自动修正），或者对负数索引不敏感（都当 `0` 处理），那么 `substring()` 可能是你的选择。

2. `substring()` vs `substr()` (⚠️ 已废弃，不推荐使用)

`substr()` 是一个较老的字符串方法，现在已被标记为废弃（deprecated），不建议在新代码中使用。但了解它的行为，可以帮助我们理解一些遗留代码。

关键区别：

第二个参数的含义：

`substring()`: 第二个参数是截取的结束索引（不包含）。
`substr()`: 第二个参数是截取的长度。



负数参数处理：

`substring()`: 负数参数被视为 `0`。
`substr()`: 第一个参数（起始位置）的负数表示从字符串末尾开始计算的位置；第二个参数（长度）的负数会被视为 `0`。



const text = "JavaScript"; // 长度为 10
// 对比 1: 第二个参数的含义
("--- 第二个参数含义对比 ---");
((4, 7)); // 从索引4开始，到索引7之前结束，长度是 3
// 输出: "Scr"
((4, 3)); // 从索引4开始，截取长度为 3 的子字符串
// 输出: "Scr"
// 尽管结果相同，但第二个参数的含义完全不同！
// 对比 2: 负数参数（substr() 的负数行为更复杂，且已废弃，简单演示）
("--- 负数参数（substr）对比 ---");
((-4, 3)); // 从倒数第4个字符开始，截取长度为3。
// 相当于从 'c' 开始，截取 'cri'
// 输出: "cri"
((-4, 3)); // 负数被视为0，0 > 3 会交换，所以是 substring(0, 3)
// 输出: "Jav"

为何不推荐使用 `substr()`？

`substr()` 已经从 Web 标准中移除，并且在未来的 ECMAScript 版本中可能会被完全废弃。为了代码的未来兼容性和标准化，我们应该优先使用 `slice()` 或 `substring()`。

四、`substring()` 的应用场景与最佳实践

尽管 `substring()` 有其独特的行为，但它在某些场景下仍然非常实用。以下是一些常见的应用场景和使用建议：

应用场景：

固定长度的文本截取： 当你需要从字符串的某个固定位置开始截取一定长度的文本时。例如，截取文件名的扩展名（尽管 `split('.')` 可能是更好的选择），或者从一个固定格式的ID中提取部分信息。
const productId = "PROD-XYZ-12345";
const categoryCode = (5, 8); // 提取 "XYZ"
(categoryCode); // 输出: "XYZ"



截取 URL 参数： 在不使用 URL API 的简单场景下，可能需要手动截取 URL 中的查询参数。
const url = "/page?id=123&name=test";
const queryStartIndex = ('?') + 1;
if (queryStartIndex > 0) {
const queryString = (queryStartIndex);
(queryString); // 输出: "id=123&name=test"
}



用户输入内容限制： 当用户输入内容过长时，可能需要截取显示部分内容。
const longText = "这是一段很长很长的文本，可能会超出显示区域，我们需要对它进行截断处理。";
const maxLength = 20;
if ( > maxLength) {
const truncatedText = (0, maxLength) + "...";
(truncatedText); // 输出: "这是一段很长很长的文本，可能会..."
}

最佳实践与小贴士：

明确意图： 在使用 `substring()`、`slice()` 或 `substr()` 之前，先明确你希望如何处理负数索引和 `indexStart > indexEnd` 的情况。这有助于你选择最适合的方法。
优先使用 `slice()`： 在大多数情况下，`slice()` 的行为更直观，尤其是在处理负数索引时。如果你没有 `substring()` 那些特殊行为的特定需求，`slice()` 是一个更稳妥的选择。
避免使用 `substr()`： 鉴于 `substr()` 已被废弃，应尽量避免在新代码中使用它。
检查边界条件： 在实际开发中，输入的字符串长度可能不确定。在使用截取方法前，最好检查字符串是否为空或长度是否符合预期，避免不必要的错误。
注意 UTF-16 编码： JavaScript 字符串内部使用 UTF-16 编码。对于包含补充字符（如一些 emoji 或不常用汉字）的字符串，单个字符可能占用两个“代码单元”。`substring()` 是按代码单元索引来截取的，这可能导致在处理某些特殊字符时产生非预期的视觉效果。但在绝大多数常见场景下，这不会成为问题。

五、总结

`substring()` 作为 JavaScript 字符串操作的成员之一，拥有其独特的行为模式。它在处理参数时表现出的“宽容”性（自动交换参数、将负数和非数字视为 0）是其鲜明的特点。理解这些特性，并将其与 `slice()` 和 `substr()` 进行对比，能帮助我们更全面、更准确地掌握 JavaScript 字符串截取的方法。

在日常开发中，建议优先选择 `slice()`，因为它在处理负数索引时更为灵活且符合直觉。但如果你确实需要 `substring()` 的自动参数交换特性，或者你的代码库中有大量 `substring()` 的使用，那么对其深入理解将大有裨益。熟练掌握这些字符串方法，你的 JavaScript 开发之路将更加顺畅！

2025-12-13

---

下一篇：JavaScript数字键盘事件：精准捕获与优雅控制，提升用户体验的秘密武器！