JavaScript URL Objects

This chapter examines URL objects in JavaScript. The JavaScript built-in URL class provides a flexible interface that allows both to create and parse URLs .

No networking methods requiring a URL object exist now. Strings are rather convenient for that. So, technically, you needn’t always use URLs, but in some instances, they are handy. Let’s dive into some details.

How to Generate a URLThe basic syntax used for generating a URL is the following:

The basic syntax used for generating a URL is the following:

new URL(url, [base])

Here is how an example of a URL looks like:

let url = new URL('https://w3docs/admin');

Now, let’s check out two URLs that are equivalent:

Javascript check out two URLs that are equivalent
let url1 = new URL(''); let url2 = new URL('/admin', ''); console.log(url1); // console.log(url2); //

A new URL can be generated on the basis of the existing ones:

Javascript generated a new URL
let url = new URL(''); let newUrl = new URL('tester', url); console.log(newUrl); //

It is possible to access the URL components at once. Hence, it allows parsing the URL like this:

Javascript access the URL component
let url = new URL(''); console.log(url.protocol); // https: console.log(; // w3docs console.log(url.pathname); // /url

Please, take into consideration another essential thing: passing URL objects to networking methods can be used instead of a string. A URL object may be applied in fetch or XMLHttpRequest almost anywhere a URL -string is scheduled.

About The Search Params

Often it’s necessary to generate a URL with specific search params (for instance, They may be supplied inside a URL string like here:

new URL('')

But, in case the parameters include spaces, it is required to encode them. A URL property such as url.searchParams is used to meet that aim. An example of parameters containing punctuation marks and spaces is shown below:

Javascript supplied inside a URL string
let url = new URL(''); url.searchParams.set('s', 'find book!'); //added parameter with space and! console.log(url); // url.searchParams.set('tbs', 'qdr:x'); // colon option added: // parameters are automatically encoded console.log(url); // // iterate over the search parameters (decoded) for (let [name, value] of url.searchParams) { console.log(`${name}=${value}`); // s=find book!, then tbs=qdr:x }

About the Encoding of URLs

When certain characters are not allowed in URLs, they should be encoded. That process is automatically handled by URL objects. What you should do is to provide all the encoded parameters, converting the URL to string as follows:

Javascript encode URL parameters
// cyrillic characters are used in this example let url = new URL('Тест'); url.searchParams.set('key', 'ь'); console.log(url); //

You can notice that Тест inside the URL path and ъ inside the parameter are encoded.

How to Encode Strings

Before the URL objects came out, strings were used for URLs. In modern programming, URL objects are handier. However, you can still use strings. The main asset of strings is that they make the code shorter. But, note that for using strings, it is necessary to encode and decode special characters manually.

Several built-in functions can be used for that. Among them are encodeURI, decodeURI, encodeURIComponent, and decodeURIComponent. To understand the difference between encodeURI and encodeURIComponent, let’s consider an example:

In the example above, it is not allowed to use in the URL characters like #, =,&, ?, :. So, the characters above should be encoded for not breaking the formatting. The encodeURI is used for encoding the characters that are completely prohibited in the URL. The encodeURIComponent function is used for encoding same characters, as well as #, =,&, ?, :, ,, +, ;, and @. EncodeURI can be used for the whole code like this:

Javascript encodeURI
// using cyrillic characters in url path let url = encodeURI('здравствуйте'); console.log(url); //

But, for parameters, encodeURIComponent should be used instead:

Javascript encodeURIComponent
let book = encodeURIComponent('Html&Css'); let url = `${book}`; console.log(url); //

Practice Your Knowledge

What are the properties of a URL object in JavaScript?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?