【重溫基礎】8.字串

pingan8787發表於2018-12-22
字串

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

系列目錄：

本章節複習的是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  2eval(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');
  // 3let c = a.indexOf('lo',4);
// -1let e = a.lastIndexOf('l');
  // 6複製程式碼

一定要注意：

  1. 當fromIndex >
    a.length    ，則fromIndex被視為a.length。
let a = 'hello leo';
  let b = a.indexOf('lo',99);
// -1複製程式碼
  1. 當fromIndex <
    0    ，則fromIndex被視為0。
let a = 'hello leo';
  let b = a.indexOf('lo',-1);
// 3複製程式碼
  1. 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');
   // falsea.endsWith('o');
       // truea.includes('lo');
      // true複製程式碼

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

let a = 'hello leo';
a.startsWith('leo',1);
   // falsea.endsWith('o',5);
       // truea.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

來源：https://juejin.im/post/5c1e43945188250d9e60580a

相關文章