URL Encoding Pitfalls: Why %20, +, and Special Characters Break APIs

URLs are composed of distinct parts — scheme, host, path, query string, and fragment — each with its own encoding rules, and treating them as uniform text is a common source of bugs. Characters like &, #, =, and ? carry structural meaning in URLs, so user-supplied data containing these must be properly encoded before being inserted into a URL component. A frequent source of confusion is that spaces can be represented as either %20 or + depending on context: standard percent-encoding uses %20, while HTML form encoding uses +, and a literal plus sign must be encoded as %2B to avoid being misread as a space. JavaScript developers often misuse encodeURI() and encodeURIComponent(), where the former preserves URL-structural characters and is unsafe for encoding individual values, while the latter correctly encodes characters like & and = within a single component. Using dedicated APIs such as URLSearchParams and the URL constructor is generally the safer and clearer approach for building URLs with dynamic query parameters.