How to Convert URL to String in JavaScript

To convert a URL to String in JavaScript, use the toString() or encodeURI() methods. The toString() is a built-in JavaScript method that returns a URL as a string. The toString() method does not change the original URL.

Sometimes, we need to execute operations based on the URL. So we need to convert the URL to a String, and if our URL has a query, then we also store that query url to some variable or object to operate on that string.

Using toSting() method

The toString() is a built-in method that converts our whole URL to a string. The URL.toString() is a stringifier method that returns a USVString containing the whole URL. Even the query string has been converted to a string. So we can’t store query string key values in objects or variables. To store the query string, we need to convert them into objects.

Syntax

url.toString();

Return Type

String – It will return a string.

Example

const url = new URL("https://google.com");
console.log(typeof (url));
let urlString = url.toString();
console.log(urlString);
console.log(typeof (urlString));

Output

object
https://google.com/
string

In the above example, we create one url instance, then convert them into a string using the toString() method. To check the data type in JavaScript, use the typeof() function.

Use encodeURI() method

The encodeURI() is a built-in JavaScript function that encodes a URI by replacing each instance of certain characters with one, two, three, or four escape sequences representing the UTF-8 encoding of the character. The encodeURI() method replaces each character with an escape sequence representing a UTF-8 character.

Syntax

encodeURI(URI);

Parameters

URI – The encodeURI() function takes a UR in this method.

Return value

String: It will return a string value based on URI.

Example

const url = new URL("https://google.com");
console.log(typeof (url));
let urlString = encodeURI(url);
console.log(urlString);
console.log(typeof (urlString));

Output

object
https://google.com/
string

Let’s take an example of URI with query strings.

const url = new URL("http://google.com/person?name=tony&age=31&proffession=coder");
console.log(typeof (url));
let urlString = encodeURI(url);
console.log(urlString);
console.log(typeof (urlString));

Output

object
http://google.com/person?name=tony&age=31&proffession=coder
string

Most URL-based operations are performed on the server-side. In the below example, we see how we get a query as an object from the URL in Node.js.

Convert URL query to Object in JavaScript

To convert a URL Query to Object in JavaScript, use the querystring.parse() method. The querystring.parse() method is used to parse a URL query string into an object that contains the key and pair values of the query URL.

import url from "url";
import querystring from "querystring";

let ourUrl = "http://google.com/person?name=tony&age=31&profession=coder";

let parsedUrl = url.parse(ourUrl);
let queryObj = querystring.parse(parsedUrl.query);

console.log(queryObj);

// Iterating queryObj
for (const [key, value] of Object.entries(queryObj)) {
   console.log(key, value);
}

Output

[Object: null prototype] {
   name: 'tony',
   age: '31',
   profession: 'coder'
}
name tony
age 31
profession coder

In the above example, first, we parsed our url using the parse() method. Then we convert them into objects using the queryString.parse() method. After that, we iterate our queryObj using a for loop.

That’s it for this tutorial.

See also

How to Convert Date to String in JavaScript

How to Convert Object to String in JavaScript

How to Convert JavaScript Array to String

Leave a Comment