slice()、substr()、substring()方法详解与区分

slice()、substr()、substring()方法

相似点：

• 功能：都是截取字符串，并且都返回一个新的字符串
• 参数：都支持接受两个参数，第一个参数都是代表截取的开始位置。第二个参数除了 substr() ，其他两个 slice() 和 substring() 都是代表截取的结束位置
• 都只接收一个参数的情况下，都是从起始位置一致截取到末尾

不同点:

slice()

let str = '12345';
let sli1 = str.slice(-3, 4);  // '34'
let sli1 = str.slice(3, -1);  // '4'
let sli1 = str.slice(-3, -1);  // '34'

说明：可以看出 slice() 方法会将传入的负数与字符串的长度相加，将其转为正数的情况，如 str.slice(-3, 4) 就相当于 str.slice(2, 4)

substr()

let str = '12345';
let sli1 = str.substr(-3, 2);  // '34'
let sli1 = str.substr(3, -1);  // ''
let sli1 = str.substr(-3, -1);  // ''

说明：substr() 第一个参数也是将传入的负数与字符串长度相加，转为正数。重点是第二个参数，如果是负数则会默认截取的长度为 0。所以最后两条语句都返回了空字符串 ‘’

substring()

let str = '12345';
let sli1 = str.substring(-3, 3);  // '123'
let sli1 = str.substring(3, -1);  // '123'
let sli1 = str.substring(-3, -1);  // ''

说明：这段代码中，我们发现了两点：
（1）substring() 会把接收到的负数，全部转为 0 再进行截取。
（2）接收两个参数时，该方法会先对比两个参数的大小（如有负数会先处理再比较），把较小的一方当做截取的开始位置，较大一方当做截取的结束位置
尤其是第二点特征，slice() 的话，不会对两个参数进行对比，如果第一个参数大于第二个参数，会直接返回空字符串

总结:

• 1.slice() 两个参数分别代表着截取的开头和结尾，而 substr() 的第二个参数则代表着截取的位数（即长度），substring() 先对两个参数进行大小对比，再确定截取区域
• 2.三个方法如果截取到末尾，便会停止截取，无论参数约定的结束位置、或约定的长度有多大。
• 3.当参数为负数的情况：slice() 会把负数与字符串的长度相加，得到的正数再执行代码。substr() 第一个参数也是把负数与字符串的长度相加得到正数，第二个参数则会把负数转为 0。substring() 则会把所有负数参数转为 0