JS 筆記 | String 操作篇

更新於 2024/10/08閱讀時間約 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
18會員
37內容數
這個專題用來存放我在學習網頁開發時的心得及知識。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Jeremy Ho的沙龍 的其他內容
JavaScript Object 基礎操作筆記
JavaScript Array 基本操作筆記
JavaScript event loop / asynchronous.
JavaScript Object 基礎操作筆記
JavaScript Array 基本操作筆記
JavaScript event loop / asynchronous.
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
※ Express串接MySQL相關套件介紹 ★ Express 資料庫設定套件,mysqljs和 mysql2比較 相同點:都是讓 Node.js 能使用 MySQL 的套件 (package)。安裝之後我們就能在 Node.js application 裡使用 SQL 指令,操作 SQL
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
分享這套功能齊全,視覺超級可愛還有響應式變化,教學文件又很容易閱讀的套件 Evo Calendar。 當初在製作 JS side project 時,想找一個與 VCalendar 視覺相近的套件,但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例,也很
Thumbnail
不喜歡 HTML 原生的時間選擇器外型嗎?試試看 flatpickr.js 吧! 以下是使用 flatpickr 做簡單的示例,以及 flatpickr 使用注意事項。
Thumbnail
在談到閉包前,要先談談範圍鏈,在 ES6 以前,變數透過 var 宣告,當時切分變數的最小單位為「函式」,有以下特性需要留意:內層可以取得外層的變數,但外層無法取得內層變數,在「定義」函式時就決定了範圍鏈,而非執行時
誠然,財務數據能夠直觀反映一個企業過去的經營成效,但有時候單純的財務數字也可能產生完全相反的結論,誤導受眾。市場投資而言,還是應該通過分析和理解其背後的原因和趨勢來進行價值判斷。   比如說,JS環球生活可能就面臨這樣的“反差”。   從核心數據上看,2023年上半年,JS環球生活持續經營業
Thumbnail
在前端開發中,因為瀏覽器可以迅速啟動與關閉的特性,再加上 JavaScript 的 Garbage Collection 垃圾回收機制,常常讓前端開發者忽略了 JavaScript 的記憶體管理機制與 Memory Leak 帶來的危險性,有時應用的效能瓶頸可能就因此產生了。
Thumbnail
提升(Hoisting) 指的是在創造環境階段時就把變數準備好,這時值還沒被賦予到變數上。此類型的概念可以使用執行環境的「創造階段」與「執行階段」來理解。
Thumbnail
這兩年都用 Elixir + Phoenix + LiveView 在開發網站,遠離雜亂的 js 生態圈。最近剛好因為有相關需求,所以就大概看一下有哪些 js library 跟 framework,有興趣的就大概摸一下,寫個粗淺的心得
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
※ Express串接MySQL相關套件介紹 ★ Express 資料庫設定套件,mysqljs和 mysql2比較 相同點:都是讓 Node.js 能使用 MySQL 的套件 (package)。安裝之後我們就能在 Node.js application 裡使用 SQL 指令,操作 SQL
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
分享這套功能齊全,視覺超級可愛還有響應式變化,教學文件又很容易閱讀的套件 Evo Calendar。 當初在製作 JS side project 時,想找一個與 VCalendar 視覺相近的套件,但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例,也很
Thumbnail
不喜歡 HTML 原生的時間選擇器外型嗎?試試看 flatpickr.js 吧! 以下是使用 flatpickr 做簡單的示例,以及 flatpickr 使用注意事項。
Thumbnail
在談到閉包前,要先談談範圍鏈,在 ES6 以前,變數透過 var 宣告,當時切分變數的最小單位為「函式」,有以下特性需要留意:內層可以取得外層的變數,但外層無法取得內層變數,在「定義」函式時就決定了範圍鏈,而非執行時
誠然,財務數據能夠直觀反映一個企業過去的經營成效,但有時候單純的財務數字也可能產生完全相反的結論,誤導受眾。市場投資而言,還是應該通過分析和理解其背後的原因和趨勢來進行價值判斷。   比如說,JS環球生活可能就面臨這樣的“反差”。   從核心數據上看,2023年上半年,JS環球生活持續經營業
Thumbnail
在前端開發中,因為瀏覽器可以迅速啟動與關閉的特性,再加上 JavaScript 的 Garbage Collection 垃圾回收機制,常常讓前端開發者忽略了 JavaScript 的記憶體管理機制與 Memory Leak 帶來的危險性,有時應用的效能瓶頸可能就因此產生了。
Thumbnail
提升(Hoisting) 指的是在創造環境階段時就把變數準備好,這時值還沒被賦予到變數上。此類型的概念可以使用執行環境的「創造階段」與「執行階段」來理解。
Thumbnail
這兩年都用 Elixir + Phoenix + LiveView 在開發網站,遠離雜亂的 js 生態圈。最近剛好因為有相關需求,所以就大概看一下有哪些 js library 跟 framework,有興趣的就大概摸一下,寫個粗淺的心得