slice()，substr()和substring()的详解与区别

1. slice(x,y)

slice(x,y)截取字符串的一部分，并返回一个新的字符串。其中x为起始位置索引值，y为结束位置，不包含y。可以将x，y理解为 [x,y)。其中，x和y的值存在以下几种情况。

① 只有一个参数
此时会从参数下标开始到字符串结尾进行截取。

var str = "Hello world!";
console.log(str.slice(3));
// lo world!

② x<y
此时会从x开始，到y结束，不包含y。

var str = "Hello world!";
console.log(str.slice(3, 8));
// lo wo

③ x>y
此时会返回一个空字符串。

var str = "Hello world!";
console.log(str.slice(8, 3));
// <empty string>

④ y为负数
此时会先将y的值与字符串的长度相加，然后将得到的结果当做新的y值。然后再参考上面的2和3两种情况，根据情况给出结果。

var str = "Hello world!";
console.log(str.length);
// 12
console.log(str.slice(3, -12));	// -> consol.log(str.slice(3, (-12 + 12));
// <empty string>
console.log(str.slice(3, -2));	// -> consol.log(str.slice(3, (-2 + 12));
// lo worl

2. substr(x,y)

substr(x,y)截取字符串的一部分，并返回一个字符串。不同的是，其中x为起始位置索引值，y为截取长度。因为x和y参数含义不同，所以区分x和y互换的意义不大。所以，x和y的值存在的情况如下。

① 只有一个参数
此时会从参数下标开始到字符串结尾进行截取。

var str = "Hello world!";
console.log(str.substr(3));
// lo world!

② 有两个参数
此时按照x为起始位置索引值，y为截取长度，来对字符串进行截取。

var str = "Hello world!";
console.log(str.substr(3, 5));
// lo wo

③ y<0
此时会返回一个空字符串。

var str = "Hello world!";
console.log(str.substr(3, -5));
// <empty string>

3. substring(x,y)

substring(x,y)它的作用是提取字符串的子串。和slice(x,y)一样，也是x为起始位置索引值，y为结束位置，不包含y。可以将x，y理解为 [x,y)。其中，x和y的值存在以下几种情况。

① 只有一个参数
此时会从参数下标开始到字符串结尾进行截取。

var str = "Hello world!";
console.log(str.substring(3));
// lo world!

② x<y
此时会从x开始，到y结束，不包含y。

var str = "Hello world!";
console.log(str.substring(3, 8));
// lo wo

③ x>y
此时会自动将x与y的位置进行互换，然后按照第二种情况给出结果。

var str = "Hello world!";
console.log(str.substring(8, 3));
// lo wo

④ x=y
此时会返回一个空字符串。

var str = "Hello world!";
console.log(str.substring(3, 3));
// <empty string>

⑤ y<0
当y为负值时，会将y值看做0，然后根据第三种情况给出结果。换句话说，就是会提取x之前（不包含x）的所有字符串。

var str = "Hello world!";
console.log(str.substring(3, -5));
// Hel

三个方法的区别

1.slice和substring参数分别为(起始位置索引值，结束位置索引值)，substr的参数则为(起始位置索引值，截取长度)；
2.slice不能颠倒参数顺序，substring可以；
3.slice和substring的第二个参数为负时，结果不同。