JavaScript 中的 substring、substr 和 slice 有什么区别？

这三个方法作用都是为了【截取】字符串，既然都有相同的作用，那为啥还需要搞这么多个方法呢？今天我们就来探讨一下它们的区别：

substring()

substring()方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

语法

str.substring(start, stop)

参数	描述
start	必需，需要截取的第一个字符的索引，访索引位置的字符作为返回的字符串的首字母
stop	可选，一个0到字符串长度之间的整数，以该数字为索引的字符串不包含在截取的字符串内

var str = 'abcdefg';

str.substring(0, 3) // abc; [包含0，不包含3]
str.substring(3, 0) // abc; [会把小的值当成start, 大的值当成stop]
str.substringn(3, -3) // abc; [不允许负值，负值会自动变成0]
str.substring(3, NaN) // abc; [非数值转成0]
str.substring(3, 3) // '' [start === stop，返回空字符串]
str.substring(0, 7) // abcdefg
str.substring(0, 10) // abcdefg [超出str的总长度，取整个长度]

substr()

substr()方法返回一个字符串中从指定位置开始到指定字符数的字符。

语法

str.substr(start, length)

参数	描述
start	必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length	可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

注意第二个参数是length, 而substring是stop, 从这字面意思应该也能意会出一些差别吧！

var str = 'abcdefghij';

str.substr(1, 2) // bc [从第一位开始，往取两个值]
str.substr(-3, 2) // hi [start为-3, 就是倒数第三个字符（或者可以理解为str.length - 3）的索引位置]
str.substr(-3) // hij [省略了leng，则从起始位置取到尾]
str.substr(3, 0); str.substr(3, -2); // '' [如果 length 为 0 或负值，则 substr 返回一个空字符串]
// **注意length为 0 和 省略 是有区别的哦！**
str.substr(-20, 2); str.substr(-19, 2) // ab [如果start为负值，超出了字符串总长度，则算作从0开始]
str.substr(11, 2) // '' [start 超出了字符串总长度，返回空字符串]

PS: 警告： 尽管 String.prototype.substr(…) 没有严格被废弃 (as in "removed from the Web standards"), 但它被认作是遗留的函数并且可以的话应该避免使用。它并非JavaScript核心语言的一部分，未来将可能会被移除掉。如果可以的话，使用 substring() 替代它。

slice()

slice()方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

语法

str.slice(start, end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

var str = 'The morning is upon us.'; // str 的长度 length 是 23。

str.slice(1, 8); // he morn [包含1，不包含8]
str.slice(4, -2); // morning is upon u [end 为负值就会取 23-2=21，所以相当于slice(4, 21)]
str.slice(12); // is upon us. [省略end，则取到尾]
str.slice(30); // '' [start超出了字符串长度，则返回空字符串]

str.slice(-3); // 'us.' [start为负值，length-3,所以相当于slice(20)]
str.slice(-3, -1); // 'us' [相当于slice(20, 22)]

对了，顺便说一下数组也有slice

这就是它们的区别，请自行取用... 请记住官方已经想废弃 substr() 所以还是请谨慎使用吧...