Encoding Query String Values the Right Way

Building a URL by gluing strings together breaks as soon as a value contains &, =, # or %. Each value must be encoded on its own before it goes into the query string.

With the whole-URL method, the & and = in the value stay as they are, so the server sees a second parameter. Encoding the value alone keeps it as one.

The safe way

const url = new URL("https://example.com/search");
url.searchParams.set("q", "Tom & Jerry = 100% fun");
url.toString();

• URLSearchParams encodes for you and writes spaces as +, which servers read back as spaces.
• Never decode a URL twice: %2525 becomes %25 then %.