1. 程式人生 > >【重溫基礎】8.字串

【重溫基礎】8.字串

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

系列目錄:

本章節複習的是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

作用:查詢指定字串位置
indexOflastIndexOf相同點:
兩者接收的引數一致,沒有查到內容,返回-1
indexOflastIndexOf不同點:
若查詢到內容,則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
  1. fromIndex < 0,則fromIndex被視為0
let a = 'hello leo';  
let b = a.indexOf('lo',-1);// 3
  1. indexOflastIndexOf區分大小寫。
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 [email protected]
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推薦 https://github.com/pingan8787/Leo_Reading/issues
ES小冊 es.pingan8787.com