大家好，我是李俊輝！如果您覺得文章有用，請幫忙點個贊或關(guān)注，也為我鼓勵一下，堅持寫下去！
javascript有很多方法名稱相似、功能相似，搞的很多新同學(xué)云里霧里，一直處于似懂非懂，不懂又懂的狀態(tài)（至少我剛學(xué)前端前2年是這樣的^^||）。主要原因就是懶得花時間整理這些東西，感覺知道是干嘛的就行了。但是當(dāng)開發(fā)碰到問題的時候（特別是字符串或者數(shù)組算法問題），往往想不起來到底應(yīng)該用哪個方法才是更好的選擇。始終在心里是個技術(shù)結(jié)。當(dāng)你真正踏實下來打算提高自己的時候，這些方法的區(qū)別都是你不得不吃透的一塊內(nèi)容。
為此，我準(zhǔn)備了八個系列（暫定8個，將來想起來再補充）專門講解這些讓人郁悶的類似功能。
今天先來說說字符串String的三個相似方法：slice，substr，substring的區(qū)別。如果你閉上眼睛能很清楚的想明白這三個方法的區(qū)別，那本篇文章就不用看了。
我們進(jìn)入正題，這三個方法都是用來截取字符串，都是基于原字符串創(chuàng)建新字符串的方法。
1.slice()
slice方法是字符串String和數(shù)組Array共同都有的一個同名方法。今天我們主要說String，后面的文章會講解到Array的slice。
slice(start, end)字符串中第一個字符位置索引為 0，最后一位索引為string.length。
截取位置為start到end的前一位字母，比如end是7，那實際截取字母是6。
end可以省略，省略則為字符串最后位置string.length。
start和end參數(shù)都可以是負(fù)數(shù)，如果是負(fù)數(shù)，從字符串的尾部往前算位置，-1 指字符串的最后一個字符，-2 指倒數(shù)第二個字符，以此類推。
看到下面的代碼輸出，應(yīng)該就對slice一目了然了。
var str = 'hello world';
console.log(str.slice(3)); //相當(dāng)于console.log(str.slice(3, str.length));
//輸出： 'lo world'
console.log(str.slice(3, 9));
//輸出： 'lo wor'
console.log(str.slice(9,3)) //當(dāng)end索引小于start索引時，無法截取，輸出空字符串。
//輸出：''
console.log(str.slice(3,-9)) //再一次證明當(dāng)end索引小于start索引時，無法截取，輸出空字符串。
//輸出：''
console.log(str.slice(-3,9)) //end比start索引正好大1為
//輸出：'r'
console.log(str.slice(3, -1)); //相當(dāng)于console.log(str.slice(3,10))
//輸出：'lo worl'，少最后一個d，因為索引位在d前面。
console.log(str.slice(-3, -9)); //end索引小于start，返回空。
//輸出：''
2.substring()
substring與slice方法的參數(shù)一樣，都是start和end索引。唯一的區(qū)別是start和end為負(fù)數(shù)時，默認(rèn)會把負(fù)數(shù)轉(zhuǎn)變?yōu)?。 所以substring與slice的區(qū)別就是兩個參數(shù)為負(fù)數(shù)的時截取結(jié)果不同。
看到下面的代碼輸出，應(yīng)該就對substring一目了然了。
var str = 'hello world';
console.log(str.substring(3)); //相當(dāng)于console.log(str.substring(3, str.length));
//輸出： 'lo world'
console.log(str.substring(3, 9));
//輸出： 'lo wor'
console.log(str.substring(9, 3)); //相當(dāng)于console.log(str.substring(3, 9));
//輸出：'lo wor' //如果end大于start，則end與start互換位置后返回。
console.log(str.substring(-3, 9)); //如果start為負(fù)數(shù)，end為正數(shù)，則返回從0到end位字符串。
//輸出：'hello wor'
console.log(str.substring(3, -1)); //如果end為負(fù)數(shù)，則互換位置，返回從0到start位字符串。
//輸出：'hel'
console.log(str.substring(-3, -9)); //如果start為負(fù)數(shù)，end也為負(fù)數(shù)，同為0則返回空。
//輸出：''
2.substr()
substr也是接受2個參數(shù)start和end索引。不過end代表的是要截取的字符長度。
start參數(shù)和slice的start功能一樣，但end不能為負(fù)數(shù)，因為長度不可以為負(fù)數(shù)，end負(fù)值會轉(zhuǎn)化為零。
看到下面的代碼輸出，應(yīng)該就對substr一目了然了。
var str = 'hello world';
console.log(str.substr(3));
//輸出： 'lo world'
console.log(str.substr(3, 5)); //從3開始截取5個字符
//輸出： 'lo wo'
console.log(str.substr(5, 3)); //從5開始截取3個字符
//輸出：'wo'
console.log(str.substr(-3, 5)); //如果start為負(fù)數(shù)，則索引為倒數(shù)負(fù)數(shù)值開始截取。
//輸出：'rld'
console.log(str.substr(3, -1)); //不接受end為負(fù)數(shù)，返回空
//輸出：''
console.log(str.substr(-3, -5)); //不接受end為負(fù)數(shù)，返回空
//輸出：''
總結(jié)：
最后，我們整體看一下他們的共同點和區(qū)別，有一個更清楚的分辨。
1.共同點
只傳1個參數(shù)時，start時，三個方法一樣，用哪個都可以。
var str = 'hello world';
console.log(str.slice(3), str.substr(3), str.substring(3));
//輸出：'lo world', 'lo world', 'lo world'
2.不同點
- 傳入第2個參數(shù)，
end時,正數(shù)時：
console.log(str.slice(3,5), str.substr(3,5), str.substring(3,5));
//輸出：'lo', 'lo wo', 'lo'
- 當(dāng)傳入的
start,end是負(fù)數(shù)時：
slice()start和end均可以是負(fù)數(shù)，會把當(dāng)前的負(fù)值加上字符串的長度。如slice(-3),相當(dāng)于slice(8)。
substring()會把所有的負(fù)值轉(zhuǎn)化為零。
substr()start負(fù)值會把當(dāng)前的負(fù)值加上字符串的長度，end負(fù)值會轉(zhuǎn)化為零（因為end代表長度，截取的字符長度不能為負(fù)）。
今天就到這吧，下一節(jié)我們講解js里相似的方法比較系列（二）slice，splice，split方法區(qū)別，已發(fā)布～！
如果您覺得文章有用，請幫忙點個贊或關(guān)注，也為我鼓勵一下，堅持寫下去，在此感謝??！
轉(zhuǎn)載一定注明出處！
原文地址：http://www.itdecent.cn/p/7d25d99a83da
2020年2月11日 新冠狀病毒期間憋在家
