JavaScript 28個常用字串方法及使用技巧

語言: CN / TW / HK

theme: condensed-night-purple

今天再來看一些JavaScript基礎知識,基礎太重要了。還清楚的記得,今年春招的時候,某大廠面試官狠狠的嘲諷我 JavaScript 的API都記不住🤣太尷尬了,主要還是用的太少了,所以平時還是要多用多積累。今天我們就來看看JavaScript中有哪些常用的字串方法!文章內容較多,建議先收藏再學習!

JS字串方法.png

1. 獲取字串長度

JavaScript中的字串有一個length屬性,該屬性可以用來獲取字串的長度: javascript const str = 'hello'; str.length // 輸出結果:5

2. 獲取字串指定位置的值

charAt()和charCodeAt()方法都可以通過索引來獲取指定位置的值:

  • charAt() 方法獲取到的是指定位置的字元;
  • charCodeAt()方法獲取的是指定為值得字元的Unicode值。

(1)charAt()

charAt() 方法可以返回指定位置的字元。其語法如下: javascript string.charAt(index) index表示字元在字串中的索引值: javascript const str = 'hello'; str.charAt(1) // 輸出結果:e 我們知道,字串也可以通過索引值來直接獲取對應字元,那它和charAt()有什麼區別呢?來看例子: javascript const str = 'hello'; str.charAt(1) // 輸出結果:e str[1] // 輸出結果:e str.charAt(5) // 輸出結果:'' str[5] // 輸出結果:undefined 可以看到,當index的取值不在str的長度範圍內時,str[index]會返回undefined,而charAt(index)會返回空字串;除此之外,str[index]不相容ie6-ie8,charAt(index)可以相容。

(2)charCodeAt()

charCodeAt():該方法會返回指定索引位置字元的 Unicode 值,返回值是 0 - 65535 之間的整數,表示給定索引處的 UTF-16 程式碼單元,如果指定位置沒有字元,將返回 NaNjavascript let str = "abcdefg"; console.log(str.charCodeAt(1)); // "b" --> 98 通過這個方法,可以獲取字串中指定Unicode編碼值範圍的字元。比如,數字0~9的Unicode編碼範圍是: 48~57,可以通過這個方法來篩選字串中的數字,當然如果你更熟悉正則表示式,會更方便。

3. 檢索字串是否包含特定序列

這5個方法都可以用來檢索一個字串中是否包含特定的序列。其中前兩個方法得到的指定元素的索引值,並且只會返回第一次匹配到的值的位置。後三個方法返回的是布林值,表示是否匹配到指定的值。

注意:這5個方法都對大小寫敏感!

(1)indexOf()

indexOf():查詢某個字元,有則返回第一次匹配到的位置,否則返回-1,其語法如下: javascript string.indexOf(searchvalue,fromindex) 該方法有兩個引數:

  • searchvalue:必需,規定需檢索的字串值;
  • fromindex:可選的整數引數,規定在字串中開始檢索的位置。它的合法取值是 0 到 string.length - 1。如省略該,則從字串的首字元開始檢索。 javascript let str = "abcdefgabc"; console.log(str.indexOf("a")); // 輸出結果:0 console.log(str.indexOf("z")); // 輸出結果:-1 console.log(str.indexOf("c", 4)) // 輸出結果:9

(2)lastIndexOf()

lastIndexOf():查詢某個字元,有則返回最後一次匹配到的位置,否則返回-1 javascript let str = "abcabc"; console.log(str.lastIndexOf("a")); // 輸出結果:3 console.log(str.lastIndexOf("z")); // 輸出結果:-1 該方法和indexOf()類似,只是查詢的順序不一樣,indexOf()是正序查詢,lastIndexOf()是逆序查詢。

(3)includes()

includes():該方法用於判斷字串是否包含指定的子字串。如果找到匹配的字串則返回 true,否則返回 false。該方法的語法如下: javascript string.includes(searchvalue, start) 該方法有兩個引數:

  • searchvalue:必需,要查詢的字串;
  • start:可選,設定從那個位置開始查詢,預設為 0。 ```javascript let str = 'Hello world!';

str.includes('o') // 輸出結果:true str.includes('z') // 輸出結果:false str.includes('e', 2) // 輸出結果:false ```

