06 - Type Ahead

展示 (opens new window)

從遠方獲取資料及輸入框內及時顯示關聯字提示效果

內容概要

• fetch()
• 正規表達示
• toLocaleString()

重點整理

fetch

fetch api (opens new window)提供一個全局的非同步工具

fetch()會回傳一個promise物件

使用.then()作為後續處理的接續方式

範例中使用fetch()作為請求資料的方式

let cities = []
fetch(endpoint)
  .then(res => res.json())
  .then(data => cities.push(...data))

比較

fetch()相比以前的XMLHttpRequest()

可讀性較高

直接呼叫即可

像是日常會用到的發送和接收資料都可以使用

正規表達示

這部分個人比較少使用

大多是遇到時才查表 (opens new window)完成

let regWord = new RegExp(typeWord, 'gi')

g -> 全域搜尋

i -> 無視大小寫

toLocaleString() (opens new window)

範例中有個部分是將數字換成每三位加逗點的形式

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

原本是要使用正規表達示完成

但在這裡改寫一下

function numberWithCommas(x) {
  // return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return parseInt(x).toLocaleString()
}

特別注意

toLocaleString()需要數字型別