What is percent-encoding? A guide to URL encoding for developers
Use encodeURIComponent() for individual query parameter values. Use encodeURI() for full URLs. Never hand-roll percent-encoding. If you need URL-safe Base64 (for JWT tokens in URLs), use the URL-safe variant that replaces + with - and / with _.
Percent-encoding (also called URL encoding) represents a byte with a percent sign followed by two hex digits when that byte can't appear literally in the URL component being built. Spaces become %20 and an ampersand inside a query value becomes %26, but an ampersand between query parameters remains a delimiter. The unreserved set (A-Z, a-z, 0-9, hyphen, underscore, period, tilde) is always safe, while reserved characters depend on their component and role.
By TechCompare · Updated
How this is calculated
Different parts of a URL have different reserved characters. The query string uses ? & = and # as structure, while the path uses / ? and #. JavaScript's encodeURIComponent() leaves A-Z, a-z, 0-9, - _ . ! ~ * ' ( ) unchanged, so it is useful for one query parameter value. For strict RFC 3986 unreserved-only output, also percent-encode ! ' ( ) and *. encodeURI() keeps more URL delimiters intact for a full URL. Using the wrong helper causes double-encoding or lets a raw & in a query value break parsing.
Verdict
The reserved character set changes by URL segment, which is why two helpers exist. encodeURIComponent is designed for a component value, but its JavaScript escape set also leaves ! ~ * ' ( ) literal. If strict RFC 3986 unreserved-only output is required, encode those five characters after encodeURIComponent. encodeURI keeps structural delimiters intact for a full URL. Mixing them up causes double-encoding or raw ampersands that break query parsing.