JS 字符串截取：substr vs substring 的实战对比与记忆技巧

1. 为什么我们需要区分 substr 和 substring在日常的 JavaScript 开发中字符串操作是最基础也是最频繁的需求之一。很多开发者都遇到过这样的困惑当需要截取字符串时到底该用 substr 还是 substring这两个方法看起来功能相似但实际使用时却经常因为记混参数而导致意外结果。我刚开始接触 JavaScript 时就经常在这两个方法上栽跟头。记得有一次做表单验证需要截取用户输入的前5个字符做校验结果因为用错了方法导致验证逻辑完全失效。后来排查了半天才发现是 substr 和 substring 的参数搞混了。这两个方法的主要区别在于它们的第二个参数substr(startIndex, length)从 startIndex 开始截取 length 长度的字符substring(startIndex, endIndex)从 startIndex 开始截取到 endIndex 前一个字符看起来很简单对吧但实际开发中我们的大脑往往会自动把这两个方法的参数记反。这就是为什么我们需要一些实用的记忆技巧以及深入了解它们在不同场景下的表现。2. 基础用法对比参数解析与常见场景2.1 substr 方法详解substr 方法的语法是str.substr(start[, length])它的工作方式相对直观const str JavaScript字符串操作; console.log(str.substr(4, 6)); // 输出 Script字这里有几个关键点需要注意start 参数如果是负数表示从字符串末尾开始计算位置length 参数是可选的如果省略会截取到字符串末尾length 不能为负数否则会被当作0处理实际开发中substr 特别适合以下场景截取固定长度的字符串如摘要生成从字符串末尾开始截取使用负数的start不确定结束位置但知道需要多长的情况2.2 substring 方法详解substring 方法的语法是str.substring(start[, end])它的行为与 substr 有显著不同const str JavaScript字符串操作; console.log(str.substring(4, 10)); // 输出 Scriptsubstring 的特点包括参数代表的是字符位置索引而不是长度如果 start end会自动交换这两个参数任何负数参数都会被当作0处理end 是可选的省略时截取到字符串末尾substring 最适合的场景包括精确知道开始和结束位置的情况需要确保参数顺序不影响结果的情况处理可能产生负数索引的情况会自动转为03. 高级对比特殊参数处理与边界情况3.1 负数参数的不同表现这是两个方法差异最大的地方之一。让我们看一个例子const str ABCDEFG; // substr 处理负数 console.log(str.substr(-3)); // 输出 EFG从倒数第3个开始 console.log(str.substr(-3, 2)); // 输出 EF // substring 处理负数 console.log(str.substring(-3)); // 输出 ABCDEFG负数被当作0 console.log(str.substring(2, -3)); // 输出 AB相当于 substring(0, 2)从上面的例子可以看出substr 的 start 可以为负表示从末尾计算substring 会把所有负数参数当作0处理这种差异在实际开发中可能导致严重bug需要特别注意3.2 参数交换的智能处理substring 有一个很贴心的特性当 start end 时它会自动交换这两个参数const str 0123456789; console.log(str.substring(5, 2)); // 输出 234 console.log(str.substr(5, 2)); // 输出 56而 substr 则严格遵守参数顺序不会进行任何自动调整。这个区别在动态计算索引时尤为重要可能导致完全不同的结果。4. 终极记忆技巧长短配对法经过多年的实践和教学我总结出了一个简单有效的记忆方法我称之为长短配对法。这个方法基于两个观察方法名称长度substr → 6个字母较短substring → 9个字母较长参数含义长度length → 表示长度较短概念endIndex → 表示结束索引较长概念记忆口诀就是短对短长对长。即较短的方法名 substr 对应较短的参数概念 length较长的方法名 substring 对应较长的参数概念 endIndex这样每次使用时只需要看看方法名的长度就能想起第二个参数的含义了。5. 实际项目中的选择建议5.1 什么时候用 substr在以下情况下substr 可能是更好的选择需要从字符串末尾开始截取时使用负索引知道需要截取的长度而非结束位置时处理可能为负的动态索引时如果不想被转为0例如实现一个显示更多功能时function getPreview(text, maxLength) { return text.length maxLength ? text.substr(0, maxLength) ... : text; }5.2 什么时候用 substring在以下场景中substring 通常更合适需要精确控制开始和结束位置时参数可能乱序但希望结果一致时处理用户输入或不确定的索引时自动处理负数比如提取URL中的某一部分function getDomain(url) { const start url.indexOf(://) 3; const end url.indexOf(/, start); return url.substring(start, end ! -1 ? end : undefined); }6. 性能考量与现代替代方案虽然 substr 和 substring 仍然被广泛使用但值得注意的是ECMAScript 规范中 substr 已被标记为遗留功能这意味着未来可能会被移除。在现代JavaScript中我们还有更多选择slice 方法结合了两者的优点允许负数索引像 substr使用位置而非长度像 substringconst str abcdef; console.log(str.slice(1, 3)); // bc console.log(str.slice(-3)); // def字符串扩展运算符可以将字符串转为字符数组操作正则表达式对于复杂的字符串提取更灵活在实际项目中我越来越倾向于使用 slice 方法因为它更直观且功能全面。不过理解 substr 和 substring 的区别仍然是每个JS开发者必备的基础知识。7. 常见误区与调试技巧即使有了记忆方法在实际编码中还是容易犯错。以下是我总结的几个常见陷阱参数类型混淆// 错误示范 const endPos 5; // 字符串类型的数字 console.log(012345.substring(2, endPos)); // 输出 234 console.log(012345.substr(2, endPos)); // 输出 2345非严格模式下解决方法始终确保参数是数字类型可以使用 parseInt 或 Number 转换。Unicode字符处理const str a; // 第一个字符是4字节的UTF-16 console.log(str.substr(0, 1)); // 输出乱码 console.log(str.substring(0, 1)); // 同样输出乱码对于包含多字节字符的字符串建议先转为数组console.log([...str].slice(0, 2).join()); // 正确输出 a链式调用时的混淆// 容易混淆的链式调用 hello.toUpperCase().substr(1, 3); // ELL hello.toUpperCase().substring(1, 3); // EL调试技巧在链式调用中建议拆分成多行或添加注释说明意图。记住当遇到奇怪的字符串截取结果时首先检查使用的是 substr 还是 substring然后确认参数的含义是否符合预期。