原文鏈接：https://segmentfault.com/a/1190000016387899
js中有三個截取字符的方法，分別是substring()、substr()、slice()，平時我們可能都用到過，但總是會對這些方法有點混淆，特別是substring()和substr()，連方法名都差不多，下面就具體來看一下區別。
相同點
這三個方法都可以對字符串進行截取，並且返回一個新的字符串，也就是不會對原字符串進行修改
//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,2) =>a.substring(5,0) => a.substring(2,5) < "234"其他情況就沒有一一測試了，當然正常情況下盡量不要這么干，畢竟語法上已經規定了是整數。
substr
substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。
語法
string.substr(start,length)重要事項：ECMAscript 沒有對該方法進行標准化，因此反對使用它。
參數
| 參數 | 描述 |
|---|---|
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"2.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"3.其他情況和substring處理方式一致
//chrome控制台 > var a = '0123456789' < undefined > a.slice('xx','5.5')// => a.slice(0,5) < "01234"小節
從上面測試得出結論，substring不支持負值，其他兩種方式均支持負數表示，並且是從右邊第一位開始計數。substr的第二個參數是長度，這是和其他兩種方式最大的不同之處，slice的方向性比較強，永遠是從start=>end對應左=>右。
以上結論均在最新谷歌瀏覽器上測試，IE和火狐未測試。