ES6學習筆記之字符串新增方法

1.字符串的子串識別

傳統上，Javascript 只有indexof 方法，用來確定一個字符串是否包含在另一個字符串中。如：

//indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
//如果要檢索的字符串值沒有出現，則該方法返回 -1。
let a = 'abcde';
console.log(a.indexOf('cd'));   //2

現在ES6 又提供了三種新方法。每個方法都可接收2個參數，需要檢測的子字符串，以及開始匹配的索引位置。

• includes(str, index): 返回布爾值，表示是否找到了參數字符串

  let a = 'abcdef';
  console.log(a.includes('cd'));  //true
  console.log(a.includes('ab', 1));   //false  (從第1個位置開始找)

• starsWith(str, index): 返回布爾值，表示參數字符串是否在原字符串的頭部

  let a = 'abcadef';
  console.log(a.startsWith('ab'));    //true
  console.log(a.startsWith('ab', 2)); //false

• endsWith(str, index): 返回布爾值，表示參數字符串是否在原字符串的尾部

  let a = 'abcadef';
  console.log(a.endsWith('ef'));    //true
  console.log(a.endsWith('bc', 3)); //true (前3個字符, bc是否在尾部)

如果只是需要判斷某字符串中是否包含子字符串，那么推薦使用ES6 新增的方法；如果需要找到在字符串中的位置，那么就使用 indexOf() 方法。

2. repeat() 

repeat 方法，接收一個Number類型的數據，返回一個新的字符串，表示將原字符串重復 n 次。

console.log('a'.repeat(3)); //aaa

3. padStart(), padEnd() 

如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart() 用於頭部補全，padEnd() 用於尾部補全。

它們一共接受兩個參數，第一個參數是字符串補全生效的最大長度，第二個參數是用來補全的字符串。

如果原字符的長度，等於或大於最大長度，則字符串補全不生效，返回原字符串。

console.log('a'.padStart(5,'xx')); //xxxxa
console.log('a'.padEnd(5,'xx')); //axxxx

//如果用來補全的字符與原字符串，兩者的長度之和超過了最大長度，則會截去超出位數的補全字符串
console.log('aa'.padStart(5,'xx')); //xxxaa

//省略第二個參數，默認使用空格補全長度
console.log('a'.padStart(5)); //'    a'

4.字符串模板

字符串模板最簡單的語法，是使用反引號（`）來包裹普通字符串

let a = 'hello';
console.log(a+', zhangsan');    //以前，我們這樣做
console.log(`${a}, zhangsan`);  //現在，我們這樣做

我們不再需要使用 + 來向字符串插入變量。而是使用 ${params} 直接插入需要添加到字符串的位置。這種方式也叫字符串占位符，變量部分可以用JS的任意表達式進行替換。

5.標簽模板

模板字符串的功能不僅僅是上面這些。它還可以緊跟在一個函數名后面，該函數將被調來處理這個字符串模板。這被稱為“標簽模板”功能。

標簽模板其實並不是模板，而是函數調用的一種特殊形式。“標簽”指的是函數，緊跟在函數名后面的字符串模板是它的參數。如果字符串模板里面有變量，會先將字符串模板處理成多個參數，再調用函數。

let name = 'lisi';
        let city = 'Beijing'
        let res = tag`hello ${name}, \n welcome to ${city}`;
        function tag (literals, ...values){
            console.log(`literals: `,literals);
            console.log(`values: `,values);
        }

運行結果：

第一個參數literals 是數組，包含被js解釋過的字面量字符串， 第二個參數values 是每個替換位的解釋值。數組 literals 的長度永遠比 values 多1。