substring() 和 substr() 都是用于截取字符串的方法，但它们在参数含义和行为上有重要区别。substr() 现已废弃，不建议在新项目中使用。

主要区别对比表

const str = "Hello World";


console.log(str.substring(6));      // "World"
console.log(str.substring(6, 11));  // "World"
console.log(str.substring(6, 7));   // "W"
console.log(str.substring(3, 0));   // "Hel" (参数自动交换)
console.log(str.substring(-3));     // "Hello World" (负数变0)

const str = "Hello World";


console.log(str.substr(6));       // "World"
console.log(str.substr(6, 5));    // "World"
console.log(str.substr(6, 1));    // "W"
console.log(str.substr(-3));      // "rld" (从倒数第3个开始)
console.log(str.substr(-5, 2));   // "Wo"

const str = "Hello World";


// 基本用法
console.log(str.slice(6));       // "World"
console.log(str.slice(6, 11));   // "World"


// 支持负数索引
console.log(str.slice(-5));      // "World" (最后5个字符)
console.log(str.slice(0, -6));   // "Hello" (从开头到倒数第6个)


// 负数参数表示从末尾开始计数
console.log(str.slice(6, -1));   // "Worl" (从索引6到倒数第1个)

const str = "JavaScript";


// 正数参数
console.log(str.substring(4, 7));  // "Scr" (索引4到7)
console.log(str.substr(4, 3));     // "Scr" (从索引4开始，取3个字符)
console.log(str.slice(4, 7));      // "Scr" (索引4到7)


// 负数参数
console.log(str.substring(-3));     // "JavaScript" (负数变0)
console.log(str.substr(-3));        // "ipt" (最后3个字符)
console.log(str.slice(-3));         // "ipt" (最后3个字符)


// 参数交换
console.log(str.substring(7, 4));   // "Scr" (自动交换为4,7)
console.log(str.substr(7, 4));      // "ipt" (从索引7取4个，实际只有3个)
console.log(str.slice(7, 4));       // "" (start>end，返回空)

最佳实践建议

1. 不再使用 substr() ，因为它是已废弃的旧方法

2. 根据需求选择：

• 使用 substring()：当需要明确的开始和结束索引时

• 使用 slice()：当需要负数索引功能时，或作为 substr() 的替代

3. 记忆技巧：

   substring：第二个参数是"到哪里结束"

   substr：第二个参数是"要截取多长"（已废弃）

   slice：类似于数组的 slice 方法，支持负数索引

简单来说：请使用 slice() 或 substring()，避免使用 substr()。

参考文章：原文链接​