Skip to main content

How to Check if a URL Has Query Parameters in JavaScript

When working with URLs, you often need to know if they contain a query string (the part after the ?). This can involve two distinct questions:

  1. Does this URL have any query string at all?
  2. Does this URL have a specific query parameter (e.g., an id)?

This guide will teach you the modern, standard methods for answering both of these questions. You will learn how to perform a simple string check for the first case and how to use the powerful URLSearchParams API for the second.

Goal 1: Check for the Presence of Any Query String​

If you only need to know if a URL has a query string, the simplest and most direct method is to check if the URL string includes a question mark (?).

The logic: a URL's query string always begins with a ?. Therefore, if the ? character is present, the URL has query parameters. The String.prototype.includes() method is perfect for this.

For example, we want a quick way to see if a URL has a query string attached.

// Problem: Do these URLs have query strings?
const url1 = 'https://example.com?page=10&limit=5';
const url2 = 'https://example.com';

Solution:

function hasQueryString(url) {
  return url.includes('?');
}

// Example Usage:
const url1 = 'https://example.com?page=10&limit=5';
const url2 = 'https://example.com';

console.log(hasQueryString(url1)); // Output: true
console.log(hasQueryString(url2)); // Output: false
note

This method is fast and highly readable for a simple boolean check.

More often, you need to know if a URL contains a specific parameter. For this, the modern and most robust tool is the URL and URLSearchParams API. This is the recommended best practice for any kind of query string parsing.

The logic:

  1. Create a new URL() object from your URL string.
  2. Access its searchParams property, which is a URLSearchParams object.
  3. Use the .has() method on the searchParams object to check for the existence of a specific parameter by name.

For example, we want to know if the current page's URL contains a page parameter.

The solution is the following:

function hasQueryParam(url, paramName) {
  const urlObj = new URL(url);
  return urlObj.searchParams.has(paramName);
}

// Example Usage:
const myUrl = 'https://example.com?page=10&limit=5';

console.log(hasQueryParam(myUrl, 'page'));  // Output: true
console.log(hasQueryParam(myUrl, 'sort'));  // Output: false
note

This method is superior because it correctly parses the URL and isn't fooled by a ? appearing elsewhere in the string (e.g., in the hash).

How to Get the Parameter's Value with searchParams object​

The searchParams object can also be used to get the value of a parameter with the .get() method.

const url = new URL('https://example.com?page=10&limit=5');

const pageValue = url.searchParams.get('page');
console.log(pageValue); // Output: "10"

Conclusion​

The correct method for checking for query parameters depends on your specific goal.

  • To perform a quick, simple check for the existence of any query string, the url.includes('?') method is a concise and effective solution.
  • To check for a specific query parameter, the URL and URLSearchParams API is the modern and recommended best practice. It is more robust, less error-prone, and provides a powerful interface for all query string manipulations.

Table of Contents