詳解JS擷取字串的三個方法substring,substr,slice

2022-03-17 10:00:17

相同點

這三個方法都可以對字串進行擷取，並且返回一個新的字串，也就是不會對原字串進行修改。

這裡 > 表示控制檯輸入，< 表示控制檯輸出，下同：

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substr(1,5)
< "12345"
> a
< "0123456789"  //沒有發生改變

不同點

這三個方法的不同之處在於引數不同。

substring

substring() 方法用於提取字串中介於兩個指定下標之間的字元。

語法

string.substring(start,stop)

引數

引數	描述
start	必需。一個非負的整數，規定要提取的子串的第一個字元在string中的位置。
stop	可選。一個非負的整數，比要提取的子串的最後一個字元在string中的位置多 1。如果省略該引數，那麼返回的子串會一直到字串的結尾。

說明

1.substring() 方法返回的子串包括 start 處的字元，但不包括 stop 處的字元。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substring(1,5)
< "1234"

2.如果引數 start 與 stop 相等，那麼該方法返回的就是一個空串(即長度為 0 的字串)。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substring(1,1)
< ""

3.如果 start 比 stop 大，那麼該方法在提取子串之前會先交換這兩個引數。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substring(5,1) 
//=>a.substring(1,5)
< "1234"

4.如果 start 和 stop 有負數，那麼會把該引數自動轉為0，然後繼續上述規則。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substring(5,-1) 
//=> a.substring(5,0) 
//=> a.substring(0,5)
< "1234"

5.如果 start 和 stop 有正小數(負數直接進行第4條)，那麼會把該引數向下取整，然後繼續上述規則。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substring(5,2.5) 
//=> a.substring(5,2) 
//=> a.substring(2,5)
< "234"

6.如果 start 和 stop 有字串，那麼會先進行parseInt()，如果轉換結果為NaN，那麼就轉換為0，其餘情況繼續上述規則。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substring(5,'2.5') 
//=> a.substring(5,2) 
//=> a.substring(2,5)
< "234"
> a.substring(5,'ss') 
//=> a.substring(5,NaN) 
//=> a.substring(5,0) 
//=> a.substring(0,5)
< "01234"

其他情況就沒有一一測試了，當然正常情況下儘量不要這麼幹，畢竟語法上已經規定了是整數。

substr

substr() 方法可在字串中抽取從 start 下標開始的指定數目的字元。

語法

string.substr(start,length)

引數

引數	描述
start	必需。要抽取的子串的起始下標。必須是數值。如果是負數，那麼該引數宣告從字串的尾部開始算起的位置。也就是說，-1 指字串中最後一個字元，-2 指倒數第二個字元，以此類推。
length	可選。子串中的字元數。必須是數值。如果省略了該引數，那麼返回從string的開始位置到結尾的字串。

說明

該方法與substring()最大的區別在於第二個引數是你需要擷取字串的長度，而不是位置。

1.substr() 方法返回的子串從 start 處的字元開始(包括)往後擷取length長度，如果超過最末端就到最末端結束。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substr(1,5)
< "12345"
> a.substr(1,15) 
// 只會到最末端，多了沒用
< "123456789"

2.start可以取負值，表示從字串尾部往頭部開始數(從右到左，注意是從1開始，比如-1 指字串中最後一個字元)，但是擷取長度還是從左到右，如果超過最末端就到最末端結束。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substr(-4,2) 
// -4表示從右開始數第4個，就是'6'，然後取2個長度的字串，就是'67'
< "67"

3.如果length為負值，那麼會直接當成0處理，最終返回""。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substr(4,-2) 
//=> a.substr(4,0)
< ""

4.如果start或者length為小數，那麼會擷取小數部分。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substr(1.2,5.2) 
//=> a.substr(1,5)
< "12345"

5.如果 start 和 length 有字串，那麼會先進行parseInt()，如果轉換結果為NaN，那麼就轉換為0，其餘情況繼續上述規則。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.substr('aa','5') 
//=> a.substr(0,5)
< "01234"

slice

slice() 方法可提取字串的某個部分，並以新的字串返回被提取的部分。

語法

string.slice(start,end)

引數

引數	描述
start	必須。要抽取的片斷的起始下標。如果是負數，則該引數規定的是從字串的尾部開始算起的位置。也就是說，-1 指字串的最後一個字元，-2 指倒數第二個字元，以此類推。
end	可選。緊接著要抽取的片段的結尾的下標。若未指定此引數，則要提取的子串包括start到原字串結尾的字串。如果該引數是負數，那麼它規定的是從字串的尾部開始算起的位置。

說明

該方法的兩個引數均為位置座標，和subtring比較像，區別就是該方法支援負數，並且不會交換位置，始終是從start到end，如果該區間不存在，那麼返回''。

1.slice() 方法返回的子串包括 start 處的字元，但不包括end 處的字元。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.slice(1,5)
< "1234"

2.當start或者end為負值時，定位方式和substr一，從右往左數，從1開始。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.slice(1,-1)
//起始點從第1（包括）開始，結束點為從右往左數第1個（不包括）
< "12345678"

3.start到end的順序始終是從左到右，如果最終start的位置在end的右邊，那麼返回''。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.slice(2,1)
//2所在的位置是'2'，1所在的位置是'1'，從2=>1，方向相反，返回為空
< ""
> a.slice(-2,1)
//-2所在的位置是'8'，1所在的位置是'1'，從8=>1，方向相反，返回為空
< ""
> a.slice(-2,-1)
//-2所在的位置是'8'，-1所在的位置是'9'，從8=>9，方向正常，返回為'8'
< "8"

4.其他情況和substring處理方式一致。

//chrome控制檯
> var a = '0123456789'
< undefined
> a.slice('xx','5.5')
// => a.slice(0,5)
< "01234"

總結一下

從上面測試得出結論，substring不支援負值，其他兩種方式均支援負數表示，並且是從右邊第一位開始計數。

substr的第二個引數是長度，這是和其他兩種方式最大的不同之處。

slice的方向性比較強，永遠是從start=>end對應左=>右。

以上結論均在最新谷歌瀏覽器上測試，IE和火狐未測試。

到此這篇關於詳解JS擷取字串的三個方法substring,substr,slice的文章就介紹到這了,更多相關JS擷取字串內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

詳解JS擷取字串的三個方法substring,substr,slice

目錄

相同點

不同點

substring

語法

引數

說明

substr

語法

引數

說明

slice

語法

引數

說明

總結一下

熱門文章