URL objects may be less used by the page side. Generally speaking, the page side of the URL operation, most of which is to parse URL parameters, there are more libraries to parse URL parameters, such as QS, or use the browser’s native URLSearchParams

// Assume the current URL is 'https://www.test.com?a=1&b=2'
const b = new URLSearchParams(location.search);
const aParam = b.get('a'); / / 1
const bParam = b.get('b'); / / 2
const entries = [...b];
// [['a', '1'], ['b', '2']]
// If you want to get an object like qs.parse, you can do so
const params = Object.fromEntries(entries);
// {a: 'c', b: '2'}
Copy the code

Analytical parameters

Parses the parameters through URLSearchParams, and the URL object doesn’t look very relevant, but you can look at the object returned after the URL object is instantiated

const a = new URL('https://www.test.com?a=1&b=2');
// hash: ""
// host: "www.test.com"
// hostname: "www.test.com"
// href: "https://www.test.com/?a=1b=2"
// origin: "https://www.test.com"
// password: ""
// pathname: "/"
// port: ""
// protocol: "https:"
// search: "? a=1&b=2"
// searchParams: URLSearchParams {}
// username: ""
// [[Prototype]]: URL
Copy the code

As you can see from the returned object, after the URL is instantiated, the returned property searchParams is actually an instantiated URLSearchParams object. So the operation of obtaining parameters, in fact, there is a method to obtain through the URL object, for example, the above operation can be changed

const a = new URL('https://www.test.com?a=1&b=2');
const entries = [...a.searchParmas];
const params = Object.fromEntries(entries);

// In the browser console, one line
[...new URL(location.href).searchParams];
Copy the code

Modifying URL Parameters

You don’t have to use the URL to fade out the parsed parameter, so you can use URLSearchParams as an object that is quite sufficient, so what else can you do with this URL object? You can actually think of URLSearchParams as providing write operations like set Append, and at the same time, The attributes returned by THE URL object can also be modified. Can we modify a URL or generate a URL by modifying the parameters in the URL? After all, most of the time, the modification of the URL stays in the string operation, which is also very dangerous and easy to report errors

const a = new URL('https://www.test.com?a=1&b=2');
a.searchParams.set('a'.'18');
a.searchParams.set('b'.'14');
a.searchParams.set('c'.'test');
let newURL = a.toString(); // https://www.test.com/?a=18&b=14&c=test
a.hash = 'hasha';
newURL = a.toString(); // 'https://www.test.com/?a=18&b=14&c=test#hasha'
a.host = 'www.init.com';
newURL = a.toString(); // https://www.init.com/?a=18&b=14&c=test#hasha
Copy the code

conclusion

URL object in the operation URL or more convenient, simple encapsulation can lead to a lot of packages, flexible, you can change the URL in turn. This object can be used in the browser, but there may be compatibility issues. If it is desktop, please feel free to use it. If it is mobile, you may need to configure Polyfill. This object is also available in deno