Query Strings and URL Parameters Deep Dive

Query Strings and URL Parameters Deep Dive

Query strings are the workhorse of web communication — search filters, pagination, tracking, feature flags, and API parameters all live in the URL query string.

Anatomy of a Query String

https://example.com/search?q=hello+world&page=2&sort=date&lang=en
                           └─── query string ───────────────────┘

Starts with ?

Key-value pairs separated by &

Keys and values separated by =

Special characters are percent-encoded

Parsing in JavaScript

URLSearchParams (Modern)

const params = new URLSearchParams("q=hello+world&page=2&sort=date");
params.get("q");        // "hello world"
params.get("page");     // "2"
params.has("sort");     // true
params.getAll("tag");   // [] (supports multiple values)

// Iterate
for (const [key, value] of params) {
  console.log(key, value);
}

Building Query Strings

const params = new URLSearchParams();
params.set("q", "hello world");
params.set("page", "2");
params.append("tag", "javascript");
params.append("tag", "tutorial");
params.toString(); // "q=hello+world&page=2&tag=javascript&tag=tutorial"

URL Object

const url = new URL("https://example.com/search?q=test");
url.searchParams.get("q");     // "test"
url.searchParams.set("page", "3");
url.href; // "https://example.com/search?q=test&page=3"

Encoding Gotchas

Space: + vs %20

+ is valid in query strings (application/x-www-form-urlencoded)

%20 is valid everywhere

URLSearchParams uses + for spaces; encodeURIComponent uses %20

Arrays

No standard. Common conventions:

?tags=js&tags=ts          — repeated keys
?tags[]=js&tags[]=ts      — PHP/Rails style
?tags=js,ts               — comma-separated

Best Practices

Keep URLs under 2048 characters — some servers and proxies truncate longer URLs. Don't put sensitive data in URLs — query strings appear in browser history, server logs, and referrer headers. Use meaningful parameter names — ?q= for search, ?page= for pagination, ?sort= for ordering. Preserve unknown parameters — when building URL manipulation utilities, don't drop parameters you don't recognize.

Try It

Use our Query String Parser tool to parse, edit, and rebuild URL query strings with a visual key-value editor.

Conclusion

Query strings are simple but full of edge cases around encoding, arrays, and length limits. Use URLSearchParams for manipulation and be mindful of what you put in URLs.