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
留言分享你的想法!
avatar-img
Jeremy Ho的沙龍
19會員
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
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
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