The URLSearchParams interface defines some useful methods for handling query strings for urls.

An instance of URLSearchParams that implements URLSearchParams returns an object that iterator iterates over all key/value pairs, which can be used directly for… Of.

Simple example

let params = new URLSearchParams('? a=1&b=2')
params.get('a'/ / 1Copy the code

You can see that getting the parameters becomes very traversal, requiring no self-splitting or regex processing.

methods

We print an instance of URLSearchParams, and you can see that many methods are inherited

Console. log(new URLSearchParams()) URLSearchParams {} __proto__: URLSearchParams append: ƒ Append () delete: ƒ delete() : ƒ Entries ()forEach: ƒ forƒ Each() get: ƒ () getAllsetƒ () sort: ƒ sort() ƒ URLSearchParams() Symbol(symbol.iterator): ƒ Entries () Symbol(symbol.tostringtag):"URLSearchParams"
		__proto__: Object
Copy the code

Take a look at each one

let params = new URLSearchParams('? a=1&b=2&a=3&c=4')
Copy the code

Append () inserts a specified key/value pair as the new search parameter.

params.append('a'// add a key value pair a=10, even if a already exists, it will not override params.getall ('a') / / /"1"."3"."10"]
Copy the code

Delete () deletes the specified search parameter and its corresponding value from the search parameter list.

params.delete('a'// delete all a params.getall ('a') / / []Copy the code

Entries () returns an object that iterator can traverse through all key/value pairs.

var params = new URLSearchParams('? c=1&b=2&a=3&c=4')
let oIterator = params.entries()
for(var pair of oIterator) {
   console.log(pair[0]+ ', '+ pair[1]); 
}
// c, 1
// b, 2
// a, 3
// c, 4
Copy the code

ForEach () loop method, same as the regular forEach() method

var params = new URLSearchParams('? c=1&b=2&a=3&c=4')
params.forEach((val,key) => console.log(val,key))
// 1 c
// 2 b
// 3 a
// 4 c
Copy the code

Get () retrieves the first value of the specified search parameter, and returns null if not found

params.get('d') // null
Copy the code

GetAll () gets all the values of the specified search parameters and returns an array

let params = new URLSearchParams('? a=1&b=2&a=3&c=4')
params.getAll('a) / / [1, 3]Copy the code

Has () returns Boolean to determine whether the search parameter exists

params.has('e') / /false
Copy the code

Keys () returns iterator this object contains all the key names of key/value pairs

let oIterator1 = params.keys()
for(let item of oIterator1) {
	console.log(oIterator1.next())
}
// {done: false, value: "b"} / / {done: false, value: "c"}
Copy the code

Set () sets a new value for a search parameter, or removes all other values if there were more than one.

params.set('d'.'5')
params.get('d') // 5

params.set('a'.'5')
params.getAll('a') / / [5]Copy the code

Sort () Sorts key names

var params = new URLSearchParams('? c=1&b=2&a=3&c=4')
params.sort()
params.toString() // "a=3&b=2&c=1&c=4"
Copy the code

ToString () returns a string of search parameters that can be used directly on a URL, as shown above

Values () returns iterator this object contains all the values of key/value pairs

var params = new URLSearchParams('? c=1&b=2&a=3&c=4')
var oValues = params.values()
for(var value of oValues) { console.log(value); } // 1/2/3/4Copy the code

compatibility



The project address