JavaScript字元串“三劍客”

JavaScript字元串方法有很多，其中有三個方法與字元串裁剪有關，他們分别是slice()、substring()和substr()，我把他們統稱為“三劍客”。

由于他們都是用于裁剪字元串，很容易混淆，是以接下來我将結合具體執行個體來講講他們的共同點和差別。

一、共同點

① 接受一個或兩個參數，其中第一個參數為裁剪的開始位置

② 都會傳回被裁剪下來的子字元串，而原字元串不受影響

③ 若不傳第二個參數，則從開始位置（第一個參數）一直截取到字元串結尾。

var str = '微信公衆号：前端微站';
var str1 = str.slice(2);  
console.log(str1);    // "公衆号：前端微站"
str1 = str.substring(2);
console.log(str1);   // "公衆号：前端微站"
str1 = str.substr(2);
console.log(str1);   // "公衆号：前端微站"
console.log(str);   // "微信公衆号：前端微站"
           

可以看出，當隻傳入一個參數時，這三個方法的用法和作用都是一緻的，都是将“公”字（索引值為2）一直到字元串末尾的字元串裁剪下來并傳回，并且都不會影響到原字元串。

二、差別

① slice()和substring()的第二個參數均表示的是裁剪的結束位置（但不包括該項，這與數組中的slice()方法類似），而substr()的第二個參數則表示的是裁剪下來字元串長度

② 當傳入的參數為負值時，slice()會将所有負參數與字元串的長度相加，substring()會把所有負參數都轉換為0，而substr()就相對比較複雜了，它會将第一個負參數加上字元串長度，第二個參數轉換為0

1. 參數均為正數

var str = '微信公衆号：前端微站';
var str1 = str.slice(2,5);
console.log(str1);    // "公衆号"
str1 = str.substring(2,5);
console.log(str1);    // "公衆号"
str1 = str.substr(2,3);
console.log(str1);    // "公衆号"
           

很明顯，slice()和substring()用法一緻，兩個參數分别都表示的是起始位置2和結束位置5，不包含結束位置5所在字元（“：”），而substr()第二個參數表示的是要裁剪下來的字元串長度，執行個體中是裁剪3個字元。

2. 參數存在負數

var str = '微信公衆号：前端微站';
console.log(str.length);   // 10
var str1 = str.slice(-4);   //  相當于str.slice(6)
console.log(str1);   //  "前端微站"
str1 = str.substring(-4);   //  相當于str.substring(0)
console.log(str1);   //  "微信公衆号：前端微站"
str1 = str.substr(-4);   //  相當于str.substr(6)
console.log(str1);   //  "前端微站"

var str2 = str.slice(2,-4);   //  相當于str.slice(2,6)
console.log(str2);   //  "公衆号："
str2 = str.substring(2,-4);   //  相當于str.substring(2,0)，也就是str.substring(0,2)
console.log(str2);   //  "微信"
str2 = str.substr(2,-4);   //  相當于str.substr(2,0)
console.log(str2);   //  ""

var str3 = str.slice(-2,-4);   //  相當于str.slice(8,6)
console.log(str3);    // ""
str3 = str.substring(-2,-4);   //  相當于str.substring(0,0)
console.log(str3);   // ""
str3 = str.substr(-2,-4);   //  相當于str.substr(8,0)
console.log(str3);   // ""

var str4 = str.slice(-4,-2);   //  相當于str.slice(6,8)
console.log(str4);   // "前端"
str4 = str.substring(-4,-2);  //  相當于str.substring(0,0)
console.log(str4);  // ""
str4 = str.substr(-4,-2);  //  相當于str.substr(6,0)
console.log(str4);  // ""
           

當參數為負數時，隻需牢記，slice見負加總長，substring見負則歸零，substr一加總長一歸零。 另外還需要特别注意的一點是，slice()第一個參數須小于第二個參數才能正常截取字元串，否則傳回的是空字元串，而substring()則沒有這個問題。

本文重點總結：

① substr()第二個參數是裁剪長度，隻要為負，裁剪結果必定是空字元串

② 不管如何裁剪，均不影響原字元串

③ 當參數為負，slice加總長，substring則歸零，substr一加總長一歸零。