面試中： 請問字符串的截取方法有哪些？各有什么特點？
相信大家都熟悉字符串中的截取方法： slice、 substring 、substr，它們的身影總會出現(xiàn)在面試中、工作中
那么總結(jié)一下吧~
咱們先來一段前戲：
字符串是一種基本數(shù)據(jù)類型，為什么它身上會有這三種方法呢？哈哈，一句老話，“萬物皆對象”，其實字符串是一種包裝對象類型，每當讀取一個基本數(shù)據(jù)類型值的時候，或者引用了其方法或?qū)傩?，JavaScript就會將字符串值val通過調(diào)用new String(val)的方法轉(zhuǎn)換成對象，那么這個對象繼承了字符串的方法，一旦方法使用結(jié)束之后，這個新創(chuàng)建的對象就會被銷毀（自生自滅~）
來個涼菜：
var str = 'some string';
// (1) 創(chuàng)建 String 類型的一個實例；
// (2) 在實例上調(diào)用指定的方法；
// 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) <= 截取的范圍 < 結(jié)束下標(end)
包括起始下標對應(yīng)字符, but不包括結(jié)束下標;
來個'串'
let str = '小貝老師真漂亮!';
- 當只傳一個參數(shù)的時候：默認為start，(start <= 范圍 < str.length)
console.log(str.slice(1)); // 貝老師真漂亮!
- 當傳兩個參數(shù)的時候：截取的字符串為： start <= 截取范圍 < end
console.log(str.slice(1, 4)); // 貝老師
2. String.substring
語法：
str.substring(start, end);
起始下標 <= 截取的范圍 < 結(jié)束下標
包括起始下標對應(yīng)字符, 但不包括結(jié)束下標;
也來個'串'
let str = '小貝老師真漂亮!';
- 當只傳一個參數(shù)的時候：默認為start，(start <= 范圍 < str.length)
console.log(str.substring(1)); // 貝老師真漂亮!
- 當傳兩個參數(shù)的時候：截取的字符串為： start <= 截取范圍 < end
console.log(str.substring(1, 4)); // 貝老師
3. String.substr
語法：
str.substr(start, length);
起始下標<= 截取的范圍 <= 自定義截取的長度
substr方法更直截（直接定義長度）
再來個'串'
let str = '小貝老師真漂亮!';
- 當只傳一個參數(shù)的時候：默認為start， （start<= 截取范圍 < str.length）
console.log(str.substr(1)); // 貝老師真漂亮!
- 當傳兩個參數(shù)的時候：截取的字符串為： (start <= 截取范圍 <= 自定義截取的長度)
console.log(str.substr(1, 4)); // 貝老師真
熟悉的姿勢咱們都用過了，試試不常用的姿勢了吧~
要進入高潮啦~ 忍住啦~
一. String.slice() 遇上了'辣妹子'(負數(shù))該如何是否？
1. 當起始值start為負數(shù)的時候：
let str = '小貝老師真漂亮!';
console.log(str.slice(-1)); // !
console.log(str.slice(-2)); // 亮!
console.log(str.slice(-3)); // 漂亮!
結(jié)果為：
反向下標截取
反向的下標<= 截取范圍 < 字符串長度
2. 當反向下標的絕對值大于或等于長度的時候呢？
console.log(str.slice(-str.length)); // 小貝老師真漂亮!
console.log(str.slice(-str.length - 1)); // 小貝老師真漂亮!
console.log(str.slice(-str.length - 2)); // 小貝老師真漂亮!
當反向下標的絕對值大于或等于字符串長度，仿佛會置為0，結(jié)果截取到了字符串結(jié)束
來張紙巾(粗糙的畫畫)擦擦汗吧~ 反向下標是個啥？
反向下標.PNG
- 反向的下標對應(yīng)的字符 ~ 截取至字符串結(jié)束
- 反向下標的絕對值大于了字符串長度會置為0，然后再開始截取
3. '軟妹子'(正)和'辣妹子'(負)一起上
3.1 起始下標為正數(shù) <= 截取范圍 < 結(jié)束下標為負數(shù)
// 負數(shù)的結(jié)束下標未超越正數(shù)的起始下標
console.log(str.slice(1, -2)); // 貝老師真漂
console.log(str.slice(2, -4)); // 老師
console.log(str.slice(2, -5)); // 老
// 相同位置 正負下標對應(yīng)同一個字符
console.log(str.slice(2, -6)); // ''
// 負數(shù)的結(jié)束下標超越正數(shù)的起始下標
console.log(str.slice(2, -7)); // ''
會發(fā)現(xiàn)只要end在start右側(cè)才會正常的截取;
當end與start重合或者在start的左側(cè)則變成了空字符串
說明違反了 start <= 截取范圍 < end規(guī)則（截取的方向是從左至右的），返回的是空字符串
3.2 起始下標為負數(shù)<= 截取范圍 < 結(jié)束下標為正數(shù)
當start為負數(shù)與0重合或在0的左側(cè)，則會置為0，而重合返回是空字符串，按照start <= 截取范圍 < end規(guī)則
// 負數(shù)的起始下標 -> 0的結(jié)束下標
console.log(str.slice(-9, 0)); // ''
// 負數(shù)的起始下標 === 0的結(jié)束下標
console.log(str.slice(-8, 0)); // ''
// 負數(shù)的起始下標 -> 正數(shù)的結(jié)束下標
console.log(str.slice(-8, 2)); // '小貝'
console.log(str.slice(-8, 8)); // '小貝老師真漂亮!'
當然還得測試一下end在start左側(cè)的時候
結(jié)果：返回的是空字符串，（可以看出截取的方向是從左往右: start -> end）
// 負數(shù)的起始下標 -> 正數(shù)的結(jié)束下標 (end在start左側(cè))
console.log(str.slice(-3, 2)); // ''
二. String.Substring() 遇上了'辣妹子'(負數(shù))又該如何是好？
1. 當起始下標為'辣妹子'(負數(shù))的時候
負數(shù)的起始值果斷置0~
2.Substring遇上一正一負的時候
2.1 當起始下標為'辣妹子'(負數(shù))，結(jié)束下標為'軟妹子'（正數(shù)）
哈哈，果斷的man！負數(shù)都置為0了，真好~
2.2當起始下標為'辣妹子'(負數(shù))，結(jié)束下標也為'辣妹子'(負數(shù))的時候~
鋼鐵直男的果斷，負數(shù)的結(jié)束下標也置0了，導(dǎo)致都是空字符串
2.3難不成這個東東就這么硬氣嗎？遇上負數(shù)這個妹子就一點都不懂得變通嗎？
請看當起始下標為正數(shù)，結(jié)束下標為妹子(負數(shù))
哈哈，差點單身一輩子了吧~
Substring方法：
當結(jié)束下標為負數(shù)則置為0，然后與起始下標互換位置;
起始下標正數(shù)搖身一變成為了結(jié)束下標截取的;
方向依然從左往右
三、給String.substr()一次機會-當它遇上'辣妹子'(負數(shù))又是什么情況呢？
1. 起始值可以為負數(shù)，but自定義截取的長度請不要定義為負數(shù)
當起始下標為負數(shù)時，采取反向下標對應(yīng)
當截取的長度設(shè)置為0或者是負數(shù)的時候則返回空字符串
爽過之后，溫存一下~
回頭看看用過的紙巾~
先記住這個反向下標，然后總結(jié)下面幾點，咱們就不會混淆啦~
反向下標.PNG
1、 Slice
a) 注意截取順序： 從左至右
b) 結(jié)束下標出現(xiàn)在起始下標左側(cè)則返回空字符串
2、 Substring
a) 負數(shù)下標會置零，
b) start為正數(shù)，end為負數(shù)，end置零后會與start互換位置
3、 substr
a) 長度不能為負數(shù)
b) Start可為負數(shù)，可參考slice方法start為負數(shù)
首先很感謝能看到這里，也希望對大家有所幫助，如果問題，請多多賜教~
貝程教育-國內(nèi)資深的前端，全棧工程師培訓(xùn)基地
