【重溫基礎】8.字符串

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

系列目錄：

• 【複習資料】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 對象 學習完整的內容。

方法	描述
charAt, charCodeAt, codePointAt	返回字符串指定位置的字符或者字符編碼。
indexOf, lastIndexOf	分別返回字符串中指定子串的位置或最後位置。
startsWith, endsWith,includes	返回字符串是否以指定字符串開始、結束或包含指定字符串。
concat	鏈接兩個字符串並返回新的字符串。
fromCharCode, fromCodePoint	從指定的Unicode值序列構造一個字符串。這是一個String類方法，不是實例方法。
split	經過將字符串分離成一個個子串來把一個String對象分裂到一個字符串數組中。
slice	從一個字符串提取片斷並做爲新字符串返回。
substring, substr	分別經過指定起始和結束位置，起始位置和長度來返回字符串的指定子集。
match, replace,search	經過正則表達式來工做.
toLowerCase, toUpperCase	分別返回字符串的小寫表示和大寫表示。
normalize	按照指定的一種 Unicode 正規形式將當前字符串正規化。
repeat	將字符串內容重複指定次數後返回。
trim	去掉字符串開頭和結尾的空白字符。

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 對象

---

本部份內容到這結束

Author	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推薦	github.com/pingan8787/…
JS小冊	js.pingan8787.com

歡迎關注個人微信公衆號【前端自習課】