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