字符串的截取方法
面试中： 请问字符串的截取方法有哪些？各有什么特点？
相信大家都熟悉字符串中的截取方法： 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 = '小贝老师真漂亮!';
- 当只传一个参数的时候：默认为start，(start <= 范围 < str.length)
console.log(str.slice(1)); // 贝老师真漂亮!
- 当传两个参数的时候：截取的字符串为： start <= 截取范围 < end
console.log(str.slice(1, 4)); // 贝老师
2. String.substring
语法：
str.substring(start, end);
起始下标 <= 截取的范围 < 结束下标
包括起始下标对应字符, 但不包括结束下标;
也来个'串'
let str = '小贝老师真漂亮!';
- 当只传一个参数的时候：默认为start，(start <= 范围 < str.length)
console.log(str.substring(1)); // 贝老师真漂亮!
- 当传两个参数的时候：截取的字符串为： start <= 截取范围 < end
console.log(str.substring(1, 4)); // 贝老师
3. String.substr
语法：
str.substr(start, length);
起始下标<= 截取的范围 <= 自定义截取的长度
substr方法更直截（直接定义长度）
再来个'串'
let str = '小贝老师真漂亮!';
- 当只传一个参数的时候：默认为start， （start<= 截取范围 < str.length）
console.log(str.substr(1)); // 贝老师真漂亮!
- 当传两个参数的时候：截取的字符串为： (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
- 反向的下标对应的字符 ~ 截取至字符串结束
- 反向下标的绝对值大于了字符串长度会置为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
爽过之后，温存一下~
回头看看用过的纸巾~
先记住这个反向下标，然后总结下面几点，咱们就不会混淆啦~
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
来源：简书
