URLSearchParams（鲜为人知处理URL地址的技能）

最近学习中无意发现url新处理方式，看到之后十分感兴趣就整理了一下。

URLSearchParams

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。参照

URLSearchParams() 构造器创建并返回一个新的URLSearchParams 对象。 开头的'?' 字符会被忽略。

方法

append(name,value)

@function 插入一个指定的键/值对作为新的搜索参数。
@param name 需要插入搜索参数的键名
@param value 需要插入参数的值

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.append('c',3);
console.log(searchParams.toString())

运行结果

// a=1&b=2&c=3

delete(name)

@function 删除指定名称的所有搜索参数。
@param name 需要删除的键值名称

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.delete('b');
console.log(searchParams.toString())

运行结果

// a=1

entries()

@function 返回一个iterator可以遍历所有键/值对的对象。
@return {iterator}

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const paramArr = searchParams.entries();
for(const item of paramArr){
    console.log(item)
}

运行结果

// ['a', '1']
// ['b', '2']

get(name)

@function 获取指定搜索参数的第一个值。
@param name 将要返回的参数的键名。
@return 返回一个 USVString ；如果没找到，返回 null.

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('a'))

运行结果

// 1

getAll(name)

@function 获取指定搜索参数的所有值，返回是一个数组。
@param name 将要返回的参数的键名。
@return 一个USVString数组。

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.getAll('a'))

运行结果

// [1]

has(name)

@function 判断是否存在此搜索参数。
@param name 查找的参数的键名。
@return { Boolean }

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.has('a'))

运行结果

// true

keys()

@function 返回iterator 此对象包含了键/值对的所有键名。
@return 返回一个iterator.

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const keys = searchParams.keys()
for(let key of keys){
    console.log(key)
}

运行结果

// a
// b

set(name, value)

@function 用于设置和搜索参数相关联的值。如果设置前已经存在匹配的值，该方法会删除多余的，如果将要设置的值不存在，则创建它
@param name 将要设置的参数的健值名。
@param value 所要设置的参数值。

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.set('a', 11);
console.log(searchParams.toString());
searchParams.set('w', 222);
console.log(searchParams.toString());
     

运行结果

// a=11&b=2
// a=11&b=2&w=222

sort(name, value)

@function 对包含在此对象中的所有键/值对进行排序，并返回undefined。排序顺序是根据键的Unicode代码点。该方法使用稳定的排序算法 (即，将保留具有相等键的键/值对之间的相对顺序)。

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
searchParams.sort();
console.log(searchParams.toString());

运行结果

// a=1&b=2

toString()

@function 返回适用在URL中的查询字符串。
@return { String }

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
console.log(searchParams.toString());

运行结果

// a=1&b=2

values()

@function 返回一个iterator，该遍历器允许遍历对象中包含的所有值。这些值都是USVString对象。
@return iterator

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const values = searchParams.values()
for(var value of values) {
     console.log(value);
}

运行结果

// 1
// 2 

实战

我们获取url上的参数之前会这么写

function getParams(url) {
  const res = {}
  if (url.includes('?')) {
    const str = url.split('?')[1]
    const arr = str.split('&')
    arr.forEach(item => {
      const key = item.split('=')[0]
      const val = item.split('=')[1]
      res[key] = decodeURIComponent(val) // 解码
    })
  }
  return res
}


const user = getParams('http://www.programmer.com?a=1&b=2')
console.log(user) 
// { a: 1, b: 1 }

如今学会了，只需两行代码搞定 加班那不可能

const url = new URL(`http://www.programmer.com?a=1&b=2`);
const searchParams = new URLSearchParams(url.search);
const params = Object.fromEntries(searchParams.entries());
console.log(params)
// { a: 1, b: 1 }