本文是 重溫基礎 系列文章的第八篇。
今日感受：人在異鄉，也不能忘記湯圓。

系列目錄：

• 【複習資料】ES6/ES7/ES8/ES9資料整理(個人整理)
• 【重溫基礎】1.語法和資料型別
• 【重溫基礎】2.流程控制和錯誤處理
• 【重溫基礎】3.迴圈和迭代
• 【重溫基礎】4.函式
• 【重溫基礎】5.表示式和運算子
• 【重溫基礎】6.數字
• 【重溫基礎】7.時間物件

本章節複習的是JS中的字串，還有字串的相關屬性和方法。

前置知識：
JavaScript中的字串的每個元素，在字串中都佔據一個位置，第一個元素的索引值為0，往後累加，另外建立字串有2個方法：

• 1.字面量建立：

let a = 'hello';  // "hello"
typeof a; // "string"

• 2.字串物件建立：

let a = new String('hello'); //String {"hello"}
typeof a; // "object"

實際開發中，除非必要，建議使用字面量建立，因為兩種建立方法會有差異：

let a1 = "1+1";
let a2 = new String("1+1");
eval(a1); // number  2
eval(a2); // string  "1+1"

String有一個length

let a = "hello";
a.length; // 5

1.String物件方法：

String物件的方法非常多，建議大家可以到 W3school JavaScript String 物件 學習完整的內容。

1.1 charAt

作用：查詢字串中指定位置的內容。
str.charAt(index) index : 查詢的字元的下標(大於等於0，若小於0則返回空字串)，若沒傳則表示1。

let a = "hello leo!"
a.charAt();  // "h"
a.charAt(1); // "e"
a.charAt(-1);// ""

1.2.indexOf和lastIndexOf

作用：查詢指定字串的位置。
indexOf和lastIndexOf相同點：
兩者接收的引數一致，沒有查到內容，返回-1。
indexOf和lastIndexOf不同點：
若查詢到內容，則indexOf返回第一次出現的索引而lastIndexOf返回最後一次出現的索引。

str.indexOf(value[, fromIndex])接收2個引數：

• value : 需要查詢的字串內容；
• fromIndex : 可選，開始查詢的位置，預設0；

let a = 'hello leo';     
let b = a.indexOf('lo');  // 3
let c = a.indexOf('lo',4);// -1
let e = a.lastIndexOf('l');  // 6

一定要注意：

1. 當fromIndex > a.length，則fromIndex被視為a.length。

let a = 'hello leo';  
let b = a.indexOf('lo',99);// -1

2. 當fromIndex < 0，則fromIndex被視為0。

let a = 'hello leo';  
let b = a.indexOf('lo',-1);// 3

3. indexOf和lastIndexOf區分大小寫。

let a = 'hello leo'; 
let b = a.indexOf('Lo'); // -1

1.3 concat

作用：連線字串。
concat()接收任意個引數作為連線的字串，返回一個合併後的新字串。

let a = 'hello';
let b = ' leo ';
let c = '!'
a.concat(b,c); // "hello leo !"

1.4 split

作用：把字串分割為字串陣列，並可以指定分隔符。
split(separator[,limit])可以接收2個引數：

• separator：必需，字串或者正則表示式，作為分割的內容；
• limit：可選，作為指定返回的陣列的最大長度；

若separator為""，則字串會在每個字元之間分割；

let a = 'How are you doing today?';
a.split();
// ["How are you doing today?"]
a.split("");
// ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"]
a.split(" ");
// ["How", "are", "you", "doing", "today?"]
a.split("",4);
// ["H", "o", "w", " "]
a.split(" ",4);
// ["How", "are", "you", "doing"]

使用其他分割符號：

let a = "ni,hao,a!";
a.split(","); // ["ni", "hao", "a!"]

1.5 slice

作用：提取並返回字串的片斷。
slice([start,end]) 可以接收2個引數：

