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: [email protected], [email protected]'

// 不帶 g
const matchedEmail = text.match(/\S+@\S+\.\S+/)
console.log(matchedEmail) // '[email protected],'

// 帶 g
const matchedEmail = text.match(/\S+@\S+\.\S+/g)
console.log(matchedEmail) // ​[ '[email protected],', '[email protected]' ]

// 帶 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
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
題目:你的團隊正在開發一個新的高級文本編輯器,你的任務是實現行號功能。請編寫一個函數,該函數接受一個字符串列表作為輸入,並返回每行字符串前面附帶正確的行號。行號從 1 開始計數。格式為 n: 字符串。請注意冒號和空格之間的間隔。
Thumbnail
題目:你的團隊正在開發一個新的高級文本編輯器,你的任務是實現行號功能。請編寫一個函數,該函數接受一個字符串列表作為輸入,並返回每行字符串前面附帶正確的行號。行號從 1 開始計數。格式為 n: 字符串。請注意冒號和空格之間的間隔。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
在C#程式設計中,處理字串操作是一個常見的任務。有時候,我們可能需要去除字串中不需要的空格,特別是在處理使用者輸入、讀取檔案或處理資料庫查詢結果時。在這篇教學中,我們將學習如何使用C#內建的方法來去除字串頭尾的空格。
Thumbnail
在C#程式設計中,處理字串操作是一個常見的任務。有時候,我們可能需要去除字串中不需要的空格,特別是在處理使用者輸入、讀取檔案或處理資料庫查詢結果時。在這篇教學中,我們將學習如何使用C#內建的方法來去除字串頭尾的空格。
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
陣列可以說是最常見的資料結構,LeetCode 裡的題目有過半都和 Array 有關,因此也通常是解題新手的第一站。在第一篇專文,我們就從它的操作方法講起。
Thumbnail
陣列可以說是最常見的資料結構,LeetCode 裡的題目有過半都和 Array 有關,因此也通常是解題新手的第一站。在第一篇專文,我們就從它的操作方法講起。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
JavaScript Array 基本操作筆記
Thumbnail
JavaScript Array 基本操作筆記
Thumbnail
Basic python data structure
Thumbnail
Basic python data structure
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
題目:完成解決方案,當第一個參數(String 型別)以第二個參數結尾時(也是 String 型別)返回 true。
Thumbnail
題目:完成解決方案,當第一個參數(String 型別)以第二個參數結尾時(也是 String 型別)返回 true。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News