Add Query String To Url Javascript

4 min read Jun 22, 2024

How to Add Query Strings to URLs in JavaScript

Query strings are a fundamental part of web development. They allow you to pass information to a web server through a URL, enabling features like filtering, sorting, and dynamic content loading. In this article, we will explore how to add query strings to URLs using JavaScript.

Understanding Query Strings

A query string is a part of a URL that comes after the question mark (?). It consists of key-value pairs separated by ampersands (&). For example, in the following URL:

https://www.example.com/products?category=electronics&page=2

The query string is ?category=electronics&page=2. It indicates that we want to view products from the "electronics" category and display the second page of results.

Methods for Adding Query Strings

1. Using URLSearchParams

The URLSearchParams object provides a convenient and efficient way to manage query strings. Here's how to use it:

const url = new URL('https://www.example.com/products');
const params = new URLSearchParams();

params.set('category', 'electronics');
params.set('page', 2);

url.search = params.toString();

console.log(url.href); // Output: https://www.example.com/products?category=electronics&page=2

Explanation:

We create a URL object with the base URL.
We create a URLSearchParams object.
We use set() to add key-value pairs to the params object.
We assign the string representation of params to the search property of the URL object.
Finally, we access the updated URL using url.href.

2. Manual String Manipulation

You can also add query strings manually by concatenating strings:

const url = 'https://www.example.com/products';
const queryString = '?category=electronics&page=2';

const newUrl = url + queryString;

console.log(newUrl); // Output: https://www.example.com/products?category=electronics&page=2

While this method is simpler, it can become cumbersome when dealing with multiple parameters.

3. Using Libraries

Various JavaScript libraries provide dedicated functions for URL manipulation, including query string management. One popular library is qs.

import qs from 'qs';

const url = 'https://www.example.com/products';
const queryParams = { category: 'electronics', page: 2 };

const newUrl = url + '?' + qs.stringify(queryParams);

console.log(newUrl); // Output: https://www.example.com/products?category=electronics&page=2

Conclusion

Adding query strings to URLs in JavaScript is a straightforward process. Using URLSearchParams is generally recommended for its flexibility and maintainability. Choose the method that best suits your needs and coding style. Remember to sanitize and validate user input before adding it to query strings to prevent security vulnerabilities.