Encoding URL Query Parameters

URL query strings carry key-value parameter data after the ? in a URL. Properly encoding query parameters is essential because both keys and values can contain characters that conflict with the query string's own syntax (= separates keys from values, & separates pairs).

Query string structure:

https://example.com/search?query=hello+world&category=tech&page=1
                           |--- key=value ---|--- key=value ---|------|

Encoding rules for query parameters:

1. Encode each key with encodeURIComponent()
2. Encode each value with encodeURIComponent()
3. Join key-value pairs with =
4. Join pairs with &

JavaScript implementation:

// Manual approach (not recommended for complex values)
const key = encodeURIComponent("search query");
const value = encodeURIComponent("Tom & Jerry");
const qs = `${key}=${value}`; // "search%20query=Tom%20%26%20Jerry"

// Recommended: Use URLSearchParams
const params = new URLSearchParams({
  "search query": "Tom & Jerry",
  category: "movies & tv",
  page: "1"
});
params.toString();
// "search+query=Tom+%26+Jerry&category=movies+%26+tv&page=1"

URLSearchParams vs encodeURIComponent differences:

• URLSearchParams encodes spaces as + (form encoding convention)
• encodeURIComponent() encodes spaces as %20 (RFC 3986)
• Both are valid for query strings; servers generally accept either

Handling arrays in query parameters:

// Repeated keys (most universal)
const params = new URLSearchParams();
["js", "ts", "py"].forEach(v => params.append("lang", v));
params.toString(); // "lang=js&lang=ts&lang=py"

// Bracket notation (PHP/Rails convention)
// Must be done manually as URLSearchParams doesn't support it
const bracket = ["js", "ts", "py"]
  .map(v => `lang[]=${encodeURIComponent(v)}`)
  .join("&");
// "lang[]=js&lang[]=ts&lang[]=py"

Maximum URL length: While there is no formal limit in HTTP specifications, practical limits exist: Internet Explorer supported 2,083 characters, most modern browsers handle 32,000+ characters, but many servers cap at 8,192 characters. Keep query strings reasonably short by using POST for large data payloads.

Pitfall: Never construct query strings by string concatenation without encoding. Even seemingly safe values like user names or search terms can contain &, =, #, or other reserved characters that silently break the URL structure.