(4)startsWith()

startsWith():該方法用於檢測字串是否以指定的子字串開始。如果是以指定的子字串開頭返回 true,否則 false。其語法和上面的includes()方法一樣。 ```javascript let str = 'Hello world!';

str.startsWith('Hello') // 輸出結果:true str.startsWith('Helle') // 輸出結果:false str.startsWith('wo', 6) // 輸出結果:true ```

(5)endsWith()

endsWith():該方法用來判斷當前字串是否是以指定的子字串結尾。如果傳入的子字串在搜尋字串的末尾則返回 true,否則將返回 false。其語法如下: javascript string.endsWith(searchvalue, length) 該方法有兩個引數:

  • searchvalue:必需,要搜尋的子字串;
  • length: 設定字串的長度,預設值為原始字串長度 string.length。 ```javascript let str = 'Hello world!';

str.endsWith('!') // 輸出結果:true str.endsWith('llo') // 輸出結果:false str.endsWith('llo', 5) // 輸出結果:true ``` 可以看到,當第二個引數設定為5時,就會從字串的前5個字元中進行檢索,所以會返回true。

4. 連線多個字串

concat() 方法用於連線兩個或多個字串。該方法不會改變原有字串,會返回連線兩個或多個字串的新字串。其語法如下: javascript string.concat(string1, string2, ..., stringX) 其中引數 string1, string2, ..., stringX 是必須的,他們將被連線為一個字串的一個或多個字串物件。 javascript let str = "abc"; console.log(str.concat("efg")); //輸出結果:"abcefg" console.log(str.concat("efg","hijk")); //輸出結果:"abcefghijk" 雖然concat()方法是專門用來拼接字串的,但是在開發中使用最多的還是加操作符+,因為其更加簡單。

5. 字串分割成陣列

split() 方法用於把一個字串分割成字串陣列。該方法不會改變原始字串。其語法如下: javascript string.split(separator,limit) 該方法有兩個引數:

  • separator:必需。字串或正則表示式,從該引數指定的地方分割 string。
  • limit:可選。該引數可指定返回的陣列的最大長度。如果設定了該引數,返回的子串不會多於這個引數指定的陣列。如果沒有設定該引數,整個字串都會被分割,不考慮它的長度。 javascript let str = "abcdef"; str.split("c"); // 輸出結果:["ab", "def"] str.split("", 4) // 輸出結果:['a', 'b', 'c', 'd'] 如果把空字串用作 separator,那麼字串中的每個字元之間都會被分割。 javascript str.split(""); // 輸出結果:["a", "b", "c", "d", "e", "f"] 其實在將字串分割成陣列時,可以同時拆分多個分割符,使用正則表示式即可實現: javascript const list = "apples,bananas;cherries" const fruits = list.split(/[,;]/) console.log(fruits); // 輸出結果:["apples", "bananas", "cherries"]

6. 擷取字串

substr()、substring()和 slice() 方法都可以用來擷取字串。

(1) slice()

slice() 方法用於提取字串的某個部分,並以新的字串返回被提取的部分。其語法如下: javascript string.slice(start,end) 該方法有兩個引數:

  • start:必須。 要擷取的片斷的起始下標,第一個字元位置為 0。如果為負數,則從尾部開始擷取。
  • end:可選。 要擷取的片段結尾的下標。若未指定此引數,則要提取的子串包括 start 到原字串結尾的字串。如果該引數是負數,那麼它規定的是從字串的尾部開始算起的位置。

上面說了,如果start是負數,則該引數規定的是從字串的尾部開始算起的位置。也就是說,-1 指字串的最後一個字元,-2 指倒數第二個字元,以此類推: javascript let str = "abcdef"; str.slice(1,6); // 輸出結果:"bcdef" str.slice(1); // 輸出結果:"bcdefg" str.slice(); // 輸出結果:"abcdefg" str.slice(-2); // 輸出結果:"fg" str.slice(6, 1); // 輸出結果:"" 注意,該方法返回的子串包括開始處的字元,但不包括結束處的字元

