JavaScript 字符串方法有很多, 其中有三个方法与字符串裁剪有关, 他们分别是 slice()substring()和 substr(), 我把他们统称为三剑客
由于他们都是用于裁剪字符串, 很容易混淆, 所以接下来我将结合具体实例来讲讲他们的共同点和区别
一共同点
接受一个或两个参数, 其中第一个参数为裁剪的开始位置
都会返回被裁剪下来的子字符串, 而原字符串不受影响
若不传第二个参数, 则从开始位置 (第一个参数) 一直截取到字符串结尾
- var str = '微信公众号: 前端微站';
- var str1 = str.slice(2);
- console.log(str1); // "公众号: 前端微站"
- str1 = str.substring(2);
- console.log(str1); // "公众号: 前端微站"
- str1 = str.substr(2);
- console.log(str1); // "公众号: 前端微站"
- console.log(str); // "微信公众号: 前端微站"
可以看出, 当只传入一个参数时, 这三个方法的用法和作用都是一致的, 都是将公字 (索引值为 2) 一直到字符串末尾的字符串裁剪下来并返回, 并且都不会影响到原字符串
二区别
slice()和 substring()的第二个参数均表示的是裁剪的结束位置 (但不包括该项, 这与数组中的 slice() 方法类似), 而 substr()的第二个参数则表示的是裁剪下来字符串长度
当传入的参数为负值时, slice()会将所有负参数与字符串的长度相加, substring()会把所有负参数都转换为 0, 而 substr()就相对比较复杂了, 它会将第一个负参数加上字符串长度, 第二个参数转换为 0
1. 参数均为正数
- var str = '微信公众号: 前端微站';
- var str1 = str.slice(2,5);
- console.log(str1); // "公众号"
- str1 = str.substring(2,5);
- console.log(str1); // "公众号"
- str1 = str.substr(2,3);
- console.log(str1); // "公众号"
很明显, slice()和 substring()用法一致, 两个参数分别都表示的是起始位置 2 和结束位置 5, 不包含结束位置 5 所在字符 (:), 而 substr() 第二个参数表示的是要裁剪下来的字符串长度, 实例中是裁剪 3 个字符
2. 参数存在负数
- var str = '微信公众号: 前端微站';
- console.log(str.length); // 10
- var str1 = str.slice( - 4); // 相当于 str.slice(6)
- console.log(str1); // "前端微站"
- str1 = str.substring( - 4); // 相当于 str.substring(0)
- console.log(str1); // "微信公众号: 前端微站"
- str1 = str.substr( - 4); // 相当于 str.substr(6)
- console.log(str1); // "前端微站"
- var str2 = str.slice(2, -4); // 相当于 str.slice(2,6)
- console.log(str2); // "公众号:"
- str2 = str.substring(2, -4); // 相当于 str.substring(2,0), 也就是 str.substring(0,2)
- console.log(str2); // "微信"
- str2 = str.substr(2, -4); // 相当于 str.substr(2,0)
- console.log(str2); // ""
- var str3 = str.slice( - 2, -4); // 相当于 str.slice(8,6)
- console.log(str3); // ""
- str3 = str.substring( - 2, -4); // 相当于 str.substring(0,0)
- console.log(str3); // ""
- str3 = str.substr( - 2, -4); // 相当于 str.substr(8,0)
- console.log(str3); // ""
- var str4 = str.slice( - 4, -2); // 相当于 str.slice(6,8)
- console.log(str4); // "前端"
- str4 = str.substring( - 4, -2); // 相当于 str.substring(0,0)
- console.log(str4); // ""
- str4 = str.substr( - 4, -2); // 相当于 str.substr(6,0)
- console.log(str4); // ""
当参数为负数时, 只需牢记, slice 见负加总长, substring 见负则归零, substr 一加总长一归零 另外还需要特别注意的一点是, slice()第一个参数须小于第二个参数才能正常截取字符串, 否则返回的是空字符串, 而 substring()则没有这个问题
本文重点总结:
substr()第二个参数是裁剪长度, 只要为负, 裁剪结果必定是空字符串
不管如何裁剪, 均不影响原字符串
当参数为负, slice 加总长, substring 则归零, substr 一加总长一归零
来源: http://www.jianshu.com/p/371115414b3b