JavaScript 字符串截取神器：深入解析 substring 方法与 slice、substr 对比388

好的，各位前端探索者们！我是你们的知识博主，今天我们来深入剖析一个在JavaScript字符串操作中“出镜率”极高、又有些“个性”的方法——`substring`。
你可能因为一个手误，搜索了`[javascript snbstring]`，没关系，这正是我们今天的主角！它的真身是 `substring`。别看它名字简单，里面可是藏着不少学问，特别是和它的“兄弟” `slice`、`substr` 比起来，更是各有千秋。
跟着我，一起揭开 `substring` 的神秘面纱，掌握它的“脾气秉性”，让你在字符串处理上游刃有余！

哈喽，各位前端爱好者！我是你们的知识博主，很高兴又和大家见面了。今天我们要聊的话题，是JavaScript中字符串操作的“常客”——`substring()` 方法。可能你正是在搜索引擎中输入了`[javascript snbstring]`，误打误撞来到这里。没关系，我们今天要聊的正是它正确的拼写：`substring`。

在前端开发中，字符串的处理无处不在，无论是用户输入、数据展示，还是URL解析、文件操作，都离不开对字符串的截取、拼接和查找。而`substring()`就是我们进行字符串截取时，最常用的“工具”之一。但它究竟怎么用？有哪些“小秘密”？和它的两位“兄弟”`slice()`、`substr()`又有什么区别呢？今天，我将带你一探究竟。

一、`substring()` 的核心用法：截取你的字符串

首先，我们来认识一下`substring()`的基本面貌。它的语法非常简洁：(indexStart[, indexEnd])

参数解释：
`indexStart`：必需。一个非负整数，表示子字符串的起始索引（包含该位置的字符）。
`indexEnd`：可选。一个非负整数，表示子字符串的结束索引（不包含该位置的字符）。

没错，和大多数索引操作一样，`indexStart` 是包含的，而 `indexEnd` 是不包含的。这意味着你截取的子字符串，将从 `indexStart` 位置开始，一直到 `indexEnd - 1` 位置结束。

来看一个最简单的例子：const str = "Hello World";
const subStr1 = (0, 5); // 从索引0开始，到索引5之前（不包含5）
(subStr1); // 输出: "Hello"
const subStr2 = (6, 11); // 从索引6开始，到索引11之前
(subStr2); // 输出: "World"
const subStr3 = (6); // 如果省略 indexEnd，则截取到字符串末尾
(subStr3); // 输出: "World"

可以看到，`substring()` 会返回一个新的字符串，原始字符串并不会被修改。这一点对于非基本类型的数据结构来说尤为重要，因为它避免了副作用。

二、`substring()` 的“个性”与“小秘密”

光知道基本用法可不够，`substring()` 最有意思的地方在于它对参数的一些“宽容”处理。这些处理方式，往往是它与 `slice()` 区别开来的关键点。我们逐一拆解：

1. 参数顺序颠倒？没问题，我帮你对调！

当 `indexStart` 大于 `indexEnd` 时，`substring()` 会自动将这两个参数对调，然后按照较小的索引作为起始位置，较大的索引作为结束位置进行截取。const str = "JavaScript";
const subStr = (5, 0); // 正常逻辑应该是从索引5到0，但substring会交换它们
(subStr); // 输出: "JavaS" (相当于 (0, 5))

这是 `substring()` 一个非常独特的特性，它在一定程度上增加了代码的健壮性，减少了因为参数顺序错误而导致的bug。

2. 负数参数？我只认识 0！

如果 `indexStart` 或 `indexEnd` 中传入了负数，`substring()` 会把这些负数统一视为 `0`。这意味着它不会从字符串末尾开始计数。const str = "JavaScript";
const subStr1 = (-3, 4); // -3 被视为 0，相当于 (0, 4)
(subStr1); // 输出: "Java"
const subStr2 = (3, -1); // -1 被视为 0，然后和 3 对调，相当于 (0, 3)
(subStr2); // 输出: "Jav"

这与一些其他语言或JavaScript中其他方法（如 `slice()`）处理负数的方式截然不同，所以要特别留意！

3. 参数越界？我会帮你“修剪”！

如果 `indexStart` 或 `indexEnd` 大于字符串的长度，`substring()` 会将其视为字符串的长度。如果小于0（前面说过，会当成0）。这相当于对参数进行了边界检查和修正。const str = "JavaScript";
const subStr1 = (0, 100); // 100 大于字符串长度，被视为 10
(subStr1); // 输出: "JavaScript" (整个字符串)
const subStr2 = (50, 60); // 50 和 60 都大于字符串长度，被视为 10，然后交换为 (10, 10)
(subStr2); // 输出: "" (空字符串)
const subStr3 = (5, 30); // 30 被视为 10
(subStr3); // 输出: "Script" (相当于 (5, 10))

这种“修剪”行为进一步增强了 `substring()` 的健壮性，即使传入了不合理的索引，它也能尽力返回一个有意义的结果（或空字符串）。

三、`substring()` vs. `slice()` vs. `substr()`：三兄弟的爱恨情仇

既然提到了 `substring()` 的“个性”，那就不得不搬出它的两位“兄弟”——`slice()` 和 `substr()`，它们都用于字符串截取，但行为却大相径庭，理解它们之间的差异，是成为JS高手的必经之路。

1. `(indexStart[, indexEnd])`

