【JavaScript】 substring()方法详解

substring() 是 JavaScript 中字符串（String）的核心方法，用于提取字符串中指定区间的字符，并返回一个新的字符串（原字符串不会被修改）。下面我会从基础用法到进阶场景，帮你彻底理解这个方法。

一、基本语法

substring() 有两种调用形式，核心是通过「起始索引」和「结束索引」来截取字符串：

javascript 复制代码

// 形式1：只传起始索引（截取到字符串末尾）
str.substring(startIndex)

// 形式2：传起始索引 + 结束索引（截取 [startIndex, endIndex) 区间，左闭右开）
str.substring(startIndex, endIndex)

关键参数说明

startIndex：必需，开始截取的位置（索引从 0 开始）。

endIndex：可选，结束截取的位置（不包含该索引对应的字符）；如果省略，默认截取到字符串最后一位。

特殊规则：如果 startIndex > endIndex，方法会自动交换两个参数（比如 substring(5, 2) 等价于 substring(2, 5)）；如果参数为负数，会自动转为 0。

二、实用示例

通过具体例子能更快理解，先定义一个基础字符串：

javascript 复制代码

const str = "Hello World"; // 索引：0:H,1:e,2:l,3:l,4:o,5: ,6:W,7:o,8:r,9:l,10:d

示例 1：只传起始索引（截取到末尾）

javascript 复制代码

const result = str.substring(6); 
console.log(result); // 输出："World"（从索引6开始，截取到最后）

示例 2：传起始 + 结束索引（左闭右开）

javascript 复制代码

const result = str.substring(0, 5); 
console.log(result); // 输出："Hello"（截取索引0到4，不包含5）

示例 3：参数顺序颠倒（自动交换）

javascript 复制代码

const result = str.substring(5, 0); 
console.log(result); // 输出："Hello"（等价于 substring(0,5)）

示例 4：参数为负数（自动转为 0）

javascript 复制代码

const result = str.substring(-3, 5); 
console.log(result); // 输出："Hello"（-3 转为 0，等价于 substring(0,5)）

示例 5：索引超出字符串长度（自动截断）

javascript 复制代码

const result = str.substring(6, 20); 
console.log(result); // 输出："World"（endIndex 超出长度，截取到末尾）

三、常见误区 & 注意点

和 substr() 的区别：

很多新手会混淆两者，substr(startIndex, length) 第二个参数是「截取长度」，而 substring 第二个参数是「结束索引」，比如：

javascript 复制代码

str.substring(6, 11); // "World"（结束索引11）
str.substr(6, 5);     // "World"（截取长度5）

原字符串不变：substring() 返回新字符串，不会修改原字符串，比如：

javascript 复制代码

const str = "Hello";
const newStr = str.substring(1);
console.log(str);    // 输出："Hello"（原字符串不变）
console.log(newStr); // 输出："ello"

总结

substring(start, end) 截取字符串，区间是「左闭右开」，原字符串不修改；

若 start > end 会自动交换参数，参数为负数则转为 0；

区分 substring（按结束索引）和 substr（按截取长度），避免用错。