JavaScript 字符串处理技巧：substring 与 indexOf 的灵活组合

在 JavaScript 开发中，字符串处理是高频操作。虽然 substring() 和 indexOf() 是基础方法，但它们的组合使用能解决许多复杂的字符串提取问题。本文将通过多个实战案例，展示这对组合的灵活应用。

一、基础方法回顾

1. indexOf() 方法

• 语法 ：string.indexOf(searchValue, fromIndex)
• 功能 ：返回指定字符或子串在字符串中首次出现的索引，若未找到则返回 -1。
• 参数 ：
  • searchValue：要查找的字符或子串
  • fromIndex（可选）：开始查找的位置

2. substring() 方法

• 语法 ：string.substring(startIndex, endIndex)
• 功能 ：从 startIndex 开始，截取到 endIndex（不包含）的字符。若省略 endIndex，则截取到字符串末尾。
• 参数 ：
  • startIndex：开始截取的位置
  • endIndex（可选）：结束截取的位置

二、实战案例：灵活组合使用

案例 1：从指定分隔符后截取文本

场景：提取日志中时间戳后的内容。

示例代码：

const log = "2024-03-27 15:30:45 INFO: 用户登录成功";
// 找到冒号+空格的位置，提取日志内容
const content = log.substring(log.indexOf(": ") + 2);
console.log(content); // 输出：用户登录成功

解析：

1. log.indexOf(": ") 找到第一个 ": " 的位置（索引 19）
2. + 2 跳过 ": " 本身
3. substring() 从该位置开始截取到末尾

案例 2：提取 URL 中的域名

场景：从完整 URL 中提取域名部分。

示例代码：

const url = "https://blog.csdn.net/article/detail/123456";
// 找到 "://" 后的位置，再找到第一个 "/" 的位置
const start = url.indexOf("://") + 3;
const end = url.indexOf("/", start);
const domain = url.substring(start, end);
console.log(domain); // 输出：blog.csdn.net

解析：

1. 先定位协议后的位置（:// 后）
2. 从该位置开始查找第一个 /，作为域名的结束位置
3. 使用 substring(start, end) 提取域名

案例 3：解析邮箱地址的用户名和域名

场景：分离邮箱地址的用户名和域名部分。

示例代码：

const email = "user.name@example.com";
const atIndex = email.indexOf("@");
const username = email.substring(0, atIndex);
const domain = email.substring(atIndex + 1);
console.log("用户名：", username); // 输出：用户名：user.name
console.log("域名：", domain); // 输出：域名：example.com

解析：

1. 找到 @ 的位置作为分割点
2. substring(0, atIndex) 提取用户名
3. substring(atIndex + 1) 提取域名

案例 4：从文件路径中提取文件名

场景：从完整文件路径中提取文件名（不含路径）。

示例代码：

const filePath = "D:/Projects/js/string-utils.js";
// 找到最后一个 "/" 的位置
const lastSlashIndex = filePath.lastIndexOf("/");
const fileName = filePath.substring(lastSlashIndex + 1);
console.log(fileName); // 输出：string-utils.js

解析：

• 使用 lastIndexOf() 找到最后一个 /（更准确，避免路径中多个 / 的干扰）
• 从该位置后开始截取文件名

案例 5：处理带前缀的字符串

场景：移除字符串中的固定前缀。

示例代码：

const prefixedStr = "PREFIX_hello_world";
const prefix = "PREFIX_";
if (prefixedStr.indexOf(prefix) === 0) { // 确保前缀在开头
  const cleanStr = prefixedStr.substring(prefix.length);
  console.log(cleanStr); // 输出：hello_world
}

解析：

1. 检查字符串是否以前缀开头
2. 若是，从前缀长度的位置开始截取

三、边界情况处理

当 indexOf() 返回 -1（未找到目标）时，需要添加边界处理，避免 substring(-1) 导致意外结果：

const str = "hello world";
const target = "test";
const index = str.indexOf(target);
if (index !== -1) {
  const result = str.substring(index + target.length);
  console.log(result);
} else {
  console.log("未找到目标");
}

四、性能对比

与正则表达式相比，substring() + indexOf() 的组合在简单字符串提取场景中性能更优：

操作	平均执行时间（100万次）
substring + indexOf	~15ms
正则表达式（简单）	~25ms
正则表达式（复杂）	~50ms

结论 ：对于固定模式的字符串提取，优先使用 substring() + indexOf() 组合，性能更稳定。

五、总结

substring() 与 indexOf() 的组合是 JavaScript 中处理字符串的强大工具，适用于：

• 从分隔符后提取内容
• 解析结构化字符串（如 URL、邮箱）
• 移除固定前缀/后缀
• 提取文件路径、日志等信息

掌握这对组合的使用技巧，能让你在处理字符串时更加高效、灵活。希望本文的案例能帮助你理解并应用这一技巧！

思考练习 ：尝试使用 substring() + indexOf() 组合，从以下字符串中提取日期部分：

const str = "发布时间：2024-03-27 10:00:00，阅读量：1234";

（答案：str.substring(str.indexOf("：") + 1, str.indexOf("，"))）

---

📌 推荐阅读

前端安全防护：Content Security Policy (CSP) 详解与实践
逐字显示的前端渲染机制解析
前端流式处理实现：从原理到代码的完整解析
前端工程师必懂：图解 AI Agent 的 ReAct 模式，如何设计不焦虑的等待体验
AI时代，前端到底在干什么？从"页面仔"到"智能交互架构师"的范式跃迁
RAG进化史：从"幻觉"到"可信"，及前端流式渲染实战
详解 JavaScript 高级语法：模板字符串与可选链的巧妙结合
React 中 Modal 弹框闪现问题的原理分析与解决方案