JavaScript字符串截取方法：slice、substring与substr详解及兼容性

结果或目标

掌握slice()、substring()和substr()在不同参数（正/负值）下的返回结果，识别其在IE8/9等遗留环境中的兼容性问题，并根据实际场景选择最合适的截取方案。

准备条件

2. 文本编辑器或IDE
4. JavaScript运行环境（Node.js或浏览器控制台）
6. 针对IE8/9的测试环境（如需验证遗留兼容性问题）

真实操作顺序

第1步：使用slice()进行字符串截取

目的：获取从指定开始位置到结束位置的子串，支持负数索引，行为符合直觉。

入口：调用String对象的slice(start [, end])方法。

动作与参数：

• start: 起始位置（包含）。若为负数，则从字符串末尾向前计数（例如-1表示最后一个字符）。
• end (可选): 结束位置（不包含）。若省略，则截断至字符串末尾。若为负数，同样从末尾计算。

关键特性：

• 正值处理：按常规索引截取。如 'helloWorld'.slice(3,7) 返回 'loWo'。
• 负值处理：将负数加上字符串长度作为实际索引。例如 'helloWorld'.slice(-3) 相当于 slice(7)，返回 'rld'。
• 逆向截取：如果 end 小于 start，返回空字符串 ''，不会自动交换参数。
• 兼容性：IE8及以上版本行为与现代浏览器一致，兼容性良好。

第2步：使用substring()进行字符串截取

目的：获取两个索引之间的子串，自动修正参数大小，但忽略负数索引。

入口：调用String对象的substring(start [, stop])方法。

动作与参数：

• start: 起始位置（包含）。
• stop (可选): 结束位置（不包含）。

关键特性：

• 正值处理：与slice()类似。如 'helloWorld'.substring(3,7) 返回 'loWo'。
• 自动排序：如果 start > stop，方法会自动交换两个参数。例如 substring(7,3) 等同于 substring(3,7)。
• 负值处理：这是与其他方法最大的不同点。任何负数参数都会被视为0。例如 'helloWorld'.substring(3,-4)，-4被转为0，变为 substring(3,0)，由于自动排序，实际执行 substring(0,3)，结果为 'hel'。
• 兼容性：IE8及以上版本行为一致。

第3步：使用substr()进行字符串截取

目的：基于起始位置和长度截取字符串。注意：该方法已被标记为废弃，不推荐在新代码中使用。

入口：调用String对象的substr(start [, length])方法。

动作与参数：

• start: 起始位置（包含）。
• length (可选): 截取的字符数量。若省略，则截至末尾。

关键特性：

• 正值处理：第二个参数代表长度。如 'helloWorld'.substr(3,7) 从索引3开始取7个字符，结果为 'loWorld'。
• 负值处理：
  • 若 start 为负数，视为从末尾倒推（同slice）。
  • 若 length 为负数或0，通常返回空字符串 ''。
• 兼容性陷阱：IE8及更早版本存在严重Bug。当传递负数时，IE可能会直接返回原始完整字符串而非按逻辑截取。IE9修复了此问题。鉴于兼容风险，现代开发应避免使用。

第4步：综合对比与最佳实践

在处理非负整数索引时，slice() 和 substring() 的结果通常一致，主要区别在于对逆序参数（start > end）的处理：slice返回空串，substring自动交换参数。

在处理负数索引时：
- slice() 行为最符合预期，负数代表倒数位置。
- substring() 将负数强制转为0，常导致意外结果。
- substr() 虽支持负数起始，但因历史兼容性问题已被弃用。

完成判断

通过上述代码示例，能够准确预测任意参数组合下三个方法的返回值。特别是在涉及IE8/9维护或处理动态负索引时，确认选择了正确的函数以避免数据截取错误。

简要总结

综上所述，虽然三种方法都能实现字符串截取，但推荐优先使用 slice()。它在处理负数索引时逻辑清晰且兼容性良好，同时避免了 substr() 的废弃状态和 substring() 在负数处理上的隐式转换陷阱。除非有特定的历史遗留代码维护需求，否则应将 slice() 作为标准截取工具。

以上就是JavaScript字符串截取方法slice、substring和substr的详细对比内容，更多关于JavaScript前端开发技巧的资料请关注本站其它相关文章！