JavaScript 字符串截取：深入解析 substring 的奥秘与实用技巧298

嗨，各位前端小伙伴！我是你们的中文知识博主。在日常的JavaScript开发中，我们与字符串打交道的频率高得惊人。无论是用户输入校验、数据展示格式化，还是URL参数解析，字符串操作都是不可或缺的一环。今天，我们要深入探讨的，就是字符串操作中最常用也最容易产生困惑的成员之一——substring()方法。别小看它，虽然看似简单，但其背后的一些“小脾气”和“包容性”往往能让初学者感到迷茫，甚至老手也可能踩坑。那么，就让我们一起揭开substring()的神秘面纱，掌握它的精髓，让它真正成为你手中的利器吧！

一、substring() 是什么？——定义与基本语法

首先，我们来认识一下substring()。它是一个字符串原型上的方法，用于提取字符串中介于两个指定索引之间的字符。它不会改变原始字符串，而是返回一个新的子字符串。

它的基本语法如下：

(indexStart[, indexEnd])


indexStart (必填)：一个非负整数，表示子字符串的起始索引。该索引处的字符是包含在结果中的。
indexEnd (可选)：一个非负整数，表示子字符串的结束索引（不包含该索引处的字符）。如果省略此参数，则子字符串将延伸到字符串的末尾。

举个最简单的例子：

const str = "Hello World!";
const sub1 = (0, 5); // "Hello"
const sub2 = (6); // "World!"
(sub1); // 输出: Hello
(sub2); // 输出: World!

二、substring() 的“小脾气”与“包容性”——工作原理与特性详解

substring()之所以让人爱恨交加，正是因为它在处理一些边界情况时，展现出了独特的“包容性”，这些特性是理解它的关键：

1. 自动交换索引：indexStart 和 indexEnd 谁大谁小无所谓！

这是substring()最显著也最与众不同的一个特性。如果indexStart大于indexEnd，substring()会自动将这两个参数互换位置，然后按照从小到大的顺序进行截取。

const str = "JavaScript";
const result1 = (5, 0); // 'JavaS' (相当于 (0, 5))
const result2 = (7, 3); // 'aScr' (相当于 (3, 7))
(result1); // 输出: JavaS
(result2); // 输出: aScr

这个特性意味着你不必担心传入的起始索引是否大于结束索引，substring()会帮你处理好。

2. 负数索引：统统当成 0 处理！

与slice()方法不同，substring()在遇到负数索引时，不会从字符串末尾开始计算，而是简单地将所有负数索引都视为 0。

const str = "JavaScript";
const result = (-5, 5); // 'JavaS' (相当于 (0, 5))
(result); // 输出: JavaS

3. 超出范围的索引：自动钳制到字符串长度！

如果传入的索引值小于 0 或大于字符串的长度，substring()会将其“钳制”到 0 或字符串的长度。

小于 0 的索引被视为 0。
大于字符串长度的索引被视为字符串的长度。


const str = "Hello";
const result1 = (-10, 2); // 'He' (相当于 (0, 2))
const result2 = (1, 100); // 'ello' (相当于 (1, 5))
const result3 = (10, 15); // '' (相当于 (5, 5))
(result1); // 输出: He
(result2); // 输出: ello
(result3); // 输出: (空字符串)

4. 只传入一个参数：从起始索引截取到末尾！

当只传入indexStart一个参数时，substring()会从indexStart位置开始，一直截取到字符串的末尾。

const str = "Learning JavaScript";
const result = (9); // "JavaScript"
(result); // 输出: JavaScript

5. 返回新字符串，不修改原字符串！

这一点非常重要，也是所有字符串操作方法的通用特性。substring()是一个纯函数，它永远不会改变调用它的原始字符串，而是返回一个全新的字符串。

const originalStr = "Immutable";
const newStr = (0, 3);
(originalStr); // 输出: Immutable (原始字符串未变)
(newStr); // 输出: Imm

三、substring() 的实战应用场景

了解了substring()的特性，我们来看看它在实际开发中能派上什么用场：

1. 截取固定长度的字符串

例如，我们想获取字符串的前N个字符：

function getPrefix(text, length) {
return (0, length);
}
const message = "欢迎来到我的博客！";
(getPrefix(message, 5)); // 输出: 欢迎来到我

2. 截取从某个位置到末尾的字符串

例如，获取文件名中的扩展名（假设文件名中只有一个点）：

