Encode text for safe use in a URL or decode percent-encoded strings back to readable text. Component and full-URL modes are separate, because they escape different characters, and there is a query string parser that breaks a URL into its parameters.
encodeURIComponent escapes everything that is not unreserved, including : / ? # & =. Use it for a single value going into a query parameter. encodeURI leaves those structural characters alone so a whole URL stays functional. Applying the component version to a full URL produces something that looks encoded but no longer works as a link - a very common bug.
Both encode a space, but they come from different places. %20 is proper percent encoding and is valid anywhere in a URL. + comes from HTML form submission and is only meaningful inside a query string. A decoder has to know which convention produced the input; component mode here treats + as a space, which is what you want for query strings.
Unencoded user input in a URL is how parameters get smuggled and links get broken. A stray & in a value silently splits it into two parameters. Encode values at the point you build the URL, not afterwards.
Full-URL encoding leaves structural characters like : / ? & = intact so the URL still works. Component encoding escapes them too, which is what you need for a value going inside a query parameter. Using the wrong one is a classic source of broken links.
Both appear. %20 is correct percent-encoding and works anywhere in a URL. The + form comes from HTML form submission, where it is only valid inside a query string. Decoders need to know which convention was used.
Steuervergleich Kanton Zürich — Gemeindesteuern vergleichen (Deutsch)