面試中： 請(qǐng)問(wèn)字符串的截取方法有哪些？各有什么特點(diǎn)彤避？
相信大家都熟悉字符串中的截取方法： slice傅物、 substring 、substr琉预，它們的身影總會(huì)出現(xiàn)在面試中董饰、工作中
那么總結(jié)一下吧~
咱們先來(lái)一段前戲：
字符串是一種基本數(shù)據(jù)類(lèi)型，為什么它身上會(huì)有這三種方法呢圆米？哈哈卒暂，一句老話，“萬(wàn)物皆對(duì)象”娄帖，其實(shí)字符串是一種包裝對(duì)象類(lèi)型也祠，每當(dāng)讀取一個(gè)基本數(shù)據(jù)類(lèi)型值的時(shí)候，或者引用了其方法或?qū)傩越伲琂avaScript就會(huì)將字符串值val通過(guò)調(diào)用new String(val)的方法轉(zhuǎn)換成對(duì)象诈嘿，那么這個(gè)對(duì)象繼承了字符串的方法堪旧，一旦方法使用結(jié)束之后，這個(gè)新創(chuàng)建的對(duì)象就會(huì)被銷(xiāo)毀（自生自滅~）
來(lái)個(gè)涼菜：
var str = 'some string';
// (1) 創(chuàng)建 String 類(lèi)型的一個(gè)實(shí)例永淌；
// (2) 在實(shí)例上調(diào)用指定的方法崎场；
// var str = new String('some string');
// var newStr = str.slice(2);
var newStr = str.slice(2);
// (3) 銷(xiāo)毀這個(gè)實(shí)例
// str = null;
開(kāi)始咱們的翻云覆雨吧~
嘿嘿~ 不過(guò)還是先來(lái)幾個(gè)咱們熟悉的姿勢(shì)~
1. String.slice
語(yǔ)法：
str.slice(start, end);
起始下標(biāo)(start) <= 截取的范圍 < 結(jié)束下標(biāo)(end)
包括起始下標(biāo)對(duì)應(yīng)字符, but不包括結(jié)束下標(biāo);
來(lái)個(gè)'串'
let str = '小貝老師真漂亮!';
- 當(dāng)只傳一個(gè)參數(shù)的時(shí)候：默認(rèn)為start，(start <= 范圍 < str.length)
console.log(str.slice(1)); // 貝老師真漂亮!
- 當(dāng)傳兩個(gè)參數(shù)的時(shí)候：截取的字符串為： start <= 截取范圍 < end
console.log(str.slice(1, 4)); // 貝老師
2. String.substring
語(yǔ)法：
str.substring(start, end);
起始下標(biāo) <= 截取的范圍 < 結(jié)束下標(biāo)
包括起始下標(biāo)對(duì)應(yīng)字符, 但不包括結(jié)束下標(biāo);
也來(lái)個(gè)'串'
let str = '小貝老師真漂亮!';
- 當(dāng)只傳一個(gè)參數(shù)的時(shí)候：默認(rèn)為start遂蛀，(start <= 范圍 < str.length)
console.log(str.substring(1)); // 貝老師真漂亮!
- 當(dāng)傳兩個(gè)參數(shù)的時(shí)候：截取的字符串為： start <= 截取范圍 < end
console.log(str.substring(1, 4)); // 貝老師
3. String.substr
語(yǔ)法：
str.substr(start, length);
起始下標(biāo)<= 截取的范圍 <= 自定義截取的長(zhǎng)度
substr方法更直截（直接定義長(zhǎng)度）
再來(lái)個(gè)'串'
let str = '小貝老師真漂亮!';
- 當(dāng)只傳一個(gè)參數(shù)的時(shí)候：默認(rèn)為start谭跨， （start<= 截取范圍 < str.length）
console.log(str.substr(1)); // 貝老師真漂亮!
- 當(dāng)傳兩個(gè)參數(shù)的時(shí)候：截取的字符串為： (start <= 截取范圍 <= 自定義截取的長(zhǎng)度)
console.log(str.substr(1, 4)); // 貝老師真
熟悉的姿勢(shì)咱們都用過(guò)了，試試不常用的姿勢(shì)了吧~
要進(jìn)入高潮啦~ 忍住啦~
一. String.slice() 遇上了'辣妹子'(負(fù)數(shù))該如何是否李滴？
1. 當(dāng)起始值start為負(fù)數(shù)的時(shí)候：
let str = '小貝老師真漂亮!';
console.log(str.slice(-1)); // !
console.log(str.slice(-2)); // 亮!
console.log(str.slice(-3)); // 漂亮!
結(jié)果為：
反向下標(biāo)截取
反向的下標(biāo)<= 截取范圍 < 字符串長(zhǎng)度
2. 當(dāng)反向下標(biāo)的絕對(duì)值大于或等于長(zhǎng)度的時(shí)候呢螃宙？
console.log(str.slice(-str.length)); // 小貝老師真漂亮!
console.log(str.slice(-str.length - 1)); // 小貝老師真漂亮!
console.log(str.slice(-str.length - 2)); // 小貝老師真漂亮!
當(dāng)反向下標(biāo)的絕對(duì)值大于或等于字符串長(zhǎng)度，仿佛會(huì)置為0所坯，結(jié)果截取到了字符串結(jié)束
來(lái)張紙巾(粗糙的畫(huà)畫(huà))擦擦汗吧~ 反向下標(biāo)是個(gè)啥谆扎？
反向下標(biāo).PNG
- 反向的下標(biāo)對(duì)應(yīng)的字符 ~ 截取至字符串結(jié)束
- 反向下標(biāo)的絕對(duì)值大于了字符串長(zhǎng)度會(huì)置為0，然后再開(kāi)始截取
3. '軟妹子'(正)和'辣妹子'(負(fù))一起上
3.1 起始下標(biāo)為正數(shù) <= 截取范圍 < 結(jié)束下標(biāo)為負(fù)數(shù)
// 負(fù)數(shù)的結(jié)束下標(biāo)未超越正數(shù)的起始下標(biāo)
console.log(str.slice(1, -2)); // 貝老師真漂
console.log(str.slice(2, -4)); // 老師
console.log(str.slice(2, -5)); // 老
// 相同位置 正負(fù)下標(biāo)對(duì)應(yīng)同一個(gè)字符
console.log(str.slice(2, -6)); // ''
// 負(fù)數(shù)的結(jié)束下標(biāo)超越正數(shù)的起始下標(biāo)
console.log(str.slice(2, -7)); // ''
會(huì)發(fā)現(xiàn)只要end在start右側(cè)才會(huì)正常的截取;
當(dāng)end與start重合或者在start的左側(cè)則變成了空字符串
說(shuō)明違反了 start <= 截取范圍 < end規(guī)則（截取的方向是從左至右的）芹助，返回的是空字符串
3.2 起始下標(biāo)為負(fù)數(shù)<= 截取范圍 < 結(jié)束下標(biāo)為正數(shù)
當(dāng)start為負(fù)數(shù)與0重合或在0的左側(cè)堂湖，則會(huì)置為0，而重合返回是空字符串状土，按照start <= 截取范圍 < end規(guī)則
// 負(fù)數(shù)的起始下標(biāo) -> 0的結(jié)束下標(biāo)
console.log(str.slice(-9, 0)); // ''
// 負(fù)數(shù)的起始下標(biāo) === 0的結(jié)束下標(biāo)
console.log(str.slice(-8, 0)); // ''
// 負(fù)數(shù)的起始下標(biāo) -> 正數(shù)的結(jié)束下標(biāo)
console.log(str.slice(-8, 2)); // '小貝'
console.log(str.slice(-8, 8)); // '小貝老師真漂亮!'
當(dāng)然還得測(cè)試一下end在start左側(cè)的時(shí)候
結(jié)果：返回的是空字符串无蜂，（可以看出截取的方向是從左往右: start -> end）
// 負(fù)數(shù)的起始下標(biāo) -> 正數(shù)的結(jié)束下標(biāo) (end在start左側(cè))
console.log(str.slice(-3, 2)); // ''
二. String.Substring() 遇上了'辣妹子'(負(fù)數(shù))又該如何是好？
1. 當(dāng)起始下標(biāo)為'辣妹子'(負(fù)數(shù))的時(shí)候
負(fù)數(shù)的起始值果斷置0~
2.Substring遇上一正一負(fù)的時(shí)候
2.1 當(dāng)起始下標(biāo)為'辣妹子'(負(fù)數(shù))蒙谓，結(jié)束下標(biāo)為'軟妹子'（正數(shù)）
哈哈斥季，果斷的man！負(fù)數(shù)都置為0了累驮，真好~
2.2當(dāng)起始下標(biāo)為'辣妹子'(負(fù)數(shù))酣倾，結(jié)束下標(biāo)也為'辣妹子'(負(fù)數(shù))的時(shí)候~
鋼鐵直男的果斷，負(fù)數(shù)的結(jié)束下標(biāo)也置0了谤专，導(dǎo)致都是空字符串
2.3難不成這個(gè)東東就這么硬氣嗎躁锡？遇上負(fù)數(shù)這個(gè)妹子就一點(diǎn)都不懂得變通嗎？
請(qǐng)看當(dāng)起始下標(biāo)為正數(shù)置侍，結(jié)束下標(biāo)為妹子(負(fù)數(shù))
哈哈映之，差點(diǎn)單身一輩子了吧~
Substring方法：
當(dāng)結(jié)束下標(biāo)為負(fù)數(shù)則置為0，然后與起始下標(biāo)互換位置;
起始下標(biāo)正數(shù)搖身一變成為了結(jié)束下標(biāo)截取的;
方向依然從左往右
三墅垮、給String.substr()一次機(jī)會(huì)-當(dāng)它遇上'辣妹子'(負(fù)數(shù))又是什么情況呢惕医？
1. 起始值可以為負(fù)數(shù)耕漱，but自定義截取的長(zhǎng)度請(qǐng)不要定義為負(fù)數(shù)
當(dāng)起始下標(biāo)為負(fù)數(shù)時(shí)算色，采取反向下標(biāo)對(duì)應(yīng)
當(dāng)截取的長(zhǎng)度設(shè)置為0或者是負(fù)數(shù)的時(shí)候則返回空字符串
爽過(guò)之后，溫存一下~
回頭看看用過(guò)的紙巾~
先記住這個(gè)反向下標(biāo)螟够，然后總結(jié)下面幾點(diǎn)灾梦，咱們就不會(huì)混淆啦~
反向下標(biāo).PNG
1峡钓、 Slice
a) 注意截取順序： 從左至右
b) 結(jié)束下標(biāo)出現(xiàn)在起始下標(biāo)左側(cè)則返回空字符串
2、 Substring
a) 負(fù)數(shù)下標(biāo)會(huì)置零若河，
b) start為正數(shù)能岩，end為負(fù)數(shù)，end置零后會(huì)與start互換位置
3萧福、 substr
a) 長(zhǎng)度不能為負(fù)數(shù)
b) Start可為負(fù)數(shù)拉鹃，可參考slice方法start為負(fù)數(shù)
首先很感謝能看到這里，也希望對(duì)大家有所幫助鲫忍，如果問(wèn)題膏燕，請(qǐng)多多賜教~
貝程教育-國(guó)內(nèi)資深的前端，全棧工程師培訓(xùn)基地
