Understanding URL Query Strings: Encoding, Libraries, and Best Practices

The article begins by defining URL query strings as the portion after '?' in a URL that assigns values to parameters, originally designed for HTML form submissions. It outlines the basic structure: key=value pairs separated by '&', with optional historical support for ';' as a separator, and notes that multiple values for the same key lack an authoritative standard, though many frameworks treat them as arrays.

It then details percent-encoding: reserved characters are encoded as %HH using their ASCII hex values, while non‑reserved characters (A‑Z, a‑z, 0‑9, -, _, ., ~) are left unencoded. A space may be encoded as '+' or %20; the '+' form originates from the application/x-www-form-urlencoded format used in form submissions, whereas %20 is the modern RFC 3986 recommendation. The piece explains that early specifications left the character encoding ambiguous, leading RFC 3986 to recommend UTF‑8 before percent‑encoding, and shows how JavaScript’s encodeURI/encodeURIComponent implement this, contrasting them with the deprecated escape function.

Next, the article compares three popular libraries. qs is portrayed as a “Swiss‑army knife” that supports nested objects, custom delimiters (e.g., ';'), deep nesting limits via options.depth, flexible array parsing (including bracket, index, and sparse modes), and configurable charset (default UTF‑8 with ISO‑8859‑1 fallback). Its stringify method defaults to encoding both keys and values, using brackets percent‑encoded unless encodeValuesOnly:true or indices:false is set.

query-string targets modern browsers, deliberately omits nested object support (recommending JSON serialization instead), ignores leading '?' and '#', and requires {arrayFormat:'bracket'} to parse bracket‑style arrays; its stringify omits brackets by default but can include them with the same option. It also supports indexed arrays via {arrayFormat:'index'}.

URLSearchParams is the standard Web API, constructing from a URL or directly from a search string, automatically decoding values via .get() (first match) or .getAll() (array of all matches). It provides .set()/.append() for adding parameters (strings only, auto‑encoded), .keys() iterator, and .toString() which encodes spaces as '+'. The article notes its performance trade‑offs versus qs and its legacy status in older Node.js versions, while highlighting its compatibility with browser code.

Practical guidance follows: for GET query strings in web projects, URLSearchParams (or query‑string) suffices; for POST bodies or Node.js environments needing broader compatibility, qs is preferred. The article also clarifies that decodeURIComponent does not translate '+' to a space, suggesting a simple replace‑based helper or libraries like safe‑decode‑uri‑component for robust handling, and notes that native HTML forms encode spaces as '+' according to the form’s charset meta tag.