本文通过本地测试对比JavaScript中substr、substring和slice三个字符串截取方法的差异。重点解析参数为负数或arg2小于arg1时的行为，指出IE与Chrome在substr处理上的不同，以及substring和slice对负数及参数顺序的处理逻辑，帮助开发者避免常见陷阱。
JavaScript字符串截取方法对比概述
网络上关于substr、substring和slice方法区别的文章众多，内容大体相似。为了验证准确性，我将相关文章中的代码在本地环境中进行了实际测试，发现部分测试结果与原文描述存在差异。
基于亲自验证的结果，我将这些发现整理记录，以便日后查阅和参考。
substr
substr方法测试与结果
以下是substr方法的测试代码：
document.write("|" + str.substr(0,5) + "|" + "<br />");
document.write("|" + str.substr(0) + "|" + "<br />");
document.write("|" + str.substr(5,1) + "|" + "<br />");
document.write("|" + str.substr(-5,2) + "|" + "<br />");
document.write("|" + str.substr(-2,-5) + "|" + "<br />");上述代码的执行结果如下：
|12345|
|123456|
|6|
IE浏览器输出：|12|，Chrome浏览器输出：|23|
substring
substring方法测试与结果
接下来是substring方法的测试代码：
document.write("|" + str.substring(0,5) + "|" + "<br />");
document.write("|" + str.substring(0) + "|" + "<br />");
document.write("|" + str.substring(5,1) + "|" + "<br />");
document.write("|" + str.substring(-5,2) + "|" + "<br />");
document.write("|" + str.substring(-2,-5) + "|" + "<br />");
document.write("|" + str.substring(2,-5) + "|" + "<br />");substring方法的执行结果如下：
|12345|
|123456|
|2345|
|12|
|12|
slice
slice方法测试与结果
最后是slice方法的测试代码：
document.write("|" + str.slice(0,5) + "|" + "<br />");
document.write("|" + str.slice(0) + "|" + "<br />");
document.write("|" + str.slice(5,1) + "|" + "<br />");
document.write("|" + str.slice(-5,2) + "|" + "<br />");
document.write("|" + str.slice(-2,-5) + "|" + "<br />");
document.write("|" + str.slice(2,-5) + "|" + "<br />");slice方法的执行结果如下：
|12345|
|123456|
|2|
||
如果你的预期结果与上述打印效果完全一致，说明你的基础非常扎实。如果感到犹豫或结果出乎意料，希望本文能对你有所帮助。
总结
substr
核心差异总结：参数处理逻辑
需要特别注意，substr方法的第二个参数（arg2）与其他两个方法的arg2含义完全不同，因此单独列出讨论。
当第一个参数arg1小于0时，不同浏览器的处理结果存在差异：IE浏览器会直接将arg1视为0，而Chrome浏览器则改变读取方向，从右向左进行索引。
substring和slice
对于arg2大于arg1的情况（即第二个参数大于第一个参数）：
substring方法会自动交换两个参数的位置，将数值较大的参数置于arg2位置，数值较小的置于arg1位置。
slice方法在这种情况下返回空字符串。
关于对负数参数的处理：
substring方法会将负数参数转换为0。
slice方法会将负数参数转换为（字符串长度减去该参数数值）。