异常教程

JavaScript substring() 方法（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 开发中，字符串操作是日常编码的核心任务之一。无论是处理用户输入、解析数据格式，还是构建动态内容，开发者常常需要从字符串中提取特定部分。JavaScript substring() 方法正是实现这一目标的关键工具之一。它允许开发者通过指定起始和结束位置，快速获取字符串的子序列。对于编程初学者而言，掌握 substring() 的用法能显著提升代码效率；而对中级开发者来说，深入理解其底层逻辑和边界条件，有助于避免潜在的陷阱。本文将通过循序渐进的方式，结合实际案例和代码示例，全面解析 substring() 方法的原理、用法及最佳实践。

一、基础概念：字符串与索引

在深入 substring() 方法之前，我们需要先理解两个核心概念：字符串和索引。

1.1 字符串：字符的有序集合

JavaScript 中的字符串是由零个或多个字符组成的有序序列。例如，字符串 "Hello World" 包含 11 个字符，每个字符的位置由其索引（index）决定。索引从 0 开始，因此第一个字符的索引是 0，最后一个字符的索引是字符串长度减一（如 "Hello World" 的最后一个字符索引是 10）。

1.2 索引的比喻：像书签一样标记位置

想象一本有页码的书，每个页码对应一个具体的位置。字符串的索引类似这些页码，开发者可以通过索引快速定位到某个字符。例如：

const str = "JavaScript";  
console.log(str[0]); // 输出 "J"（索引0）  
console.log(str[4]); // 输出 "s"（索引4）

1.3 字符串长度：获取字符串的总字符数

通过 length 属性可以获取字符串的长度：

const str = "Hello";  
console.log(str.length); // 输出 5

二、substring() 方法的语法与基本用法

substring() 方法的语法如下：

str.substring(startIndex, endIndex);
  • startIndex：子字符串的起始索引（包含该位置的字符）。
  • endIndex：子字符串的结束索引（不包含该位置的字符）。

2.1 基本示例：提取字符串的中间部分

假设我们想从 "Hello World" 中提取 "Hello"：

const str = "Hello World";  
const result = str.substring(0, 5);  
console.log(result); // 输出 "Hello"

解释：

  • startIndex 设置为 0，即从第一个字符开始；
  • endIndex 设置为 5，即结束于索引 5 的前一个位置（索引 4），因此包含索引 0 到 4 的字符。

2.2 省略 endIndex 的情况

如果省略 endIndex，则默认取到字符串的末尾：

const str = "JavaScript";  
const result = str.substring(4);  
console.log(result); // 输出 "Script"

此时，endIndex 被视为字符串的长度（即 10），因此提取索引 4 到 9 的字符。

三、进阶用法：参数处理与边界条件

substring() 方法的参数处理存在一些细节，开发者需特别注意以下场景：

3.1 负数参数的处理

当 startIndex 或 endIndex 为负数时，JavaScript 会将其视为 0：

const str = "Example";  
console.log(str.substring(-3, 2)); // 输出 "Ex"（等同于 substring(0,2)）  
console.log(str.substring(2, -1)); // 输出 ""（空字符串，因为 end < start）

3.2 参数顺序的自动调整

如果 startIndex 大于 endIndex，substring() 会自动交换两者的值，确保结果正确：

const str = "JavaScript";  
console.log(str.substring(8, 4)); // 输出 "a"（实际处理为 substring(4,8)）

这一特性简化了代码逻辑，但开发者仍需保持参数顺序的清晰性以避免混淆。

3.3 超出范围的索引

当参数超过字符串长度时，substring() 会自动截断到字符串的边界：

const str = "Test"; // 长度为4  
console.log(str.substring(10, 15)); // 输出空字符串  
console.log(str.substring(2, 10)); // 输出 "st"

四、substring() 与其他方法的对比：slice、substr

JavaScript 提供了多个字符串截取方法，开发者需根据需求选择最合适的工具：

4.1 substring() vs slice()

两者功能相似，但对负数的处理方式不同：

  • substring()：将负数参数视为 0；
  • slice()：允许负数表示从末尾倒数的位置： 
    const str = "Hello";  
console.log(str.slice(-3)); // 输出 "llo"（从倒数第3位开始到末尾）  
console.log(str.substring(-3)); // 输出 "Hel"（负数被视作0）

4.2 substring() vs substr()

substr() 方法的第二个参数表示截取的字符数，而非结束索引：

const str = "JavaScript";  
console.log(str.substring(4, 8)); // 输出 "Scri"（索引4到7）  
console.log(str.substr(4, 4));    // 输出 "Scri"（从索引4开始，取4个字符）

但需注意：substr() 在 ES2015 后逐渐被弃用，推荐使用 slice 或 substring 替代。

方法参数含义负数处理推荐程度
substring()start和end索引（自动调整顺序）负数转为0高
slice()start和end索引（允许负数）负数表示倒数位置高
substr()start和字符长度（非索引）负数允许倒数位置低（弃用）

五、实战案例：substring() 的应用场景

以下案例展示了 substring() 在实际开发中的典型用途：

5.1 提取文件扩展名

假设需要从文件路径 "report.pdf" 中提取扩展名：

const filename = "document_v2.xlsx";  
const extension = filename.substring(filename.lastIndexOf(".") + 1);  
console.log(extension); // 输出 "xlsx"

5.2 截取日期时间

处理日期字符串 "2023-10-15T14:30:00"，提取日期部分：

const dateTime = "2023-10-15T14:30:00";  
const datePart = dateTime.substring(0, 10);  
console.log(datePart); // 输出 "2023-10-15"

5.3 动态生成缩略名

限制字符串长度为 10 个字符，并添加省略号：

function truncate(str, maxLength = 10) {  
  return str.length > maxLength  
    ? str.substring(0, maxLength) + "..."  
    : str;  
}  

console.log(truncate("HelloJavaScript")); // 输出 "HelloJav..."

六、常见问题与最佳实践

6.1 为什么我的 substring() 返回了空字符串？

可能原因包括：

  • 参数值为负数且未正确处理；
  • startIndex 大于字符串长度；
  • endIndex 小于 startIndex（但自动调整后可能仍为无效范围）。
    解决方法：始终验证参数范围，或使用 Math.max() 等函数确保参数合法。

6.2 如何避免参数顺序错误？

虽然 substring() 会自动调整顺序，但建议始终让 startIndex 小于 endIndex，以提高代码可读性：

const start = 5;  
const end = 2;  
const result = str.substring(Math.min(start, end), Math.max(start, end));

结论

JavaScript substring() 方法是一个强大且灵活的字符串操作工具，其核心优势在于简单直观的参数设计和自动化的参数调整逻辑。通过本文的讲解，读者应能掌握以下关键点：

  1. 字符串索引的基本原理；
  2. substring() 方法的语法、参数处理规则及边界条件；
  3. 与其他字符串截取方法（如 slice 和 substr）的区别；
  4. 实际开发中的应用场景与最佳实践。

掌握 substring() 不仅能提升代码效率，还能帮助开发者构建更健壮的字符串处理逻辑。建议读者通过动手实践上述案例，进一步巩固对方法的理解。随着对字符串操作的深入探索，开发者可以逐步掌握更高级的技巧，如结合正则表达式或字符串 API 实现复杂需求。

最新发布

查看更多文章