JavaScript中substr、substring与slice方法的区别与测试

JavaScript字符串截取方法对比概述

网络上关于substr、substring和slice方法区别的文章众多，内容大体相似。为了验证准确性，我将相关文章中的代码在本地环境中进行了实际测试，发现部分测试结果与原文描述存在差异。

基于亲自验证的结果，我将这些发现整理记录，以便日后查阅和参考。

 
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|

 
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|

 
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方法的第二个参数（arg2）与其他两个方法的arg2含义完全不同，因此单独列出讨论。

当第一个参数arg1小于0时，不同浏览器的处理结果存在差异：IE浏览器会直接将arg1视为0，而Chrome浏览器则改变读取方向，从右向左进行索引。

对于arg2大于arg1的情况（即第二个参数大于第一个参数）：

substring方法会自动交换两个参数的位置，将数值较大的参数置于arg2位置，数值较小的置于arg1位置。

slice方法在这种情况下返回空字符串。

关于对负数参数的处理：

substring方法会将负数参数转换为0。

slice方法会将负数参数转换为（字符串长度减去该参数数值）。