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 字串處理函數
18會員
37內容數
這個專題用來存放我在學習網頁開發時的心得及知識。
留言0
查看全部
發表第一個留言支持創作者!
Jeremy Ho的沙龍 的其他內容
JavaScript Object 基礎操作筆記
JavaScript Array 基本操作筆記
JavaScript event loop / asynchronous.
JavaScript Object 基礎操作筆記
JavaScript Array 基本操作筆記
JavaScript event loop / asynchronous.
你可能也想看
Thumbnail
八十-二十法則提到,在多數生活的現象中,約80%的效果是來自於20%的原因,除了經濟學、學習理論外,這個法則同樣也可以應用在生活中的幸福感上。 我們需要認知到擁有的越多不一定會越快樂,反而有可能會因為無法專注在少數事物上而產生空虛、迷茫的感覺。「極簡」精神最重要的一點在於放下對於「多」的執著,將有
Thumbnail
1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後,雖稍微低於預期,但指數仍向上噴出,在美股開盤後於21500形成一個爆量假突破後急轉直下,就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後,週二或週三開始有無買單進場支撐,在沒有明確的反轉訊號形成前,小夥伴盡量不要貿然抄底,或是追空
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
在談到閉包前,要先談談範圍鏈,在 ES6 以前,變數透過 var 宣告,當時切分變數的最小單位為「函式」,有以下特性需要留意:內層可以取得外層的變數,但外層無法取得內層變數,在「定義」函式時就決定了範圍鏈,而非執行時
誠然,財務數據能夠直觀反映一個企業過去的經營成效,但有時候單純的財務數字也可能產生完全相反的結論,誤導受眾。市場投資而言,還是應該通過分析和理解其背後的原因和趨勢來進行價值判斷。   比如說,JS環球生活可能就面臨這樣的“反差”。   從核心數據上看,2023年上半年,JS環球生活持續經營業
Thumbnail
在前端開發中,因為瀏覽器可以迅速啟動與關閉的特性,再加上 JavaScript 的 Garbage Collection 垃圾回收機制,常常讓前端開發者忽略了 JavaScript 的記憶體管理機制與 Memory Leak 帶來的危險性,有時應用的效能瓶頸可能就因此產生了。
Thumbnail
提升(Hoisting) 指的是在創造環境階段時就把變數準備好,這時值還沒被賦予到變數上。此類型的概念可以使用執行環境的「創造階段」與「執行階段」來理解。
Thumbnail
這兩年都用 Elixir + Phoenix + LiveView 在開發網站,遠離雜亂的 js 生態圈。最近剛好因為有相關需求,所以就大概看一下有哪些 js library 跟 framework,有興趣的就大概摸一下,寫個粗淺的心得
選1)當初為什麼報名這堂課? 目前是資訊員在職即將滿七年了, 從當初入職完全不熟悉工作內容, 網管、設備維護要做些什麼, 不會的就東學西學, 學著跟廠商怎麼處理, 也這樣堅持過來。 我雖然是讀資訊領域相關, 但不敢說自己是工程師(所以我自稱為資訊員, 覺得自己都是會點皮毛談不上專業),
過去我嘗試學習 JS 蠻多次,常常無疾而終,因為窮所以都是看網路文章、線上課程為主,會遇到的問題有: 在職學習的惰性,只要開始加班我就忘記學習 :D 寫得太少又急著看完課程,看完後就忘光了 :DD 便宜的 Udemy 課程大都是英文,聽不懂的語言+聽不懂的邏輯,放空 :DDD 六角直播班帶給我最大的
Thumbnail
參加六角學院的 JS 工程師養成直播班,課程由洧杰老師擔任授課老師,總共有九週的線上直播課程以及課前知識補充的學習影片,與大家分享此次直播班的簡單心得
Thumbnail
八十-二十法則提到,在多數生活的現象中,約80%的效果是來自於20%的原因,除了經濟學、學習理論外,這個法則同樣也可以應用在生活中的幸福感上。 我們需要認知到擁有的越多不一定會越快樂,反而有可能會因為無法專注在少數事物上而產生空虛、迷茫的感覺。「極簡」精神最重要的一點在於放下對於「多」的執著,將有
Thumbnail
1.加權指數與櫃買指數 週五的加權指數在非農就業數據開出來後,雖稍微低於預期,但指數仍向上噴出,在美股開盤後於21500形成一個爆量假突破後急轉直下,就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後,週二或週三開始有無買單進場支撐,在沒有明確的反轉訊號形成前,小夥伴盡量不要貿然抄底,或是追空
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
Thumbnail
在談到閉包前,要先談談範圍鏈,在 ES6 以前,變數透過 var 宣告,當時切分變數的最小單位為「函式」,有以下特性需要留意:內層可以取得外層的變數,但外層無法取得內層變數,在「定義」函式時就決定了範圍鏈,而非執行時
誠然,財務數據能夠直觀反映一個企業過去的經營成效,但有時候單純的財務數字也可能產生完全相反的結論,誤導受眾。市場投資而言,還是應該通過分析和理解其背後的原因和趨勢來進行價值判斷。   比如說,JS環球生活可能就面臨這樣的“反差”。   從核心數據上看,2023年上半年,JS環球生活持續經營業
Thumbnail
在前端開發中,因為瀏覽器可以迅速啟動與關閉的特性,再加上 JavaScript 的 Garbage Collection 垃圾回收機制,常常讓前端開發者忽略了 JavaScript 的記憶體管理機制與 Memory Leak 帶來的危險性,有時應用的效能瓶頸可能就因此產生了。
Thumbnail
提升(Hoisting) 指的是在創造環境階段時就把變數準備好,這時值還沒被賦予到變數上。此類型的概念可以使用執行環境的「創造階段」與「執行階段」來理解。
Thumbnail
這兩年都用 Elixir + Phoenix + LiveView 在開發網站,遠離雜亂的 js 生態圈。最近剛好因為有相關需求,所以就大概看一下有哪些 js library 跟 framework,有興趣的就大概摸一下,寫個粗淺的心得
選1)當初為什麼報名這堂課? 目前是資訊員在職即將滿七年了, 從當初入職完全不熟悉工作內容, 網管、設備維護要做些什麼, 不會的就東學西學, 學著跟廠商怎麼處理, 也這樣堅持過來。 我雖然是讀資訊領域相關, 但不敢說自己是工程師(所以我自稱為資訊員, 覺得自己都是會點皮毛談不上專業),
過去我嘗試學習 JS 蠻多次,常常無疾而終,因為窮所以都是看網路文章、線上課程為主,會遇到的問題有: 在職學習的惰性,只要開始加班我就忘記學習 :D 寫得太少又急著看完課程,看完後就忘光了 :DD 便宜的 Udemy 課程大都是英文,聽不懂的語言+聽不懂的邏輯,放空 :DDD 六角直播班帶給我最大的
Thumbnail
參加六角學院的 JS 工程師養成直播班,課程由洧杰老師擔任授課老師,總共有九週的線上直播課程以及課前知識補充的學習影片,與大家分享此次直播班的簡單心得