编程 90% 开发者还在用的 `substr()`,浏览器早已废弃

2025-08-15 12:08:58 +0800 CST views 116

🚫 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. 迁移建议

  1. 优先替换为 slice()
    如果原来是 substr(start, length),可改为:

    str.slice(start, start + length)
    
  2. 保留 substring() 作为兜底方案
    在某些不关心负数且参数可能乱序的场景下可以用。


💡 总结

  • substr() 已退出 Web 标准,早晚会消失
  • slice() 支持负数索引,行为一致,是首选
  • substring() 在部分场景可用,但需注意自动交换参数和负数处理
复制全文 生成海报 前端开发 JavaScript 编码规范

推荐文章

Vue3中如何进行错误处理?
2024-11-18 05:17:47 +0800 CST
html一份退出酒场的告知书
2024-11-18 18:14:45 +0800 CST
全栈工程师的技术栈
2024-11-19 10:13:20 +0800 CST
PostgreSQL日常运维命令总结分享
2024-11-18 06:58:22 +0800 CST
从Go开发者的视角看Rust
2024-11-18 11:49:49 +0800 CST
CSS 中的 `scrollbar-width` 属性
2024-11-19 01:32:55 +0800 CST
阿里云发送短信php
2025-06-16 20:36:07 +0800 CST
Hypothesis是一个强大的Python测试库
2024-11-19 04:31:30 +0800 CST
IP地址获取函数
2024-11-19 00:03:29 +0800 CST
java MySQL如何获取唯一订单编号?
2024-11-18 18:51:44 +0800 CST
html一个包含iPhoneX和MacBook模拟器
2024-11-19 08:03:47 +0800 CST
ElasticSearch集群搭建指南
2024-11-19 02:31:21 +0800 CST
Vue中的`key`属性有什么作用?
2024-11-17 11:49:45 +0800 CST
thinkphp swoole websocket 结合的demo
2024-11-18 10:18:17 +0800 CST
js常用通用函数
2024-11-17 05:57:52 +0800 CST
gin整合go-assets进行打包模版文件
2024-11-18 09:48:51 +0800 CST
Vue中的表单处理有哪几种方式?
2024-11-18 01:32:42 +0800 CST
Mysql允许外网访问详细流程
2024-11-17 05:03:26 +0800 CST
微信内弹出提示外部浏览器打开
2024-11-18 19:26:44 +0800 CST
Vue中如何处理异步更新DOM?
2024-11-18 22:38:53 +0800 CST
总结出30个代码前端代码规范
2024-11-19 07:59:43 +0800 CST
程序员茄子在线接单