【JS基礎】字串處理

前言

字串處理對於不同的程式語言來講，都是相當重要，而在JS中，由於應用於瀏覽器，常常需要處理使用者所傳入的資料，例如：Input欄位，又或者是需要串接後端API的JSON格式資料，故很多情況下都會需要了解在JS中如何處理字串。

接下來就列舉一些常用到的字串方法：

搜尋

搜尋應該是字串最常見的應用，尤其是搭配陣列的map、filter等方法。

IndexOf()

indexOf(str, [,beginIndex])

字串的IndexOf()方法是用來搜尋字串中是否有包含某字串，如果有的話則回傳找到的字串的Index，若無的話則會回傳-1。
第一個參數放要找的字串，第二個參數為Optional，放要從哪一個Index開始尋找。

const str = 'JavaScript is werid!'
console.log(str.indexOf('werid')) // 14

另一個常見的應用如tag autoComplete，需要比對使用者輸入的字串是否要包含在通訊錄內，有的話則顯示比對成功的前幾項，可以利用不符合會回傳-1的特性來篩選資料。

const data = [
  'Jacky',
  'Jason',
  'Tom',
  'Julia',
  'Ken'
]

const input = 'Ja'
console.log(data.filter(item=>item.indexOf(input)>-1))

includes()

includes(str, [beginIndex])

與indexOf()方法相似，同樣是搜尋字串內是否包含某字串，只是回傳的是true/false

const str = 'JavaScript is weird!'
console.log(str.includes('weird')) // true

擷取部分字串

除了比對字串以外，有時候我們還必須取得部分字串來做處理，例如將個人資料打碼等。

slice()

slice(beginIndex [,endIndex])

從字串中依照給予的index，截取部分字串，第一個參數為起始位置，第二個參數是Optional，可指定結束位置。

這裡要注意，擷取的長度會從起始位置 ~ 結束位置-1的地方。

const str = 'JavaScript is weird!'
console.log(str.slice(0,10)) // JavaScript

substring()

substring(beginIndex [,endIndex])

基本上用法與slice()相似，只不過差異處有兩點：

1. beginIndex > endIndex
   當傳入的起始位置大於結束位置時，兩者的處理方式不同。
   substring():會自動交換endIndex與beginIndex。
   slice():會回傳空字串

   const str = 'JavaScript is weird!'
   console.log(str.substring(10,0)) // JavaScript
   console.log(str.slice(10,0)) // 空字串
   

2. beginIndex < || endIndex < 0
   當傳入的起始位置或結束位置的值小於0。
   substring(): 會將其視為0
   slice(): 會從字串後端擷取。

   const str = 'JavaScript is weird!'
   console.log(str.substring(-1,10)) // JavaScript
   console.log(str.slice(0,-10)) // JavaScript
   

substr()

從起始位置擷取特定長度的字串。

substr(beginIndex [,length])

const str = 'JavaScript is weird!'
console.log(str.substr(0,10)) // JavaScript

split()

以特定字串分割，並取得結果陣列

split(str [,limit])

split()也是一常見字串方法，特別是要讓字串可以使用陣列的方法時，使用split('')可快速將字串轉成陣列。
第一個參數傳入要分割字串的依據，第二個參數為Optional，可傳入分割的最大次數。

const str = 'JavaScript is weird!'
console.log(str.split(' ',2)) // ['JavaScript', 'is']