《看完就懂系列》15個方法教你玩轉字符串

2021-12-29 前端學習棧

作為JavaScript基礎數據類型，字符串具有一些很強大的方法，在平時的工作中用到的地方也特別的多，很多時候因為不熟悉某個字符串的方法，往往走了很多彎路，所以整理了15個常用又高效的字符串方法，來一起看看這15個提升工作效率的方法吧！

1. 字符串去除首尾空格 —— trim()

說明： 去除字符串兩邊的空白。

需求場景： 用戶搜索前去除輸入的首尾空格。

用法： string.trim()

例子：

let str = " 白色不白，黑色不黑，我...我不喜歡你 "
let result = str.trim()
console.log(result); // 控制臺列印："白色不白，黑色不黑，我...我不喜歡你"
複製代碼

2. 字符串替換指定字符（串）—— replace()

說明： 字符串替換字符還是replace()最強大~默認替換第一個符合條件的字符串，也可用正則做全局匹配

需求場景： 字符串的替換，關鍵詞的屏蔽隱藏等

**用法：** string.replace(searchvalue,newvalue)

例子：

let str = "你知道嗎？世界上有60億人，宇宙有60萬億小行星，你比小行星還要珍貴一萬倍"
let result1 = str.replace("億","個")
let result2 = str.replace(/億/g,"個")
console.log(result1) // 控制臺列印："你知道嗎？世界上有60個人，宇宙有60萬億小行星，你比小行星還要珍貴一萬倍"
console.log(result2) // 控制臺列印："你知道嗎？世界上有60個人，宇宙有60萬個小行星，你比小行星還要珍貴一萬倍"
複製代碼

3. 字符串合併 —— concat()

說明： 連接兩個或更多字符串，並返回新的字符串。（悄悄告訴你，數組也可以使用哦~）

需求場景： 字符串合併展示。

用法： string.concat()

例子：

let str1 = "我有很多好聽的情話,"
let str2 = "可面對你都不敢說不出口。"
let result = str1.concat(str2)
console.log(result) // 控制臺列印："我有很多好聽的情話,可面對你都不敢說不出口。"
複製代碼

4. 字符串轉數組 —— split()

說明： 把字符串通過特定字符分割為字符串數組，split還可以使用正則表達式實現拆分多個分隔符。

需求場景： 字符串轉數組進行遍歷等操作。

用法1： string.split()

用法2： string.split(/[*]/)

例子：

let str = "張三,李四;王五"
let result1 = str.split(',')
let result2 = str.split(/[,;]/)
console.log(result1) // 控制臺列印：["張三", "李四;王五"]
console.log(result2) // 控制臺列印：["張三", "李四", "王五"]
複製代碼

5. 字符串轉數組 —— [...string]

**說明：** 說起來，這並不是字符串的方法，主要是我覺得ES6語法中的擴展操作符的...語法是轉數組最簡潔的方法。它和split()區別在於：...語法不根據特定字符切割，而是把每個字符都當作單獨的元素添加到數組中。

**需求場景：** 字符串全部分割成字符數組。

用法： [...string]

例子：

let str = '這是一個字符串string'
let arr = [...str]
console.log(arr) // 控制臺列印：["這", "是", "一", "個", "字", "符", "串", "s", "t", "r", "i", "n", "g"]
複製代碼

6. 字符串反轉 —— [...string].reverse().join("")

說明： 這個也不能算是字符串方法，但是好用。本質上還是轉成數組，數組反轉之後，再拼接成字符串。

需求場景： 將當前字符串反轉輸出

用法： [...string].reverse().join("")

例子：

let str = "兩極反轉，龍捲風摧毀停車場!"
let result = [...str].reverse().join("")
console.log(result) // 控制臺列印：!場車停毀摧風卷龍，轉反極兩
複製代碼

7. 字符串的多次複製 —— repeat ()

說明： 複製字符串指定次數，並將它們連接在一起返回。

需求場景： 字符串需要進行 n 次自動複製。