`slice()` 的语法与 `substring()` 几乎相同，但它在处理参数上更为“严谨”：
负数参数： `slice()` 可以接受负数作为参数，表示从字符串的末尾开始计数。例如，`-1` 表示倒数第一个字符，`-2` 表示倒数第二个字符。
参数顺序： `slice()` 不会像 `substring()` 那样自动交换参数。如果 `indexStart` 大于 `indexEnd`，它会直接返回一个空字符串 `""`。
越界参数： 行为与 `substring()` 类似，会将大于字符串长度的参数视为字符串长度，小于负数的参数视为0。

const str = "JavaScript";
// 负数参数：从末尾开始计数
((-6, -1)); // 输出: "Scrip" (从倒数第6个字符到倒数第1个字符之前)
((0, -1)); // 输出: "JavaScrip" (从开头到倒数第一个字符之前)
((-4)); // 输出: "ript" (从倒数第4个字符到末尾)
// 参数顺序：不会交换
((5, 0)); // 输出: "" (空字符串)
((8, 2)); // 输出: "" (空字符串)

总结： `slice()` 更“符合直觉”，特别是处理负数索引时非常方便。如果需要从字符串末尾截取，`slice()` 是更好的选择。但要记住它不会交换参数，如果 `indexStart` 大于 `indexEnd` 会返回空。

2. `(indexStart[, length])`

这是最“老”的一个方法，也是目前不推荐使用（在MDN上已经被标记为废弃）的方法。它的语法与前两者完全不同：(indexStart[, length])

`indexStart`：必需。起始索引。
`length`：可选。要截取的字符数量。

它的行为特点：
负数 `indexStart`： 与 `slice()` 类似，会从字符串末尾开始计数。
负数 `length`： 视为 `0`。
省略 `length`： 截取到字符串末尾。

const str = "JavaScript";
((4, 6)); // 输出: "Script" (从索引4开始，截取6个字符)
((0, 4)); // 输出: "Java"
// 负数 indexStart：从末尾开始计数
((-6, 3)); // 输出: "Scr" (从倒数第6个字符开始，截取3个字符)
((-4)); // 输出: "ript" (从倒数第4个字符开始，截取到末尾)

总结： `substr()` 的优点是可以用长度来指定截取范围，这在某些场景下可能更直观。然而，由于它已经被标记为废弃，强烈建议在新的代码中避免使用它，并逐步将现有代码迁移到 `substring()` 或 `slice()`。

差异速览表

为了更清晰地对比，我们来个速览表：

特性 / 方法
`substring()`
`slice()`
`substr()` (已废弃)

参数
`(start, end)`
`(start, end)`
`(start, length)`

`start > end`
自动交换参数
返回 `""`
不适用 (`start, length` 模式)

负数 `start`
视为 `0`
从末尾计数
从末尾计数

负数 `end` / `length`
`end` 视为 `0`
`end` 从末尾计数
`length` 视为 `0`

推荐使用
推荐
推荐
不推荐，请避免

四、`substring()` 的实际应用场景

理解了 `substring()` 的特性，我们来看看它在实际开发中能帮我们做些什么：

1. 截取文件名或扩展名

假设你有一个文件名字符串，需要提取不带扩展名的部分或者只提取扩展名。const fileName = "";
const dotIndex = ('.');
if (dotIndex !== -1) {
const name = (0, dotIndex);
const extension = (dotIndex + 1);
(`文件名: ${name}`); // 输出: "my_awesome_image"
(`扩展名: ${extension}`); // 输出: "jpg"
} else {
("没有扩展名");
}

2. URL 参数提取（简化版）

虽然更复杂的URL解析会使用 `URL` 对象或正则表达式，但对于简单的参数截取，`substring()` 也能派上用场。const url = "/search?query=javascript&page=1";
const queryStartIndex = ('?');
if (queryStartIndex !== -1) {
const queryString = (queryStartIndex + 1);
(`查询字符串: ${queryString}`); // 输出: "query=javascript&page=1"
// 进一步解析 'query=javascript'
const queryParam = (('query=') + 'query='.length, ('&'));
(`查询关键词: ${queryParam}`); // 输出: "javascript"
}

3. 文本摘要/预览

显示一篇文章的简短预览时，经常需要截取前N个字符。const longText = "JavaScript 是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。它是动态的，具有基于原型的对象和一流的函数。";
const maxLength = 30;
if ( > maxLength) {
const summary = (0, maxLength) + "...";
(summary); // 输出: "JavaScript 是一种具有函数优先的轻量级、解释型或即时编译型的..."
} else {
(longText);
}

五、注意事项与最佳实践

掌握了 `substring()` 的方方面面，为了写出更健壮、更易读的代码，这里有几点建议：
明确意图： 在使用 `substring()`、`slice()` 或 `substr()` 之前，先明确你的截取需求。是需要从头开始截取固定长度？还是需要处理负数索引？
理解参数： 务必清楚每个方法的参数含义和它们对负数、越界值以及参数顺序的处理方式。特别是 `substring()` 的参数自动交换行为，有时会让人感到意外。
优先 `substring()` 或 `slice()`： 考虑到 `substr()` 的废弃状态，请优先选择 `substring()` 或 `slice()`。
何时选择 `substring()`：

你不需要处理负数索引。
你希望参数顺序错误时，方法能自动帮你纠正（`start` 和 `end` 对调）。
你希望参数越界时，方法能进行“友好”的边界修正。

何时选择 `slice()`：

你需要利用负数索引从字符串末尾开始截取。
你希望 `indexStart` 大于 `indexEnd` 时，明确地返回一个空字符串，而不是自动交换参数。

输入验证： 在实际应用中，尤其是在处理用户输入或外部数据时，始终对索引参数进行验证，以防止潜在的错误或意外行为。