在 JavaScript 开发中字符串处理是高频操作。虽然substring()和indexOf()是基础方法但它们的组合使用能解决许多复杂的字符串提取问题。本文将通过多个实战案例展示这对组合的灵活应用。一、基础方法回顾1.indexOf()方法语法string.indexOf(searchValue, fromIndex)功能返回指定字符或子串在字符串中首次出现的索引若未找到则返回-1。参数searchValue要查找的字符或子串fromIndex可选开始查找的位置2.substring()方法语法string.substring(startIndex, endIndex)功能从startIndex开始截取到endIndex不包含的字符。若省略endIndex则截取到字符串末尾。参数startIndex开始截取的位置endIndex可选结束截取的位置二、实战案例灵活组合使用案例 1从指定分隔符后截取文本场景提取日志中时间戳后的内容。示例代码constlog2024-03-27 15:30:45 INFO: 用户登录成功;// 找到冒号空格的位置提取日志内容constcontentlog.substring(log.indexOf(: )2);console.log(content);// 输出用户登录成功解析log.indexOf(: )找到第一个: 的位置索引19 2跳过: 本身substring()从该位置开始截取到末尾案例 2提取 URL 中的域名场景从完整 URL 中提取域名部分。示例代码consturlhttps://blog.csdn.net/article/detail/123456;// 找到 :// 后的位置再找到第一个 / 的位置conststarturl.indexOf(://)3;constendurl.indexOf(/,start);constdomainurl.substring(start,end);console.log(domain);// 输出blog.csdn.net解析先定位协议后的位置://后从该位置开始查找第一个/作为域名的结束位置使用substring(start, end)提取域名案例 3解析邮箱地址的用户名和域名场景分离邮箱地址的用户名和域名部分。示例代码constemailuser.nameexample.com;constatIndexemail.indexOf();constusernameemail.substring(0,atIndex);constdomainemail.substring(atIndex1);console.log(用户名,username);// 输出用户名user.nameconsole.log(域名,domain);// 输出域名example.com解析找到的位置作为分割点substring(0, atIndex)提取用户名substring(atIndex 1)提取域名案例 4从文件路径中提取文件名场景从完整文件路径中提取文件名不含路径。示例代码constfilePathD:/Projects/js/string-utils.js;// 找到最后一个 / 的位置constlastSlashIndexfilePath.lastIndexOf(/);constfileNamefilePath.substring(lastSlashIndex1);console.log(fileName);// 输出string-utils.js解析使用lastIndexOf()找到最后一个/更准确避免路径中多个/的干扰从该位置后开始截取文件名案例 5处理带前缀的字符串场景移除字符串中的固定前缀。示例代码constprefixedStrPREFIX_hello_world;constprefixPREFIX_;if(prefixedStr.indexOf(prefix)0){// 确保前缀在开头constcleanStrprefixedStr.substring(prefix.length);console.log(cleanStr);// 输出hello_world}解析检查字符串是否以前缀开头若是从前缀长度的位置开始截取三、边界情况处理当indexOf()返回-1未找到目标时需要添加边界处理避免substring(-1)导致意外结果conststrhello world;consttargettest;constindexstr.indexOf(target);if(index!-1){constresultstr.substring(indextarget.length);console.log(result);}else{console.log(未找到目标);}四、性能对比与正则表达式相比substring()indexOf()的组合在简单字符串提取场景中性能更优操作平均执行时间100万次substring indexOf~15ms正则表达式简单~25ms正则表达式复杂~50ms结论对于固定模式的字符串提取优先使用substring()indexOf()组合性能更稳定。五、总结substring()与indexOf()的组合是 JavaScript 中处理字符串的强大工具适用于从分隔符后提取内容解析结构化字符串如 URL、邮箱移除固定前缀/后缀提取文件路径、日志等信息掌握这对组合的使用技巧能让你在处理字符串时更加高效、灵活。希望本文的案例能帮助你理解并应用这一技巧思考练习尝试使用substring()indexOf()组合从以下字符串中提取日期部分conststr发布时间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 弹框闪现问题的原理分析与解决方案