避免使用废弃的 substr()：JavaScript 字符串截取首选 slice() 与 substring() 指南

substr() 已从 Web 标准中删除。虽然一些浏览器目前仍然支持它，但它随时可能被停止支持。你应该使用 slice() 作为首选替代方案。

为什么 substr() 会被废弃？

substr() 被废弃的核心原因在于其 API 设计存在不一致性和潜在的歧义，这容易导致开发者在不同方法间产生混淆。让我们先对比一下这三个方法的签名：

• slice(startIndex, endIndex)
• substring(startIndex, endIndex)
• substr(startIndex, length)

可以看到，slice() 和 substring() 的第二个参数都是结束索引（且不包含该索引位置的字符），而 substr() 的第二个参数却是要截取的长度。

这种设计上的不一致性常常让开发者，尤其是在快速编码或维护遗留代码时，不经意间写错逻辑。为了代码的长期健康和可维护性，遵循标准、使用行为更可预测的方法是更好的选择。

新选择：slice() 和 substring()

既然 substr() 不再被推荐，我们应该转向它的两个“兄弟”方法。它们不仅是现行标准的一部分，而且功能更强大，行为也更一致。

1. slice(startIndex, endIndex)

slice() 是目前最灵活、最常用的字符串截取方法，也是处理JavaScript字符串时的首选。

const str = "JavaScript";

// 基本用法
console.log(str.slice(0, 4));  // "Java"

// 省略 endIndex，会截取到字符串末尾
console.log(str.slice(4));     // "Script"

// 使用负数索引（从末尾开始计算，非常实用！）
console.log(str.slice(-6));    // "Script" (从倒数第 6 个字符开始)
console.log(str.slice(0, -6)); // "Java" (从头开始，到倒数第 6 个字符结束)

2. substring(startIndex, endIndex)

substring() 与 slice() 在正数参数时行为相似，但它有一个特殊机制：如果 startIndex 大于 endIndex，它会自动交换两个参数的位置。

const str = "JavaScript";

// 基本用法
console.log(str.substring(0, 4)); // "Java"

// start > end，参数会自动交换位置
console.log(str.substring(4, 0)); // "Java" (等同于 substring(0, 4))

// 负数参数会被视为 0
console.log(str.substring(-5, 4)); // "Java" (等同于 substring(0, 4))

需要注意的是，substring() 的自动交换参数特性以及对负数参数的处理（将负数视为 0）有时反而会引入困惑。因此，在大多数情况下，更推荐使用行为更加严格和直观的 slice() 方法。

总结

代码不仅仅是写给机器执行的，更是写给人阅读和维护的。放弃使用已废弃的 substr()，转而拥抱标准化的 slice() 和 substring()，这不仅仅是跟上技术更新的步伐，更是为了写出更清晰、更健壮、也更容易被其他开发者理解的代码。如果你想了解更多类似的前端最佳实践，可以到云栈社区和更多开发者一起交流探讨。