字符串截取的三个方法

说说 javascript 字符截取的三个方法

• String.prototype.substr
• String.prototype.substring
• String.prototype.slice

这三个方法平常都在用，只是有时不知道用哪个更好，今天就来看看他们的异同
这3个方法都接受2个可选参数。

第1种情况：都不传参

var string = "hello";
string.substr();
> hello
string.substring();
> hello
string.slice();
> hello

从上面代码可以看出，如果不传参3个方法没有什么区别，当然工作中不可能这样用，这里只是为什么测试它们的行为

第2种情况：都传一个参数 0

var string = "hello";
string.substr(0);
> hello
string.substring(0);
> hello
string.slice(0);
> hello

输出跟第一种情况一样，下面我们试一下第三种情况，传个2

第3种情况：都传一个参数 2

var string = "hello";
string.substr(2);
> llo
string.substring(2);
> llo
string.slice(2);
> llo

3个方法输出仍然相同，现在我们知道了，第一次参数的作用是表示从第几个位开始（包含当前位置），上面三种情况输出逻辑都一样，为什么要有3个行为一致的方法？先不要着急，上面说了，还可以传第二个参数，下面我们试试

第4种情况：都传两个参数

var string = "hello";
string.substr(2, 1);
> l
string.substring(2, 1);
> e
string.slice(2, 1);
> ''

开始产生差异了，上例substr和sbustring都有输出，只有slice输出了字符串。
由此我们知道第二个参数的作用，substr的第二个参数表示个数，其他两个还是表示位置，substring把两个参数进行了调换，返回了“e”， slicet终点小于起点，所有输出为空。

上面的例子参数都是自然数，下面我们试试负数会怎么样

第5种情况：第一个参数为负数

var string = "hello";
string.substr(-1);
> o
string.substring(-1);
> hello
string.slice(2, -1);
> o

这次差别更大了，substr 和 slice 为什么返回最后一个字母？根据<<javascript 高级程序设计>>说明，这两个方法在第一个参数为负数时，会把字符串长度加上这个参数，即 5 + -1 = 4, 所以输出了字母 "o", 而substring 会第一个负参数当0处理，所以输出了“hello”，接下来我们试试在第一个参数为负数，分别传入第二个参数为自然数和负数，看看返回值

var string = "hello";
string.substr(-1, 1); // 后面的参数表示个数
> o
string.substr(-1, -1); // 如果第二个参数为负数会转成0 即 string.substr(4, 0);
> ""

string.substring(-1,1); // 相当于 string.substring(0, 1)
> h
string.substring(-1,-1); // 会把所有负数转成0， 即 string.substring(0,0)
> ""

string.slice(-1, -1); // 将所有负数参数加上字符串长度 即 string.slice(4,4)
> ""

最后注意一下它们的不同之处

• substr 第一个参数为个数, 其他两个方法为位置下标
• substring 在参数为负数时，统统转成0, substr只把第二个参数转成0
• substring 在第一个大于第二个参数时，会隐式调换参数位置 substring(3,1) => substring(1,3)