JS 筆記 | String 操作篇

更新 發佈閱讀 6 分鐘

這是三部曲的最後一篇。不得不說,Leetcode 或一些公司的面試技術考都是在這三部曲上加上各種演算法,嚴格一點的測試還會加上時間複雜度,一不小心一題可能就花了大半的考試時間。

今天的主角是字串 (string)。字串跟陣列雖然是不同型別,但很多時候可以視字串是 "文字的陣列",因為它有些情況是可以使用陣列的方法的。同樣,我們先來創個字串:

let intro = 'My name is Jeremy'



那些跟陣列一樣的處理方法

這裡列出字串可以使用的陣列方法,詳細使用可以回陣列操作篇看。

  1. slice:裁切字串。
  2. concat:合併字串。
  3. indexOf:索引位置查詢。



分割成陣列

  1. split,很常用到的方法,跟陣列轉字串的join方法類似,都需要傳入一個分隔符號。split還可以帶入第二個參數,就是要切割的長度。現在我們來切割字串成陣列。
// 不帶分隔符號​
const arrIntro = intro.split()
console.log(arrIntro) // [ 'My name is Jeremy' ]

// 不帶空格
const arrIntro = intro.split('')
console.log(arrIntro)
// ['M', 'y', ' ', 'n', 'a', m', 'e', ' ', 'i', 's', ' ', 'J', 'e', 'r', 'e', 'm', 'y']

// 帶空格
const arrIntro = intro.split(' ')
console.log(arrIntro) // [ 'My', 'name', 'is', 'Jeremy' ]

// 不帶空格,帶 length 參數
const arrIntro = intro.split('', 2)
console.log(arrIntro) // [ 'M', 'y' ]​



搜尋與篩選

  1. charAt,尋找索引位置上的字符。
console.log(intro.charAt(0)) // M
  1. substring,可以看做是charAt複數版,可以返回一段較長的字串。
console.log(intro.substring(0, 7)) // My name
  1. substr,跟substring很像,但第二個參數帶入的是要返回的長度。
console.log(intro.substr(0, 7)) // My name
  1. match,返回字串中有相符的內容。因為只會回傳第一個相符的內容,所以可以在第二個參數代入 g 來回傳所有相符結果,也可以代入i來忽略大小寫差異。
    這裡我們來用個複雜一點的字串。
const text = 'Emails: john@example.com, jane@example.com'

// 不帶 g
const matchedEmail = text.match(/\S+@\S+\.\S+/)
console.log(matchedEmail) // 'john@example.com,'

// 帶 g
const matchedEmail = text.match(/\S+@\S+\.\S+/g)
console.log(matchedEmail) // ​[ 'john@example.com,', 'jane@example.com' ]

// 帶 i 和 g
const matchedEmail = text.match(/e/ig)
console.log(matchedEmail) // [ 'E', 'e', 'e', 'e', 'e', 'e' ]
  1. search,跟match類似,不同的是會回傳找到的字串位置。
const index = intro.search(/name/)
console.log(index) // 3
  1. startsWithendsWith,用來判斷字串是否帶有特定前後綴。
console.log(intro.startsWith('My')) //true
console.log(intro.endsWith('Jeremy')) // true



置換

  1. replace,很顧名思義,就是換掉內容。
const newIntro = intro.replace('Jeremy', 'Joanna')
console.log(newIntro) // My name is Joanna



空白裁切

  1. trim,這個方法在做網頁搜尋功能時會用到,目的是刪除字串首尾的空白。我們先為一開始創的字串前後加個空格,然後開始操作。
let intro = ' My name is Jeremy '
const newIntro = intro.trim()
console.log(newIntro) // 'My name is Jeremy'



切換大小寫

  1. toUpperCasetoLowerCase,會把整個字串都變成大寫或小寫。
const newIntro = intro.toUpperCase()
console.log(newIntro) // MY NAME IS JEREMY

const newIntro = intro.toLowerCase()
console.log(newIntro) // my name is jeremy



參考資料

  1. JavaScript String 字串處理函數