(2) substr()

substr() 方法用於在字串中抽取從開始下標開始的指定數目的字元。其語法如下: javascript string.substr(start,length) 該方法有兩個引數:

  • start 必需。要抽取的子串的起始下標。必須是數值。如果是負數,那麼該引數宣告從字串的尾部開始算起的位置。也就是說,-1 指字串中最後一個字元,-2 指倒數第二個字元,以此類推。
  • length:可選。子串中的字元數。必須是數值。如果省略了該引數,那麼返回從 stringObject 的開始位置到結尾的字串。 javascript let str = "abcdef"; str.substr(1,6); // 輸出結果:"bcdefg" str.substr(1); // 輸出結果:"bcdefg" 相當於擷取[1,str.length-1] str.substr(); // 輸出結果:"abcdefg" 相當於擷取[0,str.length-1] str.substr(-1); // 輸出結果:"g"

(3) substring()

substring() 方法用於提取字串中介於兩個指定下標之間的字元。其語法如下: javascript string.substring(from, to) 該方法有兩個引數:

  • from:必需。一個非負的整數,規定要提取的子串的第一個字元在 string 中的位置。
  • to:可選。一個非負的整數,比要提取的子串的最後一個字元在 string 中的位置多 1。如果省略該引數,那麼返回的子串會一直到字串的結尾。

注意: 如果引數 from 和 to 相等,那麼該方法返回的就是一個空串(即長度為 0 的字串)。如果 from 比 to 大,那麼該方法在提取子串之前會先交換這兩個引數。並且該方法不接受負的引數,如果引數是個負數,就會返回這個字串。 javascript let str = "abcdef"; str.substring(1,6); // 輸出結果:"bcdef" [1,6) str.substring(1); // 輸出結果:"bcdefg" [1,str.length-1] str.substring(); // 輸出結果:"abcdefg" [0,str.length-1] str.substring(6,1); // 輸出結果 "bcdef" [1,6) str.substring(-1); // 輸出結果:"abcdefg" 注意,該方法返回的子串包括開始處的字元,但不包括結束處的字元

7. 字串大小寫轉換

toLowerCase() 和 toUpperCase()方法可以用於字串的大小寫轉換。

(1)toLowerCase()

toLowerCase():該方法用於把字串轉換為小寫。 javascript let str = "adABDndj"; str.toLowerCase(); // 輸出結果:"adabdndj"

(2)toUpperCase()

toUpperCase():該方法用於把字串轉換為大寫。 javascript let str = "adABDndj"; str.toUpperCase(); // 輸出結果:"ADABDNDJ" 我們可以用這個方法來將字串中第一個字母變成大寫: javascript let word = 'apple' word = word[0].toUpperCase() + word.substr(1) console.log(word) // 輸出結果:"Apple"

8. 字串模式匹配

replace()、match()和search()方法可以用來匹配或者替換字元。

(1)replace()

replace():該方法用於在字串中用一些字元替換另一些字元,或替換一個與正則表示式匹配的子串。其語法如下: javascript string.replace(searchvalue, newvalue) 該方法有兩個引數:

  • searchvalue:必需。規定子字串或要替換的模式的 RegExp 物件。如果該值是一個字串,則將它作為要檢索的直接量文字模式,而不是首先被轉換為 RegExp 物件。
  • newvalue:必需。一個字串值。規定了替換文字或生成替換文字的函式。 javascript let str = "abcdef"; str.replace("c", "z") // 輸出結果:abzdef 執行一個全域性替換, 忽略大小寫: javascript let str="Mr Blue has a blue house and a blue car"; str.replace(/blue/gi, "red"); // 輸出結果:'Mr red has a red house and a red car' 注意: 如果 regexp 具有全域性標誌 g,那麼 replace() 方法將替換所有匹配的子串。否則,它只替換第一個匹配子串。

