URL Encoding and Query Strings: A Practical Guide

URLs only allow a limited set of characters in the path and query. Everything else must be percent-encoded (e.g. space → %20, & → %26). Getting this wrong leads to 404s, broken analytics tags, and subtle API bugs.

What gets encoded?

• Query values that contain spaces, &, =, #, or non-ASCII text (emojis, accents) must be encoded.
• Path segments with slashes or special characters need encoding too—otherwise the router misreads where one segment ends.

Browsers often show a “pretty” URL in the address bar while sending an encoded form on the wire. APIs, however, expect you to encode explicitly when you build strings by hand.

encodeURIComponent vs encodeURI

In JavaScript:

• encodeURIComponent — Use for query parameter values (and usually keys). It encodes nearly everything that could break a URL.
• encodeURI — Use for an entire URL only when you need to preserve delimiters like ? and #. Rare in day-to-day API work.

const q = "hello world & friends";
const params = new URLSearchParams({ q });
console.log(params.toString()); // q=hello+world+%26+friends

URLSearchParams handles encoding for standard application/x-www-form-urlencoded style queries and is preferred over manual string concatenation.

Building URLs with many parameters

When you add UTM tags, filters, or API keys, mistakes pile up: duplicate ?, unencoded &, or ambiguous ordering. A small helper—or a visual builder—keeps the final string valid.

Try our URL Encode / Decode tool to inspect how strings change, and the URL & Query String Builder to assemble a full link with UTF-8-safe encoding.

cURL and fetch

When copying requests from browser devtools, pay attention to already-encoded query strings. Pasting them into code sometimes double-encodes values. Our cURL to fetch() converter helps you turn a working cURL into JavaScript while you verify the URL separately.

If a link “works in Chrome” but fails in your script, compare the raw query string byte-for-byte.

Quick checklist

• Encode values before concatenating into ?a=...&b=...
• Prefer URL + URLSearchParams over manual string building
• For internationalized domain names (IDN), the browser handles punycode in the hostname—focus encoding on path and query