前言
在前端開發過程中，對JS相關的字符串處理可謂是家常便飯，對字符串對處理也是前端開發過程中使用頻率非常高的知識點之一，對從後臺獲取到的字符串進行二次處理也是非常普遍的需求，那麼本文就來分享一下在前端開發過程中對字符串截取處理相關的知識點。
知識點
關於在JS中截取字符串的方法有三種：substring()、substr()、slice()。這三種方法在平時開發過程中可能都用到過，但是對於這些方法的具體使用和區別會有點蒙圈，尤其是方法substring()和substr()，二者非常相似，那麼接下來就來具體的看一下異同點。
相同點
substring()、substr()、slice()這三個方法都可以對JS中的字符串進行截取處理，並且返回一個新的字符串，也就是說它們不會對原字符串進行修改。
不同點
substring()、substr()、slice()這三個方法的不同之處在於參數的不同，那麼接下來就來分享一下具體的不同點對比。
一、substring()方法
語法：string.substring(from, to)
定義和用法：
substring() 方法用於提取字符串中介於兩個指定下標之間的字符。
substring() 方法返回的子串包括「開始」處的字符，但不包括「結束」處的字符。
釋義：substring()方法從 from 位置截取到 to 位置，to 可選擇，沒有設置時默認到字符串的最末尾。
參數：
參數
描述
from
必需。一個非負的整數，規定要提取的子串的第一個字符在 string 中的位置。
to
可選。一個非負的整數，比要提取的子串的最後一個字符在 string 中的位置多 1。如果省略此參數，那麼返回的子串會一直到字符串的結尾。
說明
1.substring() 方法返回的子串包括 start 處的字符，但不包括 stop 處的字符；
2.若 start 與 stop 相等，則該方法返回的就是一個空字符串（即長度為 0 的字符串）；
3若 start 比 stop 大，則該方法在提取子串之前會先交換這兩個參數；
4.若 start 和 stop 有負數，則會把該參數自動轉為0，然後繼續進行上述的規則；
5.若 start 和 stop 有正小數，則會把該參數向下取整，然後繼續進行上述的規則；
6.若 start 和 stop 有字符串，則會先進行parseInt()，如果轉換結果為NaNa，那麼就轉換為0，其餘情況繼續進行上述的規則。
示例：
1、
string.substring(4)+"<br>"2、
3、
var a = '0123456789』; a.substring(1,5);4、
var a = '0123456789』; a.substring(1,1); // start 與 stop 相等,輸出結果：」」5、
var a = '0123456789』;a.substring(5,1) ; // start 比 stop 大，但是最後的輸出結果還是：」1234"6、
var a = '0123456789』; a.substring(5,-1); //start 和 stop 有負數，但是最後的輸出結果還是："1234"7、
var a = '0123456789』; a.substring(5,2.4) ; // start 和 stop 有正小數, 但是最後的輸出結果是："234"8、
var a = '0123456789』;a.substring(5,』2.4』); // start 和 stop 有字符串, 但是最後的輸出結果是："234"a.substring(5,』hh』) ; // start 和 stop 有字符串, 但是最後的輸出結果是："234"二、substr()方法
語法：string.substr(start,length)
定義和用法：
substr() 方法可在字符串中抽取從「開始」下標開始的指定數目的字符。
注意：substr() 方法不會改變源字符串。
釋義：substr() 的參數指定的是子串的開始位置和長度，因此它可以替代 substring() 和 slice() 來使用。
參數
參數
描述
start
必需。要抽取的子串的起始下標。必須是數值。如果是負數，那麼該參數聲明從字符串的尾部開始算起的位置。也就是說，-1 指字符串中最後一個字符，-2 指倒數第二個字符，以此類推。
length
可選。子串中的字符數。必須是數值。如果省略了此參數，那麼返回從 string 的開始位置到結尾的字串。
返回值
類型
描述
String
A new string containing the extracted part of the text
說明
該方法與substring()最大的區別在於第二個參數是需要截取字符串的長度，而不是位置。
1.substr() 方法返回的子串從 start 處的字符開始（包括）往後截取length長度，如果超過最末端就到最末端結束；
2.start可以取負值，表示從字符串尾部往頭部開始數（從右到左，注意是從1開始，比如-1 指字符串中最後一個字符），但截取長度還是從左到右，若超過最末端，則就到最末端結束；
3.若length為負值，則會直接當成0處理，最終返回」」；
4.若start或者length為小數，則會截取小數部分；
5.若 start 和 length 有字符串，則會先進行parseInt()，若轉換結果為NaNa，則就轉換為0，其餘情況繼續按照上述規則執行。
示例：
1、
2、
var str="Hello world!";var n=str.substr(3);3、
var a = '0123456789』; a.substr(1,5); a.substr(1,15);4、
var a = '0123456789』; a.substr(-4,2); //-4表示從右開始數第4個，就是'6'，然後取2個長度的字符串，就是'67' ，輸出結果："67"5、
var a = '0123456789』; a.substr(4,-2);6、
var a = '0123456789』; a.substr(1.2,5.2); // start或者length為小數 ， 輸出結果："12345"7、
var a = '0123456789』; a.substr('aa','5') ; // start 和 length 有字符串 ，輸出結果："01234"三、slice()方法
語法：string.slice(start,end)
定義和用法：
slice()方法可提取字符串的某個部分，並以新的字符串返回被提取的部分。
注意：
使用 start（包含） 和 end（不包含） 參數來指定字符串提取的部分。
釋義：
slice(start,end) 方法用於提取字符串的某個部分（從參數 start 到 end 位置），並以新的字符串返回被提取的部分。類似 substring()。
參數
參數
描述
start
必須。要抽取的片斷的起始下標，第一個字符位置為 0。如果為負數，則從尾部開始截取。
end
可選。緊接著要截取的片段結尾的下標。若未指定此參數，則要提取的子串包括 start 到原字符串結尾的字符串。如果該參數是負數，那麼它規定的是從字符串的尾部開始算起的位置。slice(-2) 表示提取原數組中的倒數第二個元素到最後一個元素（包含最後一個元素）。
返回值
說明
該方法的兩個參數均為位置坐標，與subtring()比較像，區別就是該方法支持負數，並且不會交換位置，始終是從start到end，如果該區間不存在，那麼返回''。
1.slice() 方法返回的子串包括 start 位置的字符，但不包括 end 位置的字符；
2.當start或者end為負值時，定位方式和substr()相同，從右往左數，從1開始；
3.start到end的順序始終是從左到右，如果最終start的位置在end的右邊，那麼返回「」；
4.其他情況和substring()處理方式相同，這裡不再贅述。
示例：
1、
2、
3、
var a = '0123456789』; a.slice(1,5);4、
var a = '0123456789』; a.slice(1,-1); //start或者end為負值時，起始點從第1（包括）開始，結束點為從右往左數第1個（不包括） ，輸出結果："12345678"5、
var a = '0123456789』; a.slice(2,1); // start 比 stop 大，2所在的位置是'2'，1所在的位置是'1'，方向相反，返回為空，輸出結果："" a.slice(-2,1); //start或者end為負值時，-2所在的位置是'8'，1所在的位置是'1'，方向相反，返回為空，輸出結果："" a.slice(-2,-1); //start或者end為負值時，-2所在的位置是'8'，-1所在的位置是'9'，方向正常， 輸出結果："8"6、
var a = '0123456789』; a.slice('xx』,』5.5』); // start 和 end 有字符串， 輸出結果："01234"總結
通過上述對比分析得出結論，substring()不支持負值，但是substr()和slice()支持負數，而且是從右邊第一位開始計數；substr()的第二個參數表示的是長度，這是它和其他兩種方式最大不同；slice()有非常強的方向性，它是從start=>end對應左=>右。這就是上述在JS中截取字符串的三種方法的具體的異同點，具體使用操作還是要根據實際業務需求來操作。
以上就是本章的全部內容，歡迎關注三掌柜的微信公眾號「程序猿by三掌柜」，三掌柜的新浪微博「三掌柜666」，歡迎關注！
三掌柜的微信公眾號：
三掌柜的新浪微博：