【JS基礎】字串處理


Posted by hamster on 2021-04-09

前言

字串處理對於不同的程式語言來講,都是相當重要,而在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']

#javascript







Related Posts

基礎 JavaScript

基礎 JavaScript

v-on 各種修飾符

v-on 各種修飾符

資料型別與運算符號

資料型別與運算符號


Comments