JavaScript取子串方法slice,substr,substring对比表

在程序语言中，字符串可以说是最常用的一种类型，而在程序中对字符串的操作也是十分频繁。当程序语言自带多种字符串操作的方法时，用该语言编程程序时就有很多的便利性，提高开发的效率。但是当方法过多，甚至目的相似、参数雷同的时候，就容易造成迷惑难以选择的窘境。

在JavaScript中就有这样的情况出现，对于取字符串的子串的操作，JavaScript提供了三种不同的方法：slice，substr，substring。虽然在网上随便搜索一下，就可以找到介绍三者区别的文章，但是每次使用的时候，依然会迷糊无从选择。因此结合网上介绍的区别，在本文中将它们的异同之处罗列在表中，方便参照和区分。

测试字符串:

"0123456789"

浏览器：Chrome Version 29.0.1547.76

操作系统：Mac OS X Version 10.8.5

	参数	方法
参数1	参数2	slice(begin[, end])	substr(start[, length])	substring(from[, to])
参数/结果	7		789	789	789
说明	只有参数1，省略参数2	从参数1指定的坐标截取到字符串结尾
参数/结果	-3		789	789	0123456789
说明	参数1为负数	从字符串末尾开始计算位置*	视为0
参数/结果	21
说明	参数1大于或等于字符串长度	视为字符串长度，即返回空字符串
参数/结果	“3.21″		3456789	3456789	3456789
说明	参数1为浮点数或只含数字的字符串	类似parseInt()将数值转换成整形
参数/结果	NaN		0123456789	0123456789	0123456789
说明	参数1非为有效数值	非有效数值视为视为0
参数/结果	3	7	3456	3456789	3456
说明	既有参数1，又有参数2	从参数1的位置截取到参数2的位置	从参数1的位置截取长度为参数2的字符	同slice()
参数/结果	7	3		789	3456
说明	参数1大于参数2	返回空字符串	从参数1的位置截取长度为参数2的字符	交换参数1和参数2再进行截取
参数/结果	3	-3	3456		012
说明	参数2为负数	负数从字符末尾开始计算位置	视为长度0，返回空字符串	交换参数，负数视为0
参数/结果	3	21	3456789	3456789	3456789
说明	参数2大于或等于字符串长度	视为字符串长度，结果同省略参数2
参数/结果	3	NaN			012
说明	参数2非为有效数值	非有效数值视为0，返回空字符串	非有效数值视为0，因长度为0返回空字符串	非有效数值视为0，交换参数进行截取
参数/结果	-7	-3	3456
说明	参数1和参数2都为负数	从字符串末尾开始计算位置	长度为负数，返回空字符串	负数视为0，返回空字符串
参数/结果	-7	7	3456	3456789	0123456
说明	参数1为正数，参数2为负数	(自动套用上边的规则，不解释)

*从字符串末尾开始计算位置：-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推；也可视为字符串长度与负数之和的位置，若结果小于0，则视为0。

从上述表格对比中不难看出，三个方法之间的主要区别如下：

三个方法的参数1都代表子串开始位置，参数2在slice和substring中表示结束位置，而在substr中代表的则是子串长度；

对于负数态度，当出现在参数1的位置时，slice和substr从末尾开始计算，而substring不支持末尾计数法直接视为0；当出现在参数2位置时，slice和substring的处理同参数1：前者从末尾开始计算，后者转换成0，而substr则视负数长度为0返回空串；

对于参数1小于参数2的情况，substring最大的不同在于它会交换两个参数再截取子串，substr因第二参数表示的是长度因此并无异常，slice曽依然正常搜寻子串始末位置，若开始位置在结尾后边则返回空串。

根据MDN对substr的描述，在IE下可能并不支持负数从末尾计算的方式。

最后，自己来试试三个方法的效果吧:

字符串	参数1	参数2	运行	slice	substr	substring
				iderzheng	iderzheng.com	iderzheng

// (function(argument) {
function $(str) { return document.getElementById(str); }
var subfix = '_603',
str = $('str' + subfix),
arg1 = $('arg1' + subfix),
arg2 = $('arg2' + subfix),
run = $('run' + subfix),
slice_result = $('slice_result' + subfix),
substr_result = $('substr_result' + subfix),
substring_result = $('substring_result' + subfix),
slice = String.prototype.slice,
substr = String.prototype.substr,
substring = String.prototype.substring;
run.onclick = function(e) {
var args = [arg1.value];
if (arg2.value) args.push(arg2.value);
slice_result.innerHTML = slice.apply(str.value, args);
substr_result.innerHTML = substr.apply(str.value, args);
substring_result.innerHTML = substring.apply(str.value, args);
}
run.onclick();
$('trial_603').style.display = '';
})();
// ]]>

References:
String – JavaScript | MDN

What is the difference between String.slice and String.substring in JavaScript? – Stack Overflow

Slice vs Substr vs Substring vs [ ] Methods · jsPerf

欢迎到我的新博客地址阅读本文