面试中： 请问字符串的截取方法有哪些？各有什么特点？
相信大家都熟悉字符串中的截取方法： slice、 substring 、substr，它们的身影总会出现在面试中、工作中
那么总结一下吧~

咱们先来一段前戏：

字符串是一种基本数据类型，为什么它身上会有这三种方法呢？哈哈，一句老话，“万物皆对象”，其实字符串是一种包装对象类型，每当读取一个基本数据类型值的时候，或者引用了其方法或属性，JavaScript就会将字符串值val通过调用new String(val)的方法转换成对象，那么这个对象继承了字符串的方法，一旦方法使用结束之后，这个新创建的对象就会被销毁（自生自灭~）

来个凉菜：

        var str = 'some string';
        // (1) 创建 String 类型的一个实例；
        // (2) 在实例上调用指定的方法；

        // var str = new String('some string');
        // var newStr = str.slice(2);

        var newStr = str.slice(2);
        // (3) 销毁这个实例
        // str = null;

开始咱们的翻云覆雨吧~
嘿嘿~ 不过还是先来几个咱们熟悉的姿势~

1. String.slice

语法：
str.slice(start, end);
起始下标(start) <= 截取的范围 < 结束下标(end)
包括起始下标对应字符, but不包括结束下标;

来个'串'

let str = '小贝老师真漂亮!';

1. 当只传一个参数的时候：默认为start，(start <= 范围 < str.length)

console.log(str.slice(1)); // 贝老师真漂亮!

2. 当传两个参数的时候：截取的字符串为： start <= 截取范围 < end

console.log(str.slice(1, 4)); // 贝老师

---

2. String.substring

语法：
str.substring(start, end);
起始下标 <= 截取的范围 < 结束下标
包括起始下标对应字符, 但不包括结束下标;

也来个'串'

let str = '小贝老师真漂亮!';

1. 当只传一个参数的时候：默认为start，(start <= 范围 < str.length)

console.log(str.substring(1)); // 贝老师真漂亮!

2. 当传两个参数的时候：截取的字符串为： start <= 截取范围 < end

console.log(str.substring(1, 4)); // 贝老师

---

3. String.substr

语法：
str.substr(start, length);
起始下标<= 截取的范围 <= 自定义截取的长度
substr方法更直截（直接定义长度）

再来个'串'

let str = '小贝老师真漂亮!';

1. 当只传一个参数的时候：默认为start， （start<= 截取范围 < str.length）

console.log(str.substr(1)); // 贝老师真漂亮!

2. 当传两个参数的时候：截取的字符串为： (start <= 截取范围 <= 自定义截取的长度)

console.log(str.substr(1, 4)); // 贝老师真

---

熟悉的姿势咱们都用过了，试试不常用的姿势了吧~
要进入高潮啦~ 忍住啦~

一. String.slice() 遇上了'辣妹子'(负数)该如何是否？

1. 当起始值start为负数的时候：

let str = '小贝老师真漂亮!';
console.log(str.slice(-1)); // !
console.log(str.slice(-2)); // 亮!
console.log(str.slice(-3)); // 漂亮!

结果为：
反向下标截取
反向的下标<= 截取范围 < 字符串长度

2. 当反向下标的绝对值大于或等于长度的时候呢？

console.log(str.slice(-str.length)); // 小贝老师真漂亮!
console.log(str.slice(-str.length - 1)); // 小贝老师真漂亮!
console.log(str.slice(-str.length - 2)); // 小贝老师真漂亮!

当反向下标的绝对值大于或等于字符串长度，仿佛会置为0，结果截取到了字符串结束

来张纸巾(粗糙的画画)擦擦汗吧~ 反向下标是个啥？

image

1. 反向的下标对应的字符 ~ 截取至字符串结束
2. 反向下标的绝对值大于了字符串长度会置为0，然后再开始截取

3. '软妹子'(正)和'辣妹子'(负)一起上

3.1 起始下标为正数 <= 截取范围 < 结束下标为负数

// 负数的结束下标未超越正数的起始下标
console.log(str.slice(1, -2)); // 贝老师真漂
console.log(str.slice(2, -4)); // 老师
console.log(str.slice(2, -5)); // 老

// 相同位置 正负下标对应同一个字符
console.log(str.slice(2, -6)); // ''

// 负数的结束下标超越正数的起始下标
console.log(str.slice(2, -7)); // ''

会发现只要end在start右侧才会正常的截取;
当end与start重合或者在start的左侧则变成了空字符串
说明违反了 start <= 截取范围 < end规则（截取的方向是从左至右的），返回的是空字符串

3.2 起始下标为负数<= 截取范围 < 结束下标为正数

当start为负数与0重合或在0的左侧，则会置为0，而重合返回是空字符串，按照start <= 截取范围 < end规则

// 负数的起始下标 -> 0的结束下标
console.log(str.slice(-9, 0)); // ''

// 负数的起始下标 === 0的结束下标
console.log(str.slice(-8, 0)); // ''

// 负数的起始下标 -> 正数的结束下标
console.log(str.slice(-8, 2)); // '小贝'
console.log(str.slice(-8, 8)); // '小贝老师真漂亮!'

当然还得测试一下end在start左侧的时候

结果：返回的是空字符串，（可以看出截取的方向是从左往右: start -> end）

// 负数的起始下标 -> 正数的结束下标 (end在start左侧)
console.log(str.slice(-3, 2)); // ''

---

二. String.Substring() 遇上了'辣妹子'(负数)又该如何是好？

1. 当起始下标为'辣妹子'(负数)的时候

负数的起始值果断置0~

image image

2.Substring遇上一正一负的时候

2.1 当起始下标为'辣妹子'(负数)，结束下标为'软妹子'（正数）

哈哈，果断的man！负数都置为0了，真好~

image image

---

2.2当起始下标为'辣妹子'(负数)，结束下标也为'辣妹子'(负数)的时候~

钢铁直男的果断，负数的结束下标也置0了，导致都是空字符串

image image

2.3难不成这个东东就这么硬气吗？遇上负数这个妹子就一点都不懂得变通吗？

请看当起始下标为正数，结束下标为妹子(负数)

image image

哈哈，差点单身一辈子了吧~
Substring方法：
当结束下标为负数则置为0，然后与起始下标互换位置;
起始下标正数摇身一变成为了结束下标截取的;
方向依然从左往右

三、给String.substr()一次机会-当它遇上'辣妹子'(负数)又是什么情况呢？

1. 起始值可以为负数，but自定义截取的长度请不要定义为负数

当起始下标为负数时，采取反向下标对应
当截取的长度设置为0或者是负数的时候则返回空字符串

image image

爽过之后，温存一下~

回头看看用过的纸巾~
先记住这个反向下标，然后总结下面几点，咱们就不会混淆啦~

image

1、 Slice

a) 注意截取顺序： 从左至右
b) 结束下标出现在起始下标左侧则返回空字符串

2、 Substring

a) 负数下标会置零，
b) start为正数，end为负数，end置零后会与start互换位置

3、 substr

a) 长度不能为负数
b) Start可为负数，可参考slice方法start为负数

首先很感谢能看到这里，也希望对大家有所帮助，如果问题，请多多赐教~

贝程教育-国内资深的前端，全栈工程师培训基地

作者：我只会吃饭
链接：https://www.jianshu.com/p/116f4b35d0a6
来源：简书

简书著作权归作者所有！！！