slice()，substring()和substr()的异同

同

1. 三个方法都是对字符串的截取操作，返回被操作的字符串，不会修改字符串本身；
2. 都接受一或两个参数，第一个参数都为开始的位置；
3. 只有一个参数且为正数的情况下返回的结果相同；

var str = "12345678";
console.log(str.slice(3)); // "45678"
console.log(str.substring(3)); // "45678"
console.log(str.substr(3)); // "45678"

异

1. 第二个参数含义不同

slice()和substring()第二个参数含义都为指定字符串最后一个字符后面的位置，
而substr()第二个参数含义为返回的字符数量

var str = "12345678";
console.log(str.slice(3,4)); // "4"
console.log(str.substring(3,4)); // "4"
console.log(str.substr(3,4)); // "4567"

2. 参数为负数

• slice()会把负数与字符串长度相加

var str = "12345678";
console.log(str.slice(-3)); // 相当于 scice(5)  =>  "678"
console.log(str.slice(-3,7)); // 相当于 scice(5,7)  =>  "67"
console.log(str.slice(3,-3)); // 相当于 scice(3,5)  =>  "45"
console.log(str.slice(-5,-3)); // 相当于 scice(3,5)  =>  "45"

• substring()会把负数转换为0

var str = "12345678";
console.log(str.substring(-3)); // 相当于 substring(0)  =>  "12345678"
console.log(str.substring(-3,7)); // 相当于 substring(0,7)  =>  "1234567"
console.log(str.substring(-5,-3)); // 相当于 substring(0,0)  =>  ""

• substr()第一个参数为负数会把负数与字符串长度相加和slice()相同，第二个参数为负数返回空字符串

var str = "12345678";
console.log(str.substr(-3)); // 相当于 substr(5)  =>  678
console.log(str.substr(5,-3)); // 相当于 substr(5,0)  =>  ""

3. 两个参数位置颠倒

意思为将较大的数作为开始位置，而将较小的数作为结束位置，
这个不同点只在slice()和substring()才存在，
substr()只有一个参数表示位置，还有一个表示长度，所以不存在这个问题

• slice()会返回空字符串

var str = "12345678";
console.log(str.slice(5,3)); // ""
console.log(str.slice(-3,3)); // 相当于 scice(5,3)  =>  ""
console.log(str.slice(7,-3)); // 相当于 scice(7,5)  =>  ""

• substring()会调换两个参数的位置

var str = "12345678";
console.log(str.substring(5,3)); // 相当于 substring(3,5)  =>  "45"
console.log(str.substring(-3,3)); // 相当于 substring(0,3)  =>  "123"
console.log(str.substring(7,-3)); // 相当于 substring(7,0)  => substring(0,7)  => "1234567"

总结

来张表吧

本篇如能对您有所帮助，实在是感到荣幸。如有不合理之处也请大家多多指点。