(2)match()

match():該方法用於在字串內檢索指定的值,或找到一個或多個正則表示式的匹配。該方法類似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字串的位置。其語法如下: javascript string.match(regexp) 該方法的引數 regexp 是必需的,規定要匹配的模式的 RegExp 物件。如果該引數不是 RegExp 物件,則需要首先把它傳遞給 RegExp 建構函式,將其轉換為 RegExp 物件。

注意: 該方法返回存放匹配結果的陣列。該陣列的內容依賴於 regexp 是否具有全域性標誌 g。 javascript let str = "abcdef"; console.log(str.match("c")) // ["c", index: 2, input: "abcdef", groups: undefined]

(3)search()

search()方法用於檢索字串中指定的子字串,或檢索與正則表示式相匹配的子字串。其語法如下: javascript string.search(searchvalue) 該方法的引數 regex 可以是需要在 string 中檢索的子串,也可以是需要檢索的 RegExp 物件。

注意: 要執行忽略大小寫的檢索,請追加標誌 i。該方法不執行全域性匹配,它將忽略標誌 g,也就是隻會返回第一次匹配成功的結果。如果沒有找到任何匹配的子串,則返回 -1。

返回值: 返回 str 中第一個與 regexp 相匹配的子串的起始位置。 javascript let str = "abcdef"; str.search(/bcd/) // 輸出結果:1

9. 移除字串收尾空白符

trim()、trimStart()和trimEnd()這三個方法可以用於移除字串首尾的頭尾空白符,空白符包括:空格、製表符 tab、換行符等其他空白符等。

(1)trim()

trim() 方法用於移除字串首尾空白符,該方法不會改變原始字串: javascript let str = " abcdef " str.trim() // 輸出結果:"abcdef" 注意,該方法不適用於null、undefined、Number型別。

(2)trimStart()

trimStart() 方法的的行為與trim()一致,不過會返回一個從原始字串的開頭刪除了空白的新字串,不會修改原始字串: ```javascript const s = ' abc ';

s.trimStart() // "abc " ```

(3)trimStart()

trimEnd() 方法的的行為與trim()一致,不過會返回一個從原始字串的結尾刪除了空白的新字串,不會修改原始字串: ```javascript const s = ' abc ';

s.trimEnd() // " abc" ```

10. 獲取字串本身

valueOf()和toString()方法都會返回字串本身的值,感覺用處不大。

(1)valueOf()

valueOf():返回某個字串物件的原始值,該方法通常由 JavaScript 自動進行呼叫,而不是顯式地處於程式碼中。 javascript let str = "abcdef" console.log(str.valueOf()) // "abcdef"

(2)toString()

toString():返回字串物件本身 javascript let str = "abcdef" console.log(str.toString()) // "abcdef"

11. 重複一個字串

repeat() 方法返回一個新字串,表示將原字串重複n次: javascript 'x'.repeat(3) // 輸出結果:"xxx" 'hello'.repeat(2) // 輸出結果:"hellohello" 'na'.repeat(0) // 輸出結果:"" 如果引數是小數,會向下取整: javascript 'na'.repeat(2.9) // 輸出結果:"nana" 如果引數是負數或者Infinity,會報錯: javascript 'na'.repeat(Infinity) // RangeError 'na'.repeat(-1) // RangeError 如果引數是 0 到-1 之間的小數,則等同於 0,這是因為會先進行取整運算。0 到-1 之間的小數,取整以後等於-0,repeat視同為 0。 javascript 'na'.repeat(-0.9) // 輸出結果:"" 如果引數是NaN,就等同於 0: javascript 'na'.repeat(NaN) // 輸出結果:"" 如果repeat的引數是字串,則會先轉換成數字。 javascript 'na'.repeat('na') // 輸出結果:"" 'na'.repeat('3') // 輸出結果:"nanana"

12. 補齊字串長度

