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);
}

获取单个字段值

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());