• start：要提取的片段的起始下標，若小於零，則從字串尾部開始算起，如-1表示字串最後一個字元，-2為倒數第二個字元等等。
• end：要提取的片段的結束下標，若沒有傳入，則表示從start到字串結尾，若為負數則從字串尾部開始算起。

let a = 'How are you doing today?';
a.slice();      // "How are you doing today?"
a.slice(1);     // "ow are you doing today?"
a.slice(-1);    // '?'
a.slice(1,5);   // "ow a"
a.slice(1,-1);  // "ow are you doing today"
a.slice(-2,-1); // "y"

2.字串拓展（ES6）

2.1 includes(),startsWith(),endsWith()

在我們判斷字串是否包含另一個字串時，ES6之前，我們只有typeof方法，ES6之後我們又多了三種方法：

• includes():返回布林值，表示是否找到引數字串。
• startsWith():返回布林值，表示引數字串是否在原字串的頭部。
• endsWith():返回布林值，表示引數字串是否在原字串的尾部。

let a = 'hello leo';
a.startsWith('leo');   // false
a.endsWith('o');       // true
a.includes('lo');      // true

並且這三個方法都支援第二個引數，表示起始搜尋的位置。

let a = 'hello leo';
a.startsWith('leo',1);   // false
a.endsWith('o',5);       // true
a.includes('lo',6);      // false

endsWith 是針對前 n 個字元，而其他兩個是針對從第n個位置直到結束。

2.2 repeat()

repeat方法返回一個新字串，表示將原字串重複n次。
基礎用法：

'ab'.repeat(3);        // 'ababab'
'ab'.repeat(0);        // ''

特殊用法:

• 引數為小數，則取整

'ab'.repeat(2.3);      // 'abab'

• 引數為負數或Infinity，則報錯

'ab'.repeat(-1);       // RangeError
'ab'.repeat(Infinity); // RangeError

• 引數為0到-1的小數或NaN，則取0

'ab'.repeat(-0.5);     // ''
'ab'.repeat(NaN);      // ''

• 引數為字串，則轉成數字

'ab'.repeat('ab');     // ''
'ab'.repeat('3');      // 'ababab'

2.3 padStart(),padEnd()

用於將字串頭部或尾部補全長度，padStart()為頭部補全，padEnd()為尾部補全。
這兩個方法接收2個引數，第一個指定字串最小長度，第二個用於補全的字串。
基礎用法 ：

'x'.padStart(5, 'ab');   // 'ababx'
'x'.padEnd(5, 'ab');     // 'xabab'

特殊用法:

• 原字串長度，大於或等於指定最小長度，則返回原字串。

'xyzabc'.padStart(5, 'ab'); // 'xyzabc'

• 用來補全的字串長度和原字串長度之和，超過指定最小長度，則截去超出部分的補全字串。

'ab'.padStart(5,'012345'); // "012ab"

• 省略第二個引數，則用空格補全。

'x'.padStart(4);           // '    x'
'x'.padEnd(4);             // 'x    '

2.4 模版字串

用於拼接字串，ES6之前：

let a = 'abc' + 
    'def' + 
    'ghi';

ES6之後：

let a = `
    abc
    def
    ghi
`

拼接變數:
在**反引號(`)**中使用${}包裹變數或方法。

// ES6之前
let a = 'abc' + v1 + 'def';

// ES6之後
let a = `abc${v1}def`

3.字串拓展（ES7）

用來為字串填充特定字串，並且都有兩個引數：字串目標長度和填充欄位，第二個引數可選，預設空格。

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'

'es8'.padEnd(2);            // 'es8'
'es8'.padEnd(5);            // 'es8  '
'es8'.padEnd(6, 'woof');    // 'es8woo'
'es8'.padEnd(14, 'wow');    // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');       // 'es86666'

從上面結果來看，填充函式只有在字元長度小於目標長度時才有效，若字元長度已經等於或小於目標長度時，填充字元不會起作用，而且目標長度如果小於字串本身長度時，字串也不會做截斷處理，只會原樣輸出。

參考資料

1. MDN Text formatting
2. W3school JavaScript String 物件

本部分內容到這結束