padStart()和padEnd()方法用於補齊字串的長度。如果某個字串不夠指定長度,會在頭部或尾部補全。

(1)padStart()

padStart()用於頭部補全。該方法有兩個引數,其中第一個引數是一個數字,表示字串補齊之後的長度;第二個引數是用來補全的字串。 ​

如果原字串的長度,等於或大於指定的最小長度,則返回原字串: javascript 'x'.padStart(1, 'ab') // 'x' 如果用來補全的字串與原字串,兩者的長度之和超過了指定的最小長度,則會截去超出位數的補全字串: javascript 'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 如果省略第二個引數,預設使用空格補全長度: javascript 'x'.padStart(4, 'ab') // 'a ' padStart()的常見用途是為數值補全指定位數,筆者最近做的一個需求就是將返回的頁數補齊為三位,比如第1頁就顯示為001,就可以使用該方法來操作: javascript "1".padStart(3, '0') // 輸出結果: '001' "15".padStart(3, '0') // 輸出結果: '015'

(2)padEnd()

padEnd()用於尾部補全。該方法也是接收兩個引數,第一個引數是字串補全生效的最大長度,第二個引數是用來補全的字串: javascript 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'

13. 字串轉為數字

parseInt()和parseFloat()方法都用於將字串轉為數字。

(1)parseInt()

parseInt() 方法用於可解析一個字串,並返回一個整數。其語法如下: javascript parseInt(string, radix) 該方法有兩個引數:

  • string:必需。要被解析的字串。
  • radix:可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。

當引數 radix 的值為 0,或沒有設定該引數時,parseInt() 會根據 string 來判斷數字的基數。 javascript parseInt("10"); // 輸出結果:10 parseInt("17",8); // 輸出結果:15 (8+7) parseInt("010"); // 輸出結果:10 或 8 當引數 radix 的值以 “0x” 或 “0X” 開頭,將以 16 為基數: javascript parseInt("0x10") // 輸出結果:16 如果該引數小於 2 或者大於 36,則 parseInt() 將返回 NaN: javascript parseInt("50", 1) // 輸出結果:NaN parseInt("50", 40) // 輸出結果:NaN 只有字串中的第一個數字會被返回,當遇到第一個不是數字的字元為止: javascript parseInt("40 4years") // 輸出結果:40 如果字串的第一個字元不能被轉換為數字,就會返回 NaN: javascript parseInt("new100") // 輸出結果:NaN 字串開頭和結尾的空格是允許的: javascript parseInt(" 60 ") // 輸出結果: 60

(2)parseFloat()

parseFloat() 方法可解析一個字串,並返回一個浮點數。該方法指定字串中的首個字元是否是數字。如果是,則對字串進行解析,直到到達數字的末端為止,然後以數字返回該數字,而不是作為字串。其語法如下: javascript parseFloat(string) parseFloat 將它的字串引數解析成為浮點數並返回。如果在解析過程中遇到了正負號(+ 或 -)、數字 (0-9)、小數點,或者科學記數法中的指數(e 或 E)以外的字元,則它會忽略該字元以及之後的所有字元,返回當前已經解析到的浮點數。同時引數字串首位的空白符會被忽略。 ```javascript parseFloat("10.00") // 輸出結果:10.00 parseFloat("10.01") // 輸出結果:10.01 parseFloat("-10.01") // 輸出結果:-10.01 parseFloat("40.5 years") // 輸出結果:40.5

如果引數字串的第一個字元不能被解析成為數字,則 parseFloat 返回 NaN。javascript parseFloat("new40.5") // 輸出結果:NaN ```

今天就到這裡了,如果覺得有用就點贊、收藏、關注我吧!

推薦閱讀: - 程式設計師面試必備軟技能,值得收藏! - 金九銀十,你準備好面試了嗎? (附30w字前端面試題總結) - 關於 JavaScript 資料型別,有哪些你不知道的細節? - 24個 JavaScript 迴圈遍歷方法,你都知道嗎? - 淺談 JavaScript 變數提升 - 雅虎35條軍規,你知道幾條?