The URLSearchParams
interface defines utility methods to work with the query string of a URL.
An object implementing URLSearchParams
can directly be used in a for...of
structure to iterate over key/value pairs in the same order as they appear in the query string, for example the following two lines are equivalent:
for (const [key, value] of mySearchParams) {}
for (const [key, value] of mySearchParams.entries()) {}
const paramsString = 'q=URLUtils.searchParams&topic=api';
let searchParams = new URLSearchParams(paramsString);
for (let p of searchParams) {
console.log(p);
}
searchParams.has('topic') === true;
searchParams.get('topic') === "api";
searchParams.getAll('topic');
searchParams.get('foo') === null;
searchParams.append('topic', 'webdev');
searchParams.toString();
searchParams.set('topic', 'More webdev');
searchParams.toString();
searchParams.delete('topic');
searchParams.toString();
let paramsObj = {foo: 'bar', baz: 'bar'};
let searchParams = new URLSearchParams(paramsObj);
searchParams.toString();
searchParams.has('foo');
searchParams.get('foo');
let paramStr = 'foo=bar&foo=baz';
let searchParams = new URLSearchParams(paramStr);
searchParams.toString();
searchParams.has('foo');
searchParams.get('foo');
The URLSearchParams
constructor does not parse full URLs. However, it will strip an initial leading ?
off of a string, if present.
const paramsString1 = 'http://example.com/search?query=%40';
const searchParams1 = new URLSearchParams(paramsString1);
searchParams1.has('query');
searchParams1.has('http://example.com/search?query');
searchParams1.get('query');
searchParams1.get('http://example.com/search?query');
const paramsString2 = '?query=value';
const searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has('query');
const url = new URL('http://example.com/search?query=%40');
const searchParams3 = new URLSearchParams(url.search);
searchParams3.has('query')
It interprets +
as a space
const base64 = btoa(String.fromCharCode(19, 224, 23, 64, 31, 128));
const searchParams = new URLSearchParams('q=foo&bin=' + base64);
const getBin = searchParams.get('bin');
btoa(atob(getBin));
btoa(String.fromCharCode(16,5,208,4))
getBin.replace(//g, '+');
searchParams.set('bin2', base64)
searchParams.get('bin2');
It doesn't distinguish between a parameter with nothing after the =
and a parameter that doesn't have a =
altogether.
const emptyVal = new URLSearchParams('foo=&bar=baz')
emptyVal.get('foo')
const noEquals = new URLSearchParams('foo&bar=baz')
noEquals.get('foo')
noEquals.toString()