How to Get URL Parameters in JavaScript: Under the Hood Analysis

URL Parameters in JavaScript: From Simple to Complex

Every developer has encountered the task at least once: you need to extract data from the browser's address bar. You open a page, see something like /products?id=42&category=books — and you understand: somewhere inside this set of characters, important data is hidden. How do you retrieve it? The question that has gathered thousands of votes on Stack Overflow is: "How can I get query string values in JavaScript?". Today we will not just give a ready-made answer — we will look under the hood of this process and break down how URL parsing works in JavaScript at all levels.

Why is this important? Because URL parameters are the foundation of the modern web. Passing data between pages, filtering products, analytics, referral links — all of this is built on simple strings after the question mark. And if you write in JavaScript, the ability to work with query strings is not an option, but a mandatory skill.

What is a query string and how to see it in the browser

First, let's clarify the terminology. A query string is the part of a URL that begins after the question mark. For example, in the address:

https://example.com/search?q=javascript&lang=ru&page=1

everything after ? is the query string. It consists of key=value pairs separated by an ampersand (&). Each key can appear multiple times — and it's important to remember this.

To get this string in JavaScript, simply access the property:

const queryString = window.location.search;\nconsole.log(queryString); // "?q=javascript&lang=ru&page=1"

Note: the property returns the string including the question mark. This is the starting point for all further manipulations.

Method #1: URLSearchParams — Modern and Simple

If you are writing code for modern browsers (which is 99% of cases), use the built-in URLSearchParams API. It appeared in 2016 and has since become the de facto standard for working with URL parameters. Let's see how it works:

// Get the query string\nconst queryString = window.location.search;\n\n// Create a URLSearchParams object\nconst params = new URLSearchParams(queryString);\n\n// Get the value by key\nconst q = params.get('q');       // "javascript"\nconst lang = params.get('lang'); // "ru"\nconst page = params.get('page'); // "1"\n\n// Check if a parameter exists\nconsole.log(params.has('lang')); // true\n\n// Get all values if the key repeats\nparams.append('q', 'python');\nconsole.log(params.getAll('q')); // ["javascript", "python"]\n\n// Iterate over all parameters\nfor (const [key, value] of params) {\n    console.log(`${key}: ${value}`);\n}\n// Output:\n// q: javascript\n// lang: ru\n// page: 1\n// q: python

Under the hood, URLSearchParams automatically decodes encoded characters (e.g., converts %20 to a space) and correctly handles complex cases like repeated keys. This is not just convenient — it's safe.

How does it work under the hood?

When you create new URLSearchParams(queryString), the JavaScript engine performs the following steps:

\n
• Removes the leading question mark (if present).
\n
• Splits the string by the & character, obtaining an array of pairs.
\n
• Splits each pair by the first = character into a key and value.
\n
• Decodes URI components — replaces %20 with a space, %23 with #, and so on.
\n
• Saves everything in a structure where each key corresponds to an array of values (even if there is only one).
\n

This process is fully reversible. You can modify the param