function getFileExtension(filename) {
const dotIndex = ('.');
if (dotIndex !== -1) {
return (dotIndex + 1);
}
return ''; // 没有扩展名
}
(getFileExtension("")); // 输出: jpg
(getFileExtension("")); // 输出: pdf
(getFileExtension("archive")); // 输出: (空字符串)

3. 字符串长度限制与省略号

在显示用户生成内容时，经常需要截取长文本并加上省略号：

function truncateText(text, maxLength) {
if ( > maxLength) {
return (0, maxLength - 3) + "..."; // 预留3个字符给省略号
}
return text;
}
const longText = "这是一段非常长的文本，需要被截断显示。";
(truncateText(longText, 10)); // 输出: 这是一段非常...
(truncateText("短文本", 10)); // 输出: 短文本

四、substring() 与 slice()、substr() 的异同

在JavaScript中，除了substring()，还有另外两个字符串截取方法：slice()和substr()。它们功能相似，但细节之处却有不同，理解这些差异能帮助你做出正确的选择。

1. slice(indexStart[, indexEnd])

slice()方法与substring()非常相似，它也从indexStart截取到indexEnd（不包含）。主要区别在于：

负数索引：slice()支持负数索引。负数索引会从字符串的末尾开始计算。例如，slice(-3)会截取最后三个字符。
索引交换：slice()不会自动交换indexStart和indexEnd。如果indexStart大于indexEnd，它会返回一个空字符串。


const str = "abcdefg";
((5, 2)); // 'cde' (自动交换为 substring(2, 5))
((5, 2)); // '' (不会交换，起始大于结束，返回空)
((-3, 5)); // 'abcde' (负数当0，为 substring(0, 5))
((-3, 5)); // 'de' (从倒数第三个(e)开始，到第五个(f)之前)

2. substr(indexStart[, length]) (已废弃)

substr()方法与前两者不同，它的第二个参数是截取的长度，而不是结束索引。

indexStart：起始索引。
length：要截取的字符数量。
已废弃：需要注意的是，substr()已经被标记为废弃（deprecated），不推荐在新代码中使用。尽管它目前仍然有效，但未来可能会被移除。


const str = "abcdefg";
((2, 3)); // 'cde' (从索引2开始，截取3个字符)
((2, 5)); // 'cde' (从索引2到索引5(不含))
((2, 5)); // 'cde' (从索引2到索引5(不含))

何时选择哪个？

如果你需要高度容错性，不希望因为索引顺序或负数而报错，substring()是一个不错的选择，它的“包容性”能减少一些意外情况。
如果你需要更精确的控制，特别是需要利用负数索引从字符串末尾开始计算，或者希望在indexStart > indexEnd时得到空字符串而非交换后的结果，那么slice()是更好的选择。
避免使用substr()，因为它是已废弃的方法。

五、使用建议与注意事项

1. 理解索引：始终记住substring()的indexStart是包含的，indexEnd是不包含的。这是所有字符串截取方法（除了substr的第二个参数）的通用约定。
2. 容错性并非万能：虽然substring()的容错性很高，但在编写代码时，仍然建议传入正确的、有意义的索引，以提高代码的可读性和可维护性。过度依赖其自动纠正行为，可能会让其他人难以理解你的意图。
3. 性能考量：对于大多数Web应用场景，这些字符串截取方法的性能差异微乎其微，无需过度优化。但在处理海量文本数据或进行大量循环操作时，了解其内部实现并选择最合适的方法可能有所帮助。
4. 与indexOf()/lastIndexOf()配合使用：当需要根据特定字符或子字符串来截取时，substring()常常与indexOf()或lastIndexOf()方法组合使用，以动态确定截取的起始和结束位置。

const url = "/path/to/?param=value";
const domain = (('//') + 2, ('/', ('//') + 2));
(domain); // 输出:

六、总结

至此，我们已经全面而深入地探讨了JavaScript中的substring()方法。我们了解了它的基本用法、独有的“包容性”特性（索引自动交换、负数当0、超出范围钳制），以及在实际开发中的应用场景。同时，我们也对比了它与slice()和substr()的区别，并给出了选择建议。

掌握substring()不仅能让你在字符串操作上更加得心应手，也能加深你对JavaScript字符串处理机制的理解。希望这篇博客能帮助你彻底驯服这个“小脾气”但又“很包容”的substring()，让你的前端开发之路更加顺畅！如果你有任何疑问或者使用substring()的独特技巧，欢迎在评论区留言分享，我们一起交流学习！

2025-10-26

---

上一篇：深入剖析JavaScript数字红包：从前端交互到核心算法的实现

下一篇：揭秘 JavaScript 代码运行的『时间奥秘』：从性能测量到高效算法实践