JavaScript 中substr方法详解

在 JavaScript 中，substr() 是用于提取字符串中指定位置开始的部分字符串的方法，但需要注意它已经被标记为 遗留方法（deprecated）。现代代码建议改用 slice() 或 substring()。以下是详细说明：

语法

str.substr(startIndex [, length])

核心特点

1. 负数索引处理
   • 当 startIndex 为负数时，会被转换为 str.length + startIndex

"abcdef".substr(-3, 2) // "de"（相当于从索引3开始）

1. 自动截断机制
   • 若 length 超过剩余字符数，只取到字符串末尾

"hello".substr(2, 10) // "llo"

1. 返回值类型
   • 始终返回新字符串，不修改原字符串
2. 索引起点

substr 方法的索引起点是 0，这意味着字符串的第一个字符的索引是 0，第二个字符的索引是 1，依此类推

let str = "Hello, World!";
let result = str.substr(7);
console.log(result); // 输出 "World!"

解释：

• 字符串"Hello, World!"的索引分布如下：
  • H：0
  • e：1
  • l：2
  • l：3
  • o：4
  • ,：5
  • （空格）：6
  • W：7
  • ...（后续字符依次类推）
• 当调用str.substr(7)时，从索引7开始提取，即从字符W开始，一直提取到字符串的末尾，因此输出是"World!"。

与相似方法对比

示例代码

基础用法

const str = "JavaScript";
console.log(str.substr(4));      // "Script"（从索引4到末尾）
console.log(str.substr(4, 3));   // "Scr"（从索引4取3字符）
console.log(str.substr(-6));     // "Script"（倒数第6位开始）

特殊场景

// 开始位置超出字符串长度
"abc".substr(5, 2) // ""（空字符串）

// 长度为负数
"abc".substr(1, -1) // ""（长度转为0）

// 与 slice 对比
"abcde".substr(1, 3)   // "bcd"
"abcde".slice(1, 4)    // "bcd"（索引1到3）

为什么被弃用？

1. ECMAScript 规范变化 根据 ECMA-262 标准，substr 未被包含在 Annex B（浏览器兼容性附录）之外的标准中
2. 参数易混淆性 与 slice(start, end) 的参数逻辑不一致，容易导致错误
3. 替代方案明确 slice() 可以完全覆盖 substr() 的功能： javascript 复制

// 等效写法
str.substr(start, length) === str.slice(start, start + length)

迁移指南

将现有 substr 代码转换为 slice：

最佳实践

1. 新项目 统一使用 slice()，参数逻辑与数组的 slice() 保持一致
2. 旧代码维护 逐步替换 substr()，注意测试边缘情况
3. 处理浏览器兼容性 所有现代浏览器均支持 slice()（包括 IE9+）

如果需要处理 Unicode 字符（如 emoji 或代理对），建议使用 Array.from(str).slice().join('') 来确保正确分割字形簇（grapheme clusters）。