🚫 90% 开发者还在用的 substr()
,浏览器早已废弃
在前端开发中,字符串截取几乎是每天都会遇到的操作。然而,很多人还在用一个已经被 Web 标准移除的 API——substr()
。虽然大多数浏览器目前依旧“兼容”它,但它随时可能被彻底删除,一旦发生,你的线上代码可能直接崩溃。
首选替代方案:
slice()
(推荐) 或substring()
(次选)
1. 为什么 substr()
会被废弃?
核心原因是它的 API 设计存在不一致性和歧义,与其他字符串截取方法相比,容易让人混淆。
JavaScript 提供了三种常见的截取方法:
slice(startIndex, endIndex)
substring(startIndex, endIndex)
substr(startIndex, length)
区别在于第二个参数的含义:
方法 | 第二个参数 | 支持负数索引 | 特殊行为 | 状态 |
---|---|---|---|---|
slice(start, end) | 结束索引(不包含) | ✅ | 行为严格可预测 | 推荐 |
substring(start, end) | 结束索引(不包含) | ❌ | 自动交换参数,负数当作 0 | 次选 |
substr(start, length) | 截取长度 | ❌ | 与前两个参数意义不同 | ❌ 已废弃 |
这种设计不一致,在快速编码或维护旧代码时,尤其容易写错逻辑。
2. 新选择:slice()
和 substring()
既然 substr()
已不在标准中,我们应该转向它的两个兄弟。
✅ slice(startIndex, endIndex)
— 首选
slice()
是目前最灵活、直观的字符串截取方法。
const str = "JavaScript";
// 基本用法
console.log(str.slice(0, 4)); // "Java"
// 省略 endIndex
console.log(str.slice(4)); // "Script"
// 使用负数索引
console.log(str.slice(-6)); // "Script"
console.log(str.slice(0, -6)); // "Java"
特点:
- 支持负数索引(从字符串末尾开始计算)
- 行为严格,参数顺序不会自动交换
- 可预测性强,适合维护大型项目
🔄 substring(startIndex, endIndex)
— 次选
substring()
与 slice()
类似,但有两个特殊规则:
const str = "JavaScript";
// start > end 会自动交换
console.log(str.substring(4, 0)); // "Java"
// 负数当作 0
console.log(str.substring(-5, 4)); // "Java"
特点:
- 不支持负数索引
- 会自动交换参数顺序(容易隐藏 bug)
- 适合处理未知参数时防止报错,但不如
slice()
精确
3. 为什么要尽快迁移?
- 浏览器支持随时会取消:未来版本可能直接移除
substr()
。 - 减少认知负担:统一用
slice()
可以降低团队沟通成本。 - 提升代码健壮性:避免混淆参数含义导致的逻辑错误。
4. 迁移建议
优先替换为
slice()
如果原来是substr(start, length)
,可改为:str.slice(start, start + length)
保留
substring()
作为兜底方案
在某些不关心负数且参数可能乱序的场景下可以用。
💡 总结
substr()
已退出 Web 标准,早晚会消失slice()
支持负数索引,行为一致,是首选substring()
在部分场景可用,但需注意自动交换参数和负数处理