【JS點滴】substring和substr以及slice和splice的用法和區別。

那麼就由一道筆試題引入吧，已知有字符串a=」get-element-by-id」,寫一個function將其轉化成駝峯表示法」getElementById」；

var a = "get-element-by-id";
function change(obj){
　　//先將字符串按照「-」進行切割爲數組
　　var arr = obj.split("-");
　　for(var i=1;i<arr.length;i++){
　　　　//因爲get不須要轉大寫，因此從下標1開始，對第一位字母轉大寫，並拼接後面的小寫字母
　　　　arr[i] = arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
　　}
　　//對改造完畢的數組元素進行無縫拼接
　　console.log(arr.join(""));
}
//調用完成
change(a);

這裏substring(1)的意思就是從下標1開始一直到字符串結尾處。可是參考寫法提供的此處代碼是substr(1,arr[i].length-1)；

好吧，我認可雖然知道substring和substr都是對字符串進行截取操做，但二者之間的細化區別確實比較模糊，那麼這裏除了這兩個小兄弟，也帶上slice與splice就作個使用匯總吧。

1、關於substring()

substring(start,stop)表示返回從start開始到stop處之間的新字符串，其長度爲stop減 start。包含start，但不包含stop，且不修改原字符串。這一點與slice的含頭不含尾相近。例如：

var str = "0123456789";
console.log(str.substring(1,5))//"1234" length爲5-1
console.log(str.substring(0,9),str)//"012345678"  "0123456789"

其中start是必填項，stop爲選填項，若是stop不填，那表示從start截取到字符串結尾，例如：

var str = "0123456789";
console.log(str.substring(1))//"123456789"

若是 start比stop大，那麼方法在執行前會先交換這兩個參數。例如：

var str = "0123456789";
console.log(str.substring(8,4))//"4567"

若是 start與stop相等，那麼會返回一個空的字符串。例如：

var str = "0123456789";
console.log(str.substring(6,6))//""

若是 start或stop爲負數，那麼方法在執行前會先將負數變爲0。例如：

var str = "0123456789";
console.log(str.substring(-2,6))//"012345"
console.log(str.substring(2,-6))//"01"
console.log(str.substring(-2,-6))//""

2、關於substr()

substr(start,length)表示返回從start開始包含length長度的新字符串，包含start，且不修改原字符串，與substring相比，第二個參數由表明結束的下標stop變成了規定新字符串長度的length,例如：

var str = "0123456789";
console.log(str.substr(1,5))//"12345" length爲5
console.log(str.substr(2,6),str)//"234567" "0123456789"

其中start是必填項，length爲選填項，若是length不填，那表示從start截取到字符串結尾，例如：

var str = "0123456789";
console.log(str.substr(1))//"123456789"

若是start爲負數，那麼start=str.length+start，例如：

var str = "0123456789";
console.log(str.substr(-1))//"9"
console.log(str.substr(-6,3))//"456"

若是length爲負數或者0，那麼返回空字符串，例如：

var str = "0123456789";
console.log(str.substr(1,0))//""
console.log(str.substr(-1,-1))//""
console.log(str.substr(-1,0))//""

3、關於slice()

 首先要說的是，slice可操做數組和字符串，但substring和substr只能操做字符串，splice只能操做數組。

slice(start,stop)表示截取從下標start 到下標stop（不包括該元素）的之間的元素，並返回新數組/新字符串，並不修改原數組/原字符串，這點上面說了，與substring很類似。例如：

var str = "0123456789";
    arr = [0,1,2,3,4,5,6,7,8,9];
console.log(str.slice(1,6))//"12345"
console.log(arr.slice(1,6))//[1,2,3,4,5]

其中start是必填項，stop爲選填項，若是stop不填，那表示從start截取到數組結尾/字符串結尾，例如：

var str = "0123456789";
    arr = [0,1,2,3,4,5,6,7,8,9];
console.log(str.slice(1))//"123456789"
console.log(arr.slice(1))//[1,2,3,4,5,6,7,8,9]

若是 start比stop大（不會互換），或start與stop相等，則截取的爲空，例如：

var str = "0123456789";
    arr = [0,1,2,3,4,5,6,7,8,9];
console.log(str.slice(3,3))//""
console.log(arr.slice(3,3))//[]
console.log(str.slice(6,5))//""
console.log(arr.slice(6,5))//[]

須要特別注意的是，若是 start或者stop爲負數，那麼負數的選項從數組尾部開始算起的位置，最後一個數字爲-1，倒數第二個數字爲-2，依次類推。例如：

var str = "0123456789";
console.log(str.slice(6,-1))//"678"
console.log(str.slice(-6,-1))//"45678"
console.log(str.slice(-6,8))//"4567"

4、關於splice()

仍是再強調一遍，slice可操做字符串和數組，可是splice不能操做字符串，會報錯。

splice(start,length,items)表示從下標start處截取length長度（與substr有點像）的元素後，在start處爲原數組添加items，並返回被截取的新數組，splice會直接修改原數組，例如：

var arr = [0,1,2,3,4,5,6,7,8,9];
console.log(arr.splice(1,3,2,3,4))//[1,2,3]
console.log(arr);//[0,2,3,4,4,5,6,7,8,9] 原數組被截取走了1,2,3，並加入了2,3,4

其中start和length爲必填項，items爲選填項，若是length爲0或者負數，則返回空數組(這裏與substr類似)，例如：

var arr = [0,1,2,3,4,5,6,7,8,9];
console.log(arr.splice(1,0,2,3,4))//[]
console.log(arr);//[0,2,3,4,1,2,3,4,5,6,7,8,9] 直接在原數組下標0處並加入了2,3,4

var arr = [0,1,2,3,4,5,6,7,8,9];
console.log(arr.splice(1,-9,2,3,4))//[]
console.log(arr);//[0,2,3,4,1,2,3,4,5,6,7,8,9] 直接在原數組下標0處並加入了2,3,4

若是start爲負數，則原理和slice負數從右往左截取，最後一位數字爲-1，倒數第二位爲-2，依次類推，例如：

var arr = [0,1,2,3,4,5,6,7,8,9];
console.log(arr.splice(-1,1,2,3,4))//[9]
console.log(arr);//[0,1,2,3,4,5,6,7,8,2,3,4] 從右往左截取1位，也就是9，並加入2,3,4

嗯....貌似四個對比的都說完了，一次對比彙總，多多感覺吧。