# 06 - Type Ahead
從遠方獲取資料及輸入框內及時顯示關聯字提示效果
# 內容概要
- 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()需要數字型別