之前都是上網看影片學Javascript

常常遇到.push(),  .split(),  .join(),  .slice(),  splice()...等等字串或陣列處理後面串一堆函式

直接先崩潰一波，這次到職訓局打算把基礎打好(現在基礎打好一點，上班才不會被電)

以下整理了處理字串的函式

處理字串的函式

.toUpperCase()

英文字全部轉大寫

把英文字母全部轉大寫

    const text = 'Hello World!!'
    text = text.toUpperCase() 
    console.log(text) // HELLO WORLD!!

.toLowerCase()

英文字全部轉小寫

把英文字母全部轉小寫

    const text = 'Hello World!!'
    text = text.toLowerCase() 
    console.log(text) // hello world!!

.parseInt()

轉換成整數

回傳整數

    const text = '1234.678'
    const num = parseInt(text)
    console.log(num) // 1234

若把非數字的字串轉成整數時會回傳NaN

    const text = 'abcd'
    const num = parseInt(text)
    console.log(num) // NaN

.parseFloat()

轉換成浮點數

回傳浮點數

    const text = '1234.678'
    const num = parseFloat(text)
    console.log(num) // 1234.678

跟.parseInt()一樣回傳NaN

    const text = 'abcd'
    const num = parseFloat(text)
    console.log(num) // NaN

.trim()

刪除字串前後多餘的空白

這個函式很常使用，可以用在請使用者輸入input 將字串的頭尾刪除或處理資料時前後有空白的時候

    const text = '  Hello World!!  '
    text = text.trim() 
    console.log(text) // Hello World!!

.includes()

須完全符合字串並回傳boolean值

回傳true，這代表此字串中有 H

    const text = 'Hello World!!'
    text = text.includes('H') 
    console.log(text) // true

回傳false，這代表此字串中沒有 z

    const text = 'Hello World!!'
    text = text.includes('z') 
    console.log(text) // false

.indexOf()

回傳符合的第一個字串位置，若找不到則回傳 -1

裡面有三個 l 但只回傳第一個位置 2

    const text = 'Hello World!!'
    const idx = text.indexOf('l') 
    console.log(idx) // 2

因為字串內沒有 z 所以回傳 -1
這可以來檢驗處理的資料裡面是否有特定的字串

    const text = 'Hello World!!'
    const idx = text.indexOf('z') 
    console.log(idx) // -1

.substr(開始位置,長度)

從開始位置切割特定長度的字串

從位置1取長度3個字串

    const text = 'ABCDEFG'
    const substr = text.substr(1, 3)
    console.log(substr) // BCD

如果不給長度則取後最後一個字串

    const text = 'ABCDEFG'
    const substr = text.substr(1)
    console.log(substr) // BCDEFG

.substring(開始位置,結束位置)

從開始位置切割到結束位置(不包含結束的位置)

從位置1取到位置3但不包含第3個字

    const text = 'ABCDEFG'
    const substring = text.substring(1, 3)
    console.log(substring) // BC

跟.substr() 一樣不加入第二個變數則直接取到最後一個

    const text = 'ABCDEFG'
    const substring = text.substring(1)
    console.log(substring) // BCDEFG

.slice(開始位置,結束位置)

從開始位置切割到結束位置(不包含結束的位置)

可以給負數，若是負數則是從後面數回來

從位置1取到位置5但不包含第5個字(怎麼感覺跟.substring()很像)
改負數看看

    const text = 'ABCDEFG'
    const slice = text.slice(1, 5)
    console.log(slice) // BCDE

從位置1(A)取到位置 -3 (往回數3個EFG)個但不包含第 -3 個字
兩個都改成負數試看看

    const text = 'ABCDEFG'
    const slice = text.slice(1, -3)
    console.log(slice) // BCD

從位置 -4 (D)取到位置 -2 (往回數2個FG)個但不包含第 -2 個字

    const text = 'ABCDEFG'
    const slice = text.slice(-4, -2)
    console.log(slice) // DE

如果變數改成text.slice(-1, -2)會找不到東西

    const text = 'ABCDEFG'
    const slice = text.slice(-1, -2)
    console.log(slice) // ''

.split()

使用特定字元切割文字，並回傳陣列

把逗號切掉並回傳成陣列

    const text = '1,2,3,4,5,6,7,8'
    let split = text.split(',')
    console.log(split) // ['1', '2', '3', '4', '5', '6', '7', '8']

.match(),  .matchAll()

這兩個函式需要接正則表達式(先略過後續有機會介紹正則表達式再把這兩個函式詳細介紹)

字串處理的函式大概先到這邊，想到其他的話再補充