iT邦幫忙

第 12 屆 iThome 鐵人賽

0
Modern Web

從技術文章深入學習 JavaScript系列 第 27

Day 27 [其他05] 前端必知必会--操作URL的黑科技

文章選自

作者:小华坚决上王者

連接:https://juejin.im/post/6844903865767165959

來源:知乎

前言

假設今天有一段URL,https://www.rt-mart.com.tw/direct/index.php?action=product_sort&prod_sort_uid=4404,我們該如何獲取它的query?

今天要介紹的一個神奇的東西就是

URLSearchParams

簡單使用

let query = '?action=product_sort&prod_sort_uid=4404'
let paramsString1 = new URLSearchParams(query)

for (const iterator of paramsString1) {
  console.log(iterator);
}

https://ithelp.ithome.com.tw/upload/images/20210201/20124350WdnCdqdcR5.png

獲取單個字段值

console.log(paramsString1.get('action')) // product_sort
console.log(paramsString1.get('sort')) // null

字段是否存在

console.log(paramsString1.has('action')) // true
console.log(paramsString1.has('age')) // false

添加字段

paramsString1.append('sort', 'furniture')
console.log(paramsString1.has('sort')) // true
console.log(paramsString1.get('sort')) // furniture

刪除字段

console.log(paramsString1.has('action')) // true
paramsString1.delete('action')
console.log(paramsString1.has('action')) // false
console.log(paramsString1.get('action')) // null

設置字段

paramsString1.set('prod_sort_uid', '4512 fan expensive')

轉換回字符串

console.log(paramsString1.toString());

https://ithelp.ithome.com.tw/upload/images/20210201/20124350Acor2cZiIJ.png


上一篇
Day 26 [其他04] ES6的Symbol竟然那么强大,面试中的加分点啊
下一篇
Day 28 [整理03] JavaScript類數組
系列文
從技術文章深入學習 JavaScript29

尚未有邦友留言

立即登入留言