JavaScript 中substr方法详解

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

---

语法

str.substr(startIndex [, length])

参数	说明
startIndex	开始提取的位置（支持负数：从字符串末尾倒数）
length	可选，要提取的字符数（默认到字符串末尾）

---

核心特点

1. 负数索引处理

   • 当 startIndex 为负数时，会被转换为 str.length + startIndex

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

    

2. 自动截断机制

   • 若 length 超过剩余字符数，只取到字符串末尾

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

    

3. 返回值类型

   • 始终返回新字符串，不修改原字符串

4. 索引起点

       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!"。

---

与相似方法对比

方法	参数	负数处理	兼容性	推荐度
substr(start, length)	(开始位置, 长度)	支持负数开始位置	遗留方法	❌ 不推荐
slice(start, end)	(开始位置, 结束位置)	支持负数位置	标准方法	✅ 推荐
substring(start, end)	(开始位置, 结束位置)	负数视为0	标准方法	✅ 推荐

---

示例代码

基础用法

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：

原代码	等效代码	说明
str.substr(N)	str.slice(N)	从位置N到末尾
str.substr(N, M)	str.slice(N, N+M)	注意结束位置计算
str.substr(-N)	str.slice(-N)	倒数第N位到末尾
str.substr(-N, M)	str.slice(-N, -N+M)	需处理可能的负数

---

最佳实践

1. 新项目
   统一使用 slice()，参数逻辑与数组的 slice() 保持一致

2. 旧代码维护
   逐步替换 substr()，注意测试边缘情况

3. 处理浏览器兼容性
   所有现代浏览器均支持 slice()（包括 IE9+）

---

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