用法： string.repeat(n)

例子：

let str1 = '複製'
let result = str1.repeat(2)
consol.log(result) // 控制臺列印：複製複製

let str2 = '10'
let result = str2.repeat(5)
console.log(result) // 控制臺列印：1010101010
複製代碼

8. 字符串是否包含某字符 （串）—— search()

**說明：**檢索字符串中指定的或與正則表達式相匹配的首個子字符串。如果匹配到了則返回匹配字符串首字符下標，如果沒有匹配到，則返回 -1。

需求場景： 字符串內關鍵字的搜索查詢定位。

用法： string.search(searchvalue)。

例子：

let str = "今天的夜色很好，月亮也很圓，唯一遺憾的是，我不是從你的窗子裡看到的月亮。"
let result1 = str.search("月亮")
let result2 = str.search(/[，。]/)
console.log(result1) // 控制臺列印：8
console.log(result2) // 控制臺列印：7
複製代碼

9. 字符串內是否包含某字符（串）—— includes()

說明： includes()可選擇從某處下標之後開始查找，返回true或false。第二個參數代表從某下標處開始查找，忽略則代表從下標0開始查找。

它和search()區別在於：search()返回指定下標， includes()返回true或false；search()不能從指定下標開始查找， includes()可以從指定下標處開始查找。

需求場景： 判斷字符串中是否有不合法字符等

用法： string.includes(searchvalue, start)

例子：

let str = "沒有夏日的的涼風，也沒有冬日的暖陽，它們只是恰好出現在了合適的時間罷了"
let result1 = str.includes("冬日")
let result2 = str.includes("冬日",20)
console.log(result1); // 控制臺列印：true
console.log(result2); // 控制臺列印：false
複製代碼

10. 字符串中指定的字符串值在首次或最後一次出現的位置 —— indexOf() 和 lastIndexOf()

說明：

indexOf() 方法可返回某個指定的字符串值首次出現的位置，即從前向後搜索。如果指定第二個參數 start，則在字符串中的指定位置開始從前向後搜索。

lastIndexOf() 方法可返回某個指定的字符串值最後出現的位置，即從後向前搜索。如果指定第二個參數 start，則在字符串中的指定位置從後向前搜索。

需求場景： 關鍵字首次或最後一次出現的位置

用法1： string.indexOf(searchvalue,start) 指定的字符串值首次出現的位置

用法2： string.lastIndexOf(searchvalue,start) 指定的字符串值最後出現的位置

例子：

let str = "你來人間一趟，你要看看太陽。和你的心上人一起走在街上，了解她，也要了解太陽"
let result1 = str.indexOf("太陽")
let result2 = str.indexOf("太陽",10) // 從10下標的字符開始查找"太陽"，查找範圍是"太陽。和你的心上人一起走在街上，了解她，也要了解太陽"，下標還是相對原字符串而言的，因此返回11。
let result3 = str.lastIndexOf("太陽")
let result4 = str.lastIndexOf("太陽",10) // 0-10下標的字符串為"你來人間一趟，你要看看"，沒有"太陽"，返回-1
console.log(result1) // 控制臺列印：11
console.log(result2) // 控制臺列印：11
console.log(result3) // 控制臺列印：35
console.log(result4) // 控制臺列印：-1
複製代碼

11. 字符串轉大小寫 —— toLowerCase() 和 toUpperCase()

說明： 字符串大小寫之間的轉換

需求場景： 網址，英文名，首字母大寫等要求。

用法1： string.toLowerCase() 轉成小寫字母

用法2： string.toUpperCase() 轉成大寫字母

例子：

let str = "For you, A thousand times over"
let result1 = str.toLowerCase()
let result2 = str.toUpperCase()
console.log(result1) // 控制臺列印："for you, a thousand times over"
console.log(result2) // 控制臺列印："FOR YOU, A THOUSAND TIMES OVER"
複製代碼

12. 字符串填充到指定長度 —— padStart () 和 padEnd ()

說明： 字符串填充指定字符到指定長度

需求場景： 字符串長度不足，需要補充至指定長度n，如年月日，隱藏手機號，隱藏暱稱等。

用法1： string.padStart(n,'補充內容') 從字符串前添加補充內容。

用法2： string.padEnd (n,'補充內容') 從字符串後添加補充內容。

例子：

// 在字符串前補充"-"，直到字符串的長度為5
let str1 = '預備開始'
let result = str1.padStart(5, '-')
console.log(result) // 控制臺列印："---預備開始"

//在末尾添加"*"，直到字符串的長度為11
let str2 = "184"
let result = str2.padEnd(11, "*")
console.log(result) // 控制臺列印："184********"
複製代碼

13. 字符串是否以特定字符（串）開頭或結尾 —— startsWith()、endsWith()

說明： 用於檢測字符串是否以指定的子字符串開始。如果是以指定的子字符串開頭返回 true，否則 false。startsWith()、endsWith()方法區分大小寫。第二個參數代表從某下標處開始判斷是否以特定字符（串）開頭或結尾，忽略則startsWith()從下標0開始檢測，endsWith()從字符串最後一位下標開始檢測。

值得注意的是：

當startsWith() 的第二個參數如果超出了當前字符串的最大長度，依舊生效，返回false。

當endsWith() 的第二個參數如果超出了當前字符串的最大長度，會不生效，改為從字符串最後一位下標開始檢測。

需求場景： 判斷字符串是否以指定字符開頭或結尾

用法1： string.startsWith(searchvalue, start)

用法2： string.endsWith(searchvalue, start)

例子：

let str = "過去的時候，我們相視一笑，就已過了大半輩子"
let result1 = str.startsWith("過去")
let result2 = str.startsWith("過去",10)
let result3 = str.endsWith("半輩子")
let result4 = str.endsWith("半輩子",20)
console.log(result1); // 控制臺列印：true
console.log(result2); // 控制臺列印：false
console.log(result3); // 控制臺列印：true
console.log(result4); // 控制臺列印：false
複製代碼

14. 字符串長度計算 —— length

說明： length屬性不僅是數組的屬性，同時偽數組，字符串都有length屬性。但是遇到某些生僻字如「𩸽」或者表情符號「🙂」，它們的length為2，這時候返回的length可能不是我們真正想要的。這是因為js字符串是由16位的代碼單元組成，而不是由Unicode代碼點組成。同時js使用兩個代碼單元表示216及其以上的Unicode代碼點。這兩個代碼單元被稱為代理對。一個代碼單元被默認為1個長度單位，像「𩸽」或者「🙂」是由兩個代碼單元組成的代理對，因此它們的length為2。

需求場景： 求出當前字符串長度

用法： string.length

例子：

let str = "相約白頭偕老，你卻悄悄禿了頭"
let result = str.length
console.log(result) // 控制臺列印：14
複製代碼

15. 字符串截取 —— substr() 和 slice() 和 substring()

說明： 字符串截取和拼接是字符串最常用也是最易錯的方法。主要原因是 substr() 、 slice() 和 substring()的區別有很多小夥伴還不太明白。

substr()：

參數一（必須）：一個整數，要開始截取字符的下標，如為負則代表從尾部開始截取。參數二（可選）：一個整數，要截取字符的數量。如果省略該參數，則默認為string.length，即當前字符串的長度。

slice() ：

參數一（必須）：一個整數，要開始截取字符的下標，如為負則代表從尾部開始截取。參數二（可選）：一個整數，要結束截取字符的下標，如為負則代表從尾部截取多少個字符。如果省略該參數，則默認為string.length，即當前字符串的長度。

substring() ：

參數一（必須）：一個非負的整數，要開始截取字符的下標。參數二（可選）：一個非負的整數，要結束截取字符的下標。如果省略該參數，則默認為string.length，即當前字符串的長度。

需求場景： 截取指定下標指定長度的字符串

用法1： string.substr(start,length)

用法2： string.slice(start,end)

用法3： string.substring(start,end)

例子：

let str = '0123456789'
let result1 = str.substr(2,5) // 從下標2開始截取，截取5位
let result2 = str.slice(2,5) // 從下標2開始截取，截取到下標5（不含下標5）
let result3 = str.substring(2,5) // 從下標2開始截取，截取到下標5（不含下標5）

console.log(result1) // 控制臺列印：23456
console.log(result2) // 控制臺列印：234
console.log(result3) // 控制臺列印：234
複製代碼

總結

這就是關於字符串常用的15個方法詳細說明，可在我們工作中的很多時候，可能並不能很好的使用它們。大多是因為不夠熟練，看一遍容易忘記，所以我們要時常翻一翻這些常用的方法，也許就能節省你工作中幾十分鐘~ 為摸魚大業添磚加瓦 ~

相關焦點

  • 必懂!Excel中長字符串的秘密
    我們經常會看見這樣的長字符串，從別的地方導入或者因沒有設置單元格為文本格式，顯示E+17，長字符串超過15位的數字全部變成0。
  • C sharp 編程基礎之字符串及字符串提供的各種方法解析
    在 C# 中，您可以使用字符數組來表示字符串，但是，更常見的做法是使用 string關鍵字來聲明一個字符串變量。string 關鍵字是 System.String 類的別名。當你給一個字符串重新賦值之後，老值並沒有銷毀，而是重新開闢一塊空間存儲新值。
  • 淺談Java中字符串的初始化及字符串操作類
    當你知道字符串的初始化細節後, 再去寫 Strings="hello"或 Strings=newString("hello")等代碼時, 就能做到心中有數。首先得搞懂字符串常量池的概念。常量池是Java的一項技術, 八種基礎數據類型除了float和double都實現了常量池技術.
  • JS-字符串截取方法
    ); //從索引為3的字符起到索引為5的前一個字符 34alert(str.slice(3, -3)); //從索引為3的字符起到倒數第3個字符的前一個字符 3456substring () 方法用於提取字符串中介於兩個指定下標之間的字符。
  • 【字符串哈希】字符串哈希入門
    Tag : 「滑動窗口」、「哈希表」、「字符串哈希」、「前綴和」所有 DNA 都由一系列縮寫為 'A'，'C'，'G' 和 'T' 的核苷酸組成，例如："ACGAATTCCG"。在研究 DNA 時，識別 DNA 中的重複序列有時會對研究非常有幫助。
  • 【新手筆記】一文教你玩轉Python字符串全能用法
    在爬蟲中經常對字符串進行操作，包括 URL 拼接、格式化、數據處理(替換、去除空白、截取等)，所以字符串的常規操是需要熟練掌握的。Python 通過 str 類型提供大量方法來操作字符串，如字符串的替換、刪除、截取、複製、連接、比較、查找、分隔等。
  • Python 字符串格式化方法總結
    背景 字符串格式化的主要使用場景是讓變量列印出來，讓人看著美觀、易於查看。比如日誌文件，設置好格式，後期在查詢問題時，就可以快速定位。字符串格式化就類似於手機APP界面一樣，UI、排版設計都是為了使人機互動更加直觀，內容讓人看起來更美觀、更舒服。
  • MATLAB字符和字符串
    3.字符和字符串在MATLAB中，幾個字符（Character）可以構一個字符串（String）。>> size(S)ans =2 18需要注意的是：在直接輸入多行字符串數組的時候，每一行的字符個數必須相同。【例3-7】 使用函數str2mat創建多行串數組示例。
  • 【JavaScript 教程】第五章 字符串11— includes():檢查字符串是否包含子字符串
    JavaScript String includes() 方法介紹contains() 方法確定一個字符串是否包含另一個字符串：>string.includes(searchString [,position])如果在字符串中找到 searchString，includes() 方法返回 true；否則為false。
  • String字符串常用方法
    1、IndexOf方法：確定指定字符串在字符串中的索引，如果在字符串中找到指定字符，則返回其索引，否則返回-1。
  • 你真的知道 Python 字符串怎麼用嗎?
    拆分字符串在字符串的幾種拼接方法中，join() 方法可以將列表中的字符串元素，拼接成一個長的字符串，與此相反，split() 方法可以將長字符串拆分成一個列表但是，這還不足以回答本文標題的問題——你真的知道 Python 的字符串怎麼用嗎？這些特有的操作方法，再加上之前文章提到的序列共有的操作、字符串讀寫文件、字符串列印、字符串Intern機制等等內容，才差不多能夠回答這個問題。儘管如此，為了體現嚴謹性，我試著再聊聊「Python 字符串不可以做的事」，從相反的維度來補充回答這個問題。
  • 字符串本地化
    在本地化字符串時，根據語法規則為每一種類型的語句定義一個可本地化的字符串是非常重要的。假設你在應用中需要顯示「Paul invited you」和「You invited Paul」，那麼只本地化格式化字符串「%@ invited %@」看起來是個不錯的選擇，這樣在合適的時候把「you」本地化之後插入進去就可以完成任務。
  • JavaScript字符串操作方法大全,包含ES6方法
    該方法類似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。也就是說，-1 指字符串中最後一個字符，-2 指倒數第二個字符，以此類推。length：可選。子串中的字符數。必須是數值。如果省略了該參數，那麼返回從 stringObject 的開始位置到結尾的字串。
  • 4 種將字符串轉換為字符數組的方法
    通常，我們要進行這種轉換以使用強大的數組方法。1、split() 方法常見的轉換技術是split字符串方法，但這也是有問題的一種。通過使用空字符串作為split方法的分隔符，我們可以將字符串轉換為字符數組。
  • 10個很棒的 JavaScript 字符串技巧
    最近開源了一個 Vue 組件，還不夠完善，歡迎大家來一起完善它，也希望大家能給個 star 支持一下，謝謝各位了。我們稱一個字符序列為字符串。這幾乎是所有程式語言中都有的基本類型之一。這裡跟大家展示關於 JS 字符串的10個很棒的技巧，你可能還不知道哦？
  • 手把手教你,學會Excel字符串提取
    MID和MIDB函數的3個參數均不可省略，如果MIDB函數的第三參數為1，且該位置字符為雙字節字符，結果將返回空格，如圖10-55所示。示例10-20  使用MID函數提取字符串中的手機號圖10-56所示的是文字和數字混合的字符串，字符串前後為文本，中間包含的數字是手機號。需要將中間的手機號提取到B列。在B2單元格中輸入以下公式，向下複製到B9單元格。
  • js字符串常用方法總結
    //參數可以是某個字符或者正則表達式，返回匹配的字符str.exec(reg)   //返回每次匹配的詳細信息4、字符串截取str.substring(s1, s2)   //傳入兩個下標，返回截取的字符，左閉右開區間；不傳參數則返回整個字符串；傳入的負數會轉換成0；能夠自動調整下標參數的大小順序；不改變原字符串；s2不傳則到最後一個下標str.slice
  • Ruby 字符串(String)
    序號方法 & 描述1str % arg使用格式規範格式化字符串。如果 arg 包含一個以上的替代，那麼 arg 必須是一個數組。如需了解更多格式規範的信息，請查看"內核模塊"下的 sprintf。2str * integer返回一個包含 integer 個 str 的新的字符串。
  • JS中字符串常見幾種的方法
    這篇文章主要介紹了Javascript字符串常用方法詳解的相關資料,在平時工作中經常會用到的，非常不錯，需要的朋友可以參考下。1：charAt()方法charAt()返回字符串中x位置的字符，下標從 0 開始。<!
  • 【C++】搞懂char與wchar_t字符串
    C++裡的字符串類型是比較二的，因為有太多表示方法：char*、string、字符串數組、wchar_t*、wstring，今天就來縷一縷這些玩意