Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
communitycreator
querystring

How to get the query string values in JavaScript

Shubham Singh Kshatriya

Overview

A query string is used to assign a specific value to the parameter. For example:

https://example.com?name=Shubham&age=22

We have two query string parameters in the above example: name and age. There can be multiple parameters too.

To access the query string in JavaScript, we can use the search property of the location object as follows.

// let's assume current URL is: https://example.com?name=Shubham&age=22

window.location.search

// here the window.location.search will be:
// ?name=Shubham&age=22
Syntax to get query string is JavaScript

To work with query string values in JavaScript, we can use the special object named URLSearchParams as follows:

const queryParams = new URLSearchParams(window.location.search)
Syntax of URLSearchParams()

The URLSearchParams object provides a bunch of methods that can be used to interact with the query parameters. Some of them are as follows.

  • has(): This is to check if the query string contains a specific parameter.
  • get(): This is to get the value of a specific parameter.
  • getAll(): This is to get an array of all the values in the query string.
  • forEach(): This is to iterate over the parameters of the query string.
  • keys(): This is to iterate over the keys of the query string.
  • values(): This is to iterate over the values of the query string.

Example

Let's see an example of the URLSearchParams() object in the code snippet below.

// let's assume current URL is: https://example.com?name=Shubham&age=22

const queryParams = new URLSearchParams(window.location.search);

// 1. iterate over the keys
for (const key of queryParams.keys()) {
    console.log(key);
}
/* output 
name
age
*/

// 2. iterate over the values
for (const value of queryParams.values()) {
    console.log(value);
}
/* output 
Shubham
22
*/

// 3. check if the query string contains "contact"
const containsContact = queryParams.has('contact');
console.log(containsContact)
/* output 
false
*/

// 4. get the value of "name"
const name = queryParams.get('name');
console.log(name)
/* output 
Shubham
*/
Implementation of URLSearchParams()

Explanation

  • Line 3: We use the URLSearchParamsobject to get the query string parameters.
  • Lines 6–8: We use the keys() method to iterate over the keys of the query string parameters. The output is mentioned in lines 10-11.
  • Lines 15–17: We use the values() method to iterate over the values of the query string parameters. The output is mentioned in lines 19-20.
  • Lines 24–25: We use the has() method to check if the query string contains contact. The output will be as mentioned in line 27.
  • Lines 31–32: We use the get() method to get the value of the parameter name. The output will be as mentioned in line 34.

RELATED TAGS

javascript
communitycreator
querystring

CONTRIBUTOR

Shubham Singh Kshatriya
RELATED COURSES

View all Courses

Keep Exploring