面試中： 請問字符串的截取方法有哪些？各有什么特點？
相信大家都熟悉字符串中的截取方法： 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，結果截取到了字符串結束
來張紙巾(粗糙的畫畫)擦擦汗吧~ 反向下標是個啥？
反向下標.PNG
- 反向的下標對應的字符 ~ 截取至字符串結束
- 反向下標的絕對值大于了字符串長度會置為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~
2.Substring遇上一正一負的時候
2.1 當起始下標為'辣妹子'(負數)，結束下標為'軟妹子'（正數）
哈哈，果斷的man！負數都置為0了，真好~
2.2當起始下標為'辣妹子'(負數)，結束下標也為'辣妹子'(負數)的時候~
鋼鐵直男的果斷，負數的結束下標也置0了，導致都是空字符串
2.3難不成這個東東就這么硬氣嗎？遇上負數這個妹子就一點都不懂得變通嗎？
請看當起始下標為正數，結束下標為妹子(負數)
哈哈，差點單身一輩子了吧~
Substring方法：
當結束下標為負數則置為0，然后與起始下標互換位置;
起始下標正數搖身一變成為了結束下標截取的;
方向依然從左往右
三、給String.substr()一次機會-當它遇上'辣妹子'(負數)又是什么情況呢？
1. 起始值可以為負數，but自定義截取的長度請不要定義為負數
當起始下標為負數時，采取反向下標對應
當截取的長度設置為0或者是負數的時候則返回空字符串
爽過之后，溫存一下~
回頭看看用過的紙巾~
先記住這個反向下標，然后總結下面幾點，咱們就不會混淆啦~
反向下標.PNG
1、 Slice
a) 注意截取順序： 從左至右
b) 結束下標出現在起始下標左側則返回空字符串
2、 Substring
a) 負數下標會置零，
b) start為正數，end為負數，end置零后會與start互換位置
3、 substr
a) 長度不能為負數
b) Start可為負數，可參考slice方法start為負數
首先很感謝能看到這里，也希望對大家有所幫助，如果問題，請多多賜教~
貝程教育-國內資深的前端，全棧工程師培訓基地
