Introduction

Getting a URL parameter value is easy if you use the platform parser instead of splitting strings by hand. In modern JavaScript, URL and URLSearchParams handle decoding, repeated keys, and missing values correctly. The real engineering decision is not how to split ?a=1&b=2, but how to parse once, validate, and keep URL state consistent across the application.

Use URLSearchParams for Browser Code

If you are working in a browser, the simplest approach is URLSearchParams.

1const params = new URLSearchParams(window.location.search);
2
3const query = params.get("q");
4const page = params.get("page");
5
6console.log(query);
7console.log(page);

get returns the first value for a key or null if the key does not exist. That is already better than hand-written parsing logic because it handles decoding and separators correctly.

If you have a full URL string rather than window.location.search, use URL first:

const url = new URL("https://example.com/search?q=graph%20ml&page=2");
console.log(url.searchParams.get("q"));

Repeated Keys Need getAll

Some URLs repeat the same key multiple times, especially for filters and tags.

const params = new URLSearchParams("?tag=python&tag=ml&tag=tensorflow");
console.log(params.get("tag"));
console.log(params.getAll("tag"));

get returns only the first matching value. If your routing or filtering logic expects multiple values, getAll is the correct API.

This matters more than people think. A bug caused by silently dropping repeated filters can be hard to notice because the URL still looks valid.

Parse and Convert at the Boundary

Query parameters are strings. Even if they represent page numbers, booleans, or limits, they arrive as text. Convert them at the boundary instead of passing raw strings deep into the application.

1function parseSearch(search) {
2  const params = new URLSearchParams(search);
3
4  const rawPage = Number(params.get("page") ?? "1");
5  const page = Number.isFinite(rawPage) ? Math.max(1, Math.floor(rawPage)) : 1;
6
7  return {
8    q: params.get("q") ?? "",
9    page,
10    archived: params.get("archived") === "1",
11    tags: params.getAll("tag"),
12  };
13}
14
15console.log(parseSearch("?q=graph&page=2&tag=python&tag=ml"));

This pattern keeps the rest of the code working with typed values instead of repeating conversion logic everywhere.

Update URL Parameters Safely Too

Reading parameters is only half the job. If the application also writes URLs, use the same API for construction.

1const params = new URLSearchParams();
2params.set("q", "graph neural networks");
3params.set("page", "1");
4params.append("tag", "python");
5params.append("tag", "ml");
6
7const nextUrl = `/search?${params.toString()}`;
8console.log(nextUrl);

This prevents broken encoding and keeps query generation consistent with parsing.

Frameworks Still Benefit from One Parsing Helper

Even when using a router library, centralizing URL parsing is a good idea. Framework helpers are useful, but the application still needs one place where defaults, bounds, and conversions are defined.

1import { useSearchParams } from "react-router-dom";
2
3function usePageParam() {
4  const [params, setParams] = useSearchParams();
5  const page = Math.max(1, Number(params.get("page") ?? "1") || 1);
6
7  function setPage(next) {
8    const updated = new URLSearchParams(params);
9    updated.set("page", String(next));
10    setParams(updated);
11  }
12
13  return { page, setPage };
14}

The principle is the same whether you are in React, Vue, Svelte, or plain browser code: parse once, validate early, and update through one path.

Common Pitfalls

• Splitting query strings manually and breaking on encoded characters or edge cases.
• Using get when the URL format actually allows repeated keys and needs getAll.
• Passing raw string parameters deep into business logic without conversion or validation.
• Building query strings by concatenating strings instead of using URLSearchParams.
• Treating the URL as a free-form text field instead of a typed application boundary.

Summary

• Use URLSearchParams to read query parameters in modern JavaScript.
• Use get for one value and getAll for repeated keys.
• Convert parameter strings into typed values as soon as you parse them.
• Use the same API to write parameters safely.
• Centralized parsing keeps route logic predictable and easier to maintain.