留言
avatar-img
Jeremy Ho的沙龍
20會員
37內容數
這個專題用來存放我在學習網頁開發時的心得及知識。
Jeremy Ho的沙龍的其他內容
2023/11/17
2023/11/17
2023/11/16
TypeScript 基礎語法
Thumbnail
2023/11/16
TypeScript 基礎語法
Thumbnail
2023/11/13
JavaScript callback, promise, async-await
Thumbnail
2023/11/13
JavaScript callback, promise, async-await
Thumbnail
看更多
你可能也想看
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
創作不只是個人戰,在 vocus ,也可以是一場集體冒險、組隊升級。最具代表性的創作者社群「vocus 野格團」,現在有了更強大的新夥伴加入!除了大家熟悉的「官方主題沙龍」,這次我們徵召了 8 位領域各異的「個人主題專家」,將再度嘗試創作的各種可能,和格友們激發出更多未知的火花。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
vocus 最具指標性的創作者社群──「野格團」, 2026 年春季,這支充滿專業、熱情的團隊再次擴編,迎來了 8 位實力堅強的「個人主題專家」新成員 💫💫💫 從投資理財、自我成長、閱讀書評到電影戲劇,他們各自帶著獨特的「創作超能力」準備在格友大廳與大家見面。
Thumbnail
Basic python data structure
Thumbnail
Basic python data structure
Thumbnail
陣列可以說是最常見的資料結構,LeetCode 裡的題目有過半都和 Array 有關,因此也通常是解題新手的第一站。在第一篇專文,我們就從它的操作方法講起。
Thumbnail
陣列可以說是最常見的資料結構,LeetCode 裡的題目有過半都和 Array 有關,因此也通常是解題新手的第一站。在第一篇專文,我們就從它的操作方法講起。
Thumbnail
JavaScript Array 基本操作筆記
Thumbnail
JavaScript Array 基本操作筆記
Thumbnail
題目會給定我們一個串列,和一個n值,要求我們刪除尾巴數來的第n個節點。 例如 1->2->3->4->5 和 給定n值=2,要求我們刪除尾巴數來的第2個節點。 尾巴數來的第2個節點是4,刪除之後,更新連結,輸出答案如下 1->2->3->5
Thumbnail
題目會給定我們一個串列,和一個n值,要求我們刪除尾巴數來的第n個節點。 例如 1->2->3->4->5 和 給定n值=2,要求我們刪除尾巴數來的第2個節點。 尾巴數來的第2個節點是4,刪除之後,更新連結,輸出答案如下 1->2->3->5
Thumbnail
題目:完成解決方案,當第一個參數(String 型別)以第二個參數結尾時(也是 String 型別)返回 true。
Thumbnail
題目:完成解決方案,當第一個參數(String 型別)以第二個參數結尾時(也是 String 型別)返回 true。
Thumbnail
題目:你的團隊正在開發一個新的高級文本編輯器,你的任務是實現行號功能。請編寫一個函數,該函數接受一個字符串列表作為輸入,並返回每行字符串前面附帶正確的行號。行號從 1 開始計數。格式為 n: 字符串。請注意冒號和空格之間的間隔。
Thumbnail
題目:你的團隊正在開發一個新的高級文本編輯器,你的任務是實現行號功能。請編寫一個函數,該函數接受一個字符串列表作為輸入,並返回每行字符串前面附帶正確的行號。行號從 1 開始計數。格式為 n: 字符串。請注意冒號和空格之間的間隔。
Thumbnail
在C#程式設計中,處理字串操作是一個常見的任務。有時候,我們可能需要去除字串中不需要的空格,特別是在處理使用者輸入、讀取檔案或處理資料庫查詢結果時。在這篇教學中,我們將學習如何使用C#內建的方法來去除字串頭尾的空格。
Thumbnail
在C#程式設計中,處理字串操作是一個常見的任務。有時候,我們可能需要去除字串中不需要的空格,特別是在處理使用者輸入、讀取檔案或處理資料庫查詢結果時。在這篇教學中,我們將學習如何使用C#內建的方法來去除字串頭尾的空格。
Thumbnail
陣列運用、擷取字串   對於陣列裡的內容值除了把資料存進去外,若想要知道陣列維度、陣列大小、複製陣列的值到另一個陣列中、清除陣列的值等等的相關處理,甚至比較常用到的可能還需要做資料排列、查找資料等等,此時C#有一些屬性方法可以幫助到我們,不用寫複雜的迴圈,來看一看有哪些吧~
Thumbnail
陣列運用、擷取字串   對於陣列裡的內容值除了把資料存進去外,若想要知道陣列維度、陣列大小、複製陣列的值到另一個陣列中、清除陣列的值等等的相關處理,甚至比較常用到的可能還需要做資料排列、查找資料等等,此時C#有一些屬性方法可以幫助到我們,不用寫複雜的迴圈,來看一看有哪些吧~
Thumbnail
在使用陣列時一開始也是需要做宣告的,那麼這次說的內容是一維陣列,因此一維陣列宣告內容包括:資料型態、陣列名稱、以及陣列的大小。那麼我們就來看一下它的語法是如何的: 說明:等號左邊是做宣告,而右邊是做建立的動作。 一、初始值設定 那麼初始值要怎麼設定呢?這邊有幾種方法,用例子帶大家來看一看: 1.有給
Thumbnail
在使用陣列時一開始也是需要做宣告的,那麼這次說的內容是一維陣列,因此一維陣列宣告內容包括:資料型態、陣列名稱、以及陣列的大小。那麼我們就來看一下它的語法是如何的: 說明:等號左邊是做宣告,而右邊是做建立的動作。 一、初始值設定 那麼初始值要怎麼設定呢?這邊有幾種方法,用例子帶大家來看一看: 1.有給
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News