JavaScript 字串處理 :substr vs substring vs slice

substr 跟 substring 跟 slice
乍看之下非常的像
都用來截取字串
也同樣接受兩個參數
那其中的差別在哪呢?

後面都用這串字串來做測試

var str = "abcdefghij0123456789";

substr

str.substr(start[, length])
start: 起始位置,從 0 開始算
length: 要截取的長度

一些特例:

start 大於 str.length 值-> 回傳空字串

str.substr(50, 10);  // ""

start 為負數 -> 從結尾位置往前算,超過 str.length 會被設為 0

str.substr(-10, 10);  // "0123456789"
str.substr(-30, 10);  // "abcdefghij"

* IE 8 (包括之前版本) Bug : start 為負數會回傳整個字串

省略 length或超過 str.length 值-> length 參數會被設為 str.length 值

str.substr(10);  // "0123456789"
str.substr(10, 20);  // "0123456789"

length 為 0 或負數 -> 回傳空字串

str.substr(10, 0);  // ""
str.substr(10, -5);  // ""

參考資料:Mozilla Developer Document – substr()

substring

str.substring(indexA[, indexB])
startIndex: 起始位置,從 0 開始算
endIndex: 結束位置,從 0 開始算

一些特例:

startIndex 等於 endIndex -> 回傳空字串

str.substring(5, 5);  // ""

startIndex 大於 endIndex -> 交換兩個 index 參數

str.substring(15, 5);  // "fghij01234"

省略 endIndex 或 參數超過 str.length 值-> 參數會被設為 str.length 值

str.substring(10);  // "0123456789"
str.substring(10, 25);  // "0123456789"
str.substring(25, 10);  // "0123456789"

參數為複數或 NaN -> 參數會被設為 0

str.substring(-10, 10);  // "abcdefghij"
str.substring(-10, 'ya');  // "abcdefghij"
str.substring(10, -10);  // "abcdefghij"
str.substring(10, 'ya');  // "abcdefghij"

參考資料:Mozilla Developer Document – substring()

slice

str.slice(beginSlice[, endSlice])
beginSlice:
endSlice:

一些特例:

beginSlice 等於或大於 endSlice -> 回傳空字串

str.slice(5, 5);  // ""
str.slice(15, 5);  // ""

beginSlice 大於 endSlice -> 不會交換兩個 index 參數 (與 substring 不同)

str.slice(15, 5);  // ""

beginSlice 為負數 -> 會從結束位置往前算

str.slice(-15, 20);  // "fghij0123456789"

endSlice為負數 ->  endSlice 會被設為 (str.length – 1) + endSlice

str.slice(5, -5);  // "fghij01234"

參考資料:Mozilla Developer Document – slice()

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s