js substring（长文讲解）

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

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

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

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

前言

在 JavaScript 开发中，字符串（String）的处理是一项基础但至关重要的技能。无论是表单数据解析、URL 参数提取，还是日志信息截取，开发者常常需要从字符串中提取特定部分的内容。substring 方法作为 JavaScript 原生提供的字符串操作工具之一，能够高效实现这一目标。本文将从零开始，结合实际案例与代码示例，深入解析 substring 方法的核心功能、使用技巧及常见误区，帮助读者快速掌握这一工具的使用场景与逻辑原理。

基础语法与核心功能

substring 方法用于从字符串中提取一段子字符串，其语法格式如下：

str.substring(startIndex[, endIndex])  

• 参数说明：
  • startIndex（必需）：子字符串的起始索引位置，包含该位置的字符。
  • endIndex（可选）：子字符串的结束索引位置，不包含该位置的字符。若未提供，则默认为字符串的末尾。

示例 1：基础用法

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

通过上述代码，substring(0,5) 从索引 0 开始，到索引 5（不包含 5）结束，截取了前 5 个字符。而 substring(6) 则从索引 6 开始，截取到字符串末尾。

参数详解：负数与参数顺序的特殊处理

1. 负数参数的自动修正

若参数为负数，substring 方法会将其视为 0。例如：

const str = "Example";  
console.log(str.substring(-3, 2)); // 输出 "Ex"（等价于 substring(0,2)）  

这里，-3 被修正为 0，而 2 保持不变，因此截取的是索引 0 到 2 的字符。

2. 参数顺序颠倒的自动调整

若 endIndex 小于 startIndex，substring 会自动交换两者的值，确保返回正确的子字符串：

const str = "JavaScript";  
console.log(str.substring(10, 2)); // 输出 "Script"（等价于 substring(2,10)）  

这一特性简化了参数校验的复杂度，但开发者仍需注意逻辑清晰性。

substring 与其他字符串截取方法的对比

JavaScript 还提供了 slice 和 substr 两种类似功能的方法，三者在参数逻辑和行为上存在显著差异。下表对比了它们的核心区别：

示例 2：方法对比实践

const str = "JavaScript";  
console.log(str.substring(2, 5)); // 输出 "ava"  
console.log(str.slice(2, 5));     // 输出 "ava"  
console.log(str.substr(2, 3));    // 输出 "ava"  

当参数为正数且顺序正确时，三者结果一致，但参数逻辑的差异在复杂场景中会显著影响结果。例如：

console.log(str.substring(-1, 2));  // 输出 "Ja"（-1 → 0）  
console.log(str.slice(-1, 2));      // 输出 ""（-1 > 2 后自动调整，但修正后的 2 到 -1 无效）  
console.log(str.substr(-3, 2));     // 输出 "pt"（从末尾前 3 位开始，截取 2 字符）  

实战案例：substring 的应用场景

案例 1：表单数据格式化

假设需要从用户输入的邮箱地址中提取域名部分：

function extractDomain(email) {  
  const atIndex = email.indexOf("@");  
  return atIndex !== -1 ? email.substring(atIndex + 1) : "无效邮箱";  
}  
console.log(extractDomain("user@example.com")); // 输出 "example.com"  

通过定位 @ 符号的位置，substring 可快速截取域名部分。

案例 2：URL 参数截取

从 URL 中提取路径部分（忽略查询参数）：

const url = "https://example.com/path?param=1";  
const cleanPath = url.substring(0, url.indexOf("?"));  
console.log(cleanPath); // 输出 "https://example.com/path"  

案例 3：时间戳格式化

将时间戳转换为 HH:mm 格式：

function formatTime(timestamp) {  
  const date = new Date(timestamp);  
  const hours = date.getHours();  
  const minutes = date.getMinutes();  
  return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;  
}  
console.log(formatTime(Date.now())); // 输出类似 "14:35"  

此处虽未直接使用 substring，但结合 padStart 和字符串拼接，展示了字符串操作的实际应用。

常见误区与解决方案

误区 1：忽略参数的自动调整逻辑

开发者可能误以为 substring(5, 2) 会返回空字符串，但实际返回的是 substring(2,5) 的结果。解决方案是始终确保参数顺序合理。

误区 2：混淆 substring 与 substr 的参数含义

substr 的第二个参数是截取长度，而非结束索引，例如：

"JavaScript".substring(2,5) // "ava"  
"JavaScript".substr(2,5)   // "avasc"  

需根据需求选择合适的方法。

误区 3：未处理参数超出字符串长度的情况

若 endIndex 超过字符串长度，substring 会自动截取到字符串末尾。但若需确保安全性，建议先校验参数范围：

function safeSubstring(str, start, end) {  
  const len = str.length;  
  return str.substring(  
    Math.max(0, Math.min(start, len)),  
    Math.max(0, Math.min(end, len))  
  );  
}  

进阶技巧：结合其他方法实现复杂操作

技巧 1：与 slice 联用处理负数

当需要从字符串末尾开始截取时，可结合 slice 的负数参数：

const str = "JavaScript";  
console.log(str.substring(str.length - 3)); // 输出 "pt"  
console.log(str.slice(-3));                  // 同样输出 "pt"  

技巧 2：动态截取多段内容

通过循环或条件判断，可分段截取字符串：

function splitByIndices(str, indices) {  
  const parts = [];  
  let prev = 0;  
  for (const index of indices) {  
    parts.push(str.substring(prev, index));  
    prev = index;  
  }  
  return parts;  
}  
console.log(splitByIndices("HelloWorld", [5])); // 输出 ["Hello", "World"]  

总结

substring 方法凭借其简洁的语法和自动化的参数处理，成为 JavaScript 字符串截取的常用工具。掌握其参数逻辑、与其他方法的差异，以及常见场景的实践技巧，能够显著提升开发效率。开发者需注意参数的合理校验，并结合具体需求选择最适配的方法，避免因逻辑误解导致的错误。通过本文的案例与解析，希望读者能够将 substring 融入日常开发，灵活应对各类字符串处理挑战。