前言

今天來講講 String Methods，你知道其實除了length 以外，String 還內建了很多好用的方法！
依照方法使用的情境分為以下幾大類：

• 查找 index： charAt( )、 lastIndexOf( )、 indexOf( )
• 擷取字串： slice( )、 substring( )、 substr( )
• 去除空白： trim( )、 trimEnd( )、 trimStart( )
• 替換字元： replace( )
• 大小寫轉換： toUpperCase( )、 toLowerCase( )
• 查找字元： includes( )、 startsWith( )、 endsWith( )
• Unicode 轉換： charCodeAt( )、 String.fromCharCode( )
• 轉陣列： split( )
• 增加字元： padStart( )、 padEnd( )

1. 找找 index charAt、lastIndexOf、indexOf

字串也有 index 值，可以利用 indexOf(searchValue) 找出字串中第一個出現該字元的位置，或是 lastIndexOf(searchValue) 找最後一次出現的位置。

• 參數放入欲查找的字元，須加上' '
• 回傳數字，代表該字元的 index 值

或是可以用charAt(index) 輸入位置找出對應的字元

• 參數放入欲查找的 index
• 回傳查詢的字元

let cookies = 'Lays, Oreo, Lotus'

cookies.indexOf('o') // 9 回傳第一個 'o' 的 index 值
cookies.lastIndexOf('o') // 13 回傳最後一個 'o' 的 index 值
cookies.charAt(12) // 輸入 12 得到該位置的字元 'L'

2. 擷取字串三兄弟 slice、substring、substr

String 有三個方法可以擷取字串中的部分字元，擷取的內容回傳入一新字串，不會更動原字串內容

slice(start, end)
第一個參數start是選取的起始位置，第二個end是選到該位置前。
可輸入負數，特別的是最後一個字元從-1起算

substring(start, end)
第一個參數start是選取的起始位置，第二個end是選到該位置前。
與slice用法近乎一樣，差在不能輸入負值

substr(start, length)
第一個參數start是選取的起始位置，第二個參數用來指定欲擷取的長度。
可輸入負數

let cookies = 'Lays, Oreo, Lotus'

//slice
cookies.slice(6,10) // 'Oreo'
cookies.slice(-11,-7) // 'Oreo' 可輸入負值，將從尾巴起算

//substring用法與slice差不多
cookies.substring(6,10) // 'Oreo' 

//substr 第二個參數表示選取的長度
cookies.substr(0,4) // 從 0 開始取 4 個字元 'Lays'
cookies.substr(-5,3) // 可輸入負數, 從倒數 5 位取 3 個字元'Lot' 

3. 空白消掉你 trim、trimStart、trimEnd

撥蝦子可以選擇整尾去頭去尾或是單去頭單去尾，字串也可以！

trim() 去頭去尾 (中間空白無法消)
trimStart() 去頭
trimEnd() 去尾

• 回傳新字串
• 不需放參數

let cookies = '  Lays, Oreo, Lotus  '

cookies.trim() // 消頭尾空白 'Lays, Oreo, Lotus' 
cookies.trimStart() // 消開頭空白 'Lays, Oreo, Lotus  '
cookies.trimEnd() // 消結尾空白 '  Lays, Oreo, Lotus'

4. 我要取代你 replace

replace 用來替換掉字串中的特定字元，第一個參數為被替換的字元，第二個參數為欲替換的字元，參數須加上' '

replace(substring, newstring)

• 不會修改原字串
• 須區分大小寫
• 回傳新字串

let cookies = 'Lays, Oreo, Lotus'
cookies.replace('Oreo', 'Twix') // 將原字串內的 'Oreo' 替換為 'Twix'

5. 大小寫輕鬆換 toLowerCase、toUpperCase

簡單快速的將英文字母一次修改為大寫或小寫，透過 toLowerCase() 全部轉成小寫字母 及 toUpperCase() 全部轉成大寫字母

• 不須放入參數
• 回傳一個新字串

let cookies = 'Lays, Oreo, Lotus'
cookies.toLowerCase(); // 'lays, oreo, lotus'
cookies.toUpperCase(); // 'LAYS, OREO, LOTUS'

6. 是否包含 includes、startsWith、endsWith

若要檢查字串中是否涵蓋某字元，可以用 includes 從整個字串內查找
或是縮小範圍，只確認是否以某字元作為開頭或結尾，則用 startsWith 和 endsWtih

startsWith(searchString, position) 字串開頭
endsWith(searchString, position ) 字串結尾
includes(searchString, position) 字串整體中

• 第二個參數 position 是 optional
• 皆回傳 boolean 值
• 須區分大小寫

let cookies = 'Lays, Oreo, Lotus'
cookies.includes('o') // true

cookies.startsWith('L') // true
cookies.startsWith('O') // false 'O'只是中間的字元, 不作為開頭所以為false
cookies.endsWith('S') // false 'S'應為小寫

7. Unicode轉換 charCodeAt、String.fromCharCode

透過charCodeAt(index) 可以指定將字串中某一位置字元轉成 Unicode 編碼，括號內放入的數字代表位置，也可以不放數字，預設是 0

• 回傳 Unicode 數字
• 參數放 index，若超過字串 長度 -1 的數字則回傳 NaN

let cookies = 'Lays, Oreo, Lotus'

cookies.charCodeAt(0) //將字串中index 0 的'L'轉為 Unicode 編碼 得到 76
cookies.charCodeAt(3) //將字串中index 3 的'y'轉為 Unicode 編碼 得到 121

反向要將 Unicode 轉回字元則是透過String.fromCharCode(Unicode number)，括號內放入的是 Unicode 數字 對照表

• 回傳 Unicode 對應的字元
• 以 String 開頭，參數放 Unicode 號碼

String.fromCharCode(121) // y
String.fromCharCode(65) // A

8. 無痛轉陣列 split

透過split(seperator)方法可以將字串型態轉為陣列，在參數中指定分隔符號將字串切割再轉型，轉成陣列後依然用"" 包裹每個切分單位

• 回傳新陣列
• 參數需用值須加上''
• 無放入參數則預設不分割

let cookies = 'Lays, Oreo, Lotus'
cookies.split(',') // 依照, 做切割單位 ['Lays', 'Oreo', 'Lotus']
cookies.split('') // 字串中每個字元都切割出來 ["L", "a", "y", "s", ",", " ", "O", "r", "e", "o", ",", " ", "L", "o", "t", "u", "s"]
cookies.split() // 沒有設定分隔符號會全部不切分轉陣列['Lays, Oreo, Lotus']

9. 加頭加尾不加價 padStart、padEnd

透過這兩個方法來增加字串中的字元，可以選擇加在開頭或結尾

padStart(targetLength, padString)
padEnd(targetLength, padString)

• 兩個參數，第一個參數表示欲增加到的長度，第二個參數為增加的字元
• 沒有放入第二個參數，預設為加入空白字元
• 回傳一個新字串

let cookie = 'Oreo'
cookie.padStart(12, 'Love') // 'LoveLoveOreo'
cookie.padEnd(12,'Love')//'OreoLoveLove'

//若沒有寫第二個參數, 則以空白填滿長度
cookie.padStart(8) // '    Oreo'
cookie.padEnd(8) // 'Oreo    '

以上就是今天的 String Methods 全餐~~
總共 19 種應該吃的飽飽飽 嗝