1. 程式人生 > >【JS點滴】substring和substr以及slice和splice的用法和區別。

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

[0 相等 交換 top subst char ima cas 負數

那麽就由一道筆試題引入吧,已知有字符串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就做個使用匯總吧。

一、關於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))//""

二、關於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))//""

三、關於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"

三、關於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

嗯....貌似四個對比的都說完了,一次對比匯總,多多感受吧。

技術分享

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