悠悠楠杉
网站页面
JavaScript字符串截取：substring、substr与slice的区别
12/05
![]()
深入解析 JavaScript 中 substring、substr 和 slice 三个字符串截取方法的区别，涵盖语法、参数行为、负索引处理及实际使用建议。
在 JavaScript 开发中，字符串操作是日常工作中再常见不过的任务。当我们需要从一个长字符串中提取部分内容时，substring、substr 和 slice 这三个方法便常常浮现在脑海。它们看似功能相似，都能“截取”字符串，但在细节上却大有不同。如果不加以区分地混用，很容易在边界条件或负索引场景下踩坑。今天，我们就来彻底理清这三个方法的异同，帮助你在实际项目中做出更稳妥的选择。
先从语法结构说起。三者都作用于字符串原型（String.prototype），调用方式类似：
javascript
str.substring(start, end)
str.substr(start, length)
str.slice(start, end)
虽然写法接近，但参数含义完全不同。substring 和 slice 都接受“起始索引”和“结束索引”两个参数，其中结束索引是不包含的（左闭右开区间）。而 substr 的第二个参数是“要截取的字符长度”，不是位置。这一点是最容易混淆的地方。
举个例子，假设我们有一个字符串：
javascript
const str = "Hello, world!";
如果我们想取出 "world"，三种写法如下：
javascript
str.substring(7, 12); // "world"
str.slice(7, 12); // "world"
str.substr(7, 5); // "world"
可以看到，前两者基于位置界定范围，后者则从第7位开始取5个字符。直观上 slice 和 substring 更符合“范围选择”的思维习惯，而 substr 更像“向后抓取固定长度”。
接下来是关键差异：对负值的处理。这是三者分道扬镳的核心所在。
slice 对负数索引的支持最为友好。负数表示从字符串末尾倒数。例如：
javascript
str.slice(-6, -1); // "world"
这表示从倒数第6个字符开始，到倒数第1个字符之前结束，非常直观。这种特性让它在处理动态字符串时极具优势，比如获取文件扩展名或截取末尾几位。
而 substring 在遇到负数时会将其视为 0。也就是说，任何负值都会被“归零”。例如：
javascript
str.substring(-3, 5); // 相当于 substring(0, 5) => "Hello"
不仅如此，substring 还有一个独特行为：它会自动把较小的参数当作起始位置。也就是说，str.substring(5, 2) 不会返回空字符串，而是等价于 str.substring(2, 5)。这种“自动纠正”虽然避免了负向截取的错误，但也可能掩盖逻辑问题。
相比之下，substr 对负起始值的处理介于两者之间。它的第一个参数若为负数，也会从末尾往前数，类似于 slice：
javascript
str.substr(-6, 5); // "world"
但要注意的是，substr 的第二个参数（长度）如果为负，结果将为空字符串，因为它无法截取“负长度”的内容。
还有一个重要事实：substr 已被官方标记为“遗留特性”（legacy feature）。MDN 文档明确建议优先使用 slice，因为 substr 可能在未来被逐步淘汰。虽然目前所有主流浏览器仍支持它，但从长远维护和代码规范角度考虑，避免使用它是更明智的选择。
性能方面，三者在现代 JavaScript 引擎中差异极小，几乎可以忽略。真正影响代码质量的是可读性和一致性。slice 语义清晰、行为统一，且同时适用于字符串和数组，是真正的“多面手”。而 substring 虽然安全，但其对负值的“静默归零”可能导致意料之外的结果，尤其在动态计算索引时容易出错。
总结一下，在日常开发中，建议始终优先使用 slice。它不仅语法直观、支持负索引，还能无缝迁移到数组操作中。substring 可以作为备选，但需警惕其对参数顺序的自动调整。至于 substr，除非维护老项目，否则应尽量避免使用。
理解这些细微差别，不只是为了写出正确的代码，更是为了培养对语言特性的敏感度。在 JavaScript 这样灵活又充满陷阱的语言中，掌握基础 API 的真实行为，往往是写出健壮程序的第一步。
