Sometimes you find yourself with a String, something like https://ao.gl/convert-url-string-into-a-javascript-object and you want to repeatably access elements of it correctly.
Let’s say that you want to only get the origin of a URL, or maybe the host, or even protocol, how would you do this?
The URL object
Javascript brings you the URL object, which allows you to instantiate it with a string, and optionally a base to work from.
new URL(url, [base])
By using this object, you can achieve all of this very easily.
new URL("https://ao.gl/convert-url-string-into-a-javascript-object")
/*
URL {
hash: ""
host: "ao.gl"
hostname: "ao.gl"
href: "https://ao.gl/convert-url-string-into-a-javascript-object"
origin: "https://ao.gl"
password: ""
pathname: "/convert-url-string-into-a-javascript-object"
port: ""
protocol: "https:"
search: ""
searchParams: URLSearchParams {}
username: ""
}
*/
Notice all the useful object keys we can now easily refer to,