JavaScript字符串截取详解：slice、substring与substr方法核心区别与应用场景

JavaScript字符串截取：slice、substring与substr方法详解

在JavaScript开发中，字符串截取是极为常见的操作。无论是提取用户输入的部分内容、解析URL参数，还是格式化显示文本，开发者都需要从原始字符串中获取指定片段。JavaScript提供了三种核心方法来实现这一功能：slice()、substring() 和 substr()。虽然它们功能相似，但在参数含义与边界处理上存在明显差异，了解这些区别能帮助开发者写出更准确的代码。

一、slice() 方法

slice() 方法通过两个参数来定义截取的起始和结束位置。第一个参数是开始索引（包含该字符），第二个参数是结束索引（不包含该字符）。如果只传一个参数，则表示从该索引一直截取到字符串末尾。该方法支持负数索引，负数表示从字符串尾部开始计数，例如 -1 代表最后一个字符。

语法示例：

let str = "Hello, JavaScript World";
// 从索引7截取到索引18（不包含索引18）
let result1 = str.slice(7, 18);
console.log(result1); // 输出: JavaScript

// 从索引7截取到末尾
let result2 = str.slice(7);
console.log(result2); // 输出: JavaScript World

// 使用负数索引：从倒数第6个字符截取到倒数第1个字符之前
let result3 = str.slice(-6, -1);
console.log(result3); // 输出: World

需要特别注意的是，当起始索引大于结束索引时，slice() 会返回空字符串。

二、substring() 方法

substring() 同样接收两个参数，分别代表起始和结束索引。与 slice() 不同，substring() 会自动将负数参数转换为0，并且当起始索引大于结束索引时，它会自动交换两个参数的位置，确保始终从较小的索引向较大的索引进行截取。

基础用法：

let str = "Programming is fun";
// 正常截取：从索引0到索引11
let result1 = str.substring(0, 11);
console.log(result1); // 输出: Programming

// 参数自动交换：起始索引12大于结束索引5，实际效果等同 substring(5,12)
let result2 = str.substring(12, 5);
console.log(result2); // 输出: ming i

// 负数参数被转为0：substring(-3,5) 变为 substring(0,5)
let result3 = str.substring(-3, 5);
console.log(result3); // 输出: Progr

由于自动交换特性的存在，substring() 在无法确定参数大小关系时更加安全，但也可能产生与预期不符的结果，这一点需要开发者特别留意。

三、substr() 方法（已弃用）

substr() 的第二个参数代表截取的长度，而非结束索引。第一个参数是起始索引，支持负数。由于参数含义与 slice() 和 substring() 完全不同，新手容易混淆。此外，substr() 已被 ECMAScript 标准标记为弃用（deprecated），虽然在浏览器中仍能工作，但不建议在新项目中使用。

为了保持代码的兼容性和可维护性，应优先选择 slice() 或 substring()。

let str = "Learn JavaScript";
// 从索引6开始，截取10个字符
let result = str.substr(6, 10);
console.log(result); // 输出: JavaScript

四、三种方法的对比总结

为了更直观地展示三者的差异，下表整理了核心对比项：

五、实际应用场景

了解方法的区别之后，结合实际场景可以更灵活地运用这些方法。

场景1：提取邮箱用户名

let email = "user@ippipp.com";
let atIndex = email.indexOf("@");
let username = email.slice(0, atIndex);
console.log(username); // 输出: user

场景2：截取文件扩展名

let filename = "report.pdf";
let dotIndex = filename.lastIndexOf(".");
let extension = filename.slice(dotIndex + 1);
console.log(extension); // 输出: pdf

场景3：截取固定长度的字符

let longStr = "This is a very long string that needs to be truncated.";
let truncated = longStr.slice(0, 20) + "...";
console.log(truncated); // 输出: This is a very long...

六、选择建议

在日常开发中，如果只需求从指定位置截取到末尾，或者需要明确指定开始和结束索引，slice() 是最推荐的选择。它支持负数索引，参数含义直观，且没有自动交换的副作用。如果希望在参数顺序不确定时仍能得到有意义的截取结果，substring() 的自动交换特性可以作为一种保护机制。至于 substr()，应当尽量避免使用，改用 slice() 结合长度计算的方式替代。

掌握这三种方法的差异，不仅能帮助你写出更准确的字符串截取逻辑，也能在阅读旧代码时快速理解其意图，是JavaScript基本功中不可忽视的一环。

JavaScript字符串截取slice方法substring方法substr方法字符串操作方法