URL 编码 / 解码 — Component / 完整 URL / 表单数据

1. Build a search URL — one query param

const query = "café & boulangerie";
const url = `https://example.com/search?q=${encodeURIComponent(query)}`;
// → https://example.com/search?q=caf%C3%A9%20%26%20boulangerie

2. Multiple params — use URLSearchParams (recommended)

const params = new URLSearchParams({
  q: "café & boulangerie",
  lang: "fr",
  page: "2",
});
const url = `https://api.example.com/search?${params}`;
// → https://api.example.com/search?q=caf%C3%A9+%26+boulangerie&lang=fr&page=2

3. React component — URL state + fetch

function SearchPage() {
  const [query, setQuery] = useState("");

  const search = async () => {
    const res = await fetch(
      `/api/search?q=${encodeURIComponent(query)}`
    );
    const data = await res.json();
    // handle data…
  };

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      onKeyDown={(e) => e.key === "Enter" && search()}
    />
  );
}

4. OAuth redirect_uri — encode the whole callback URL

const callback = "https://app.example.com/cb?next=/dashboard";
const authUrl =
  "https://provider.com/oauth2/authorize" +
  "?client_id=my-app" +
  `&redirect_uri=${encodeURIComponent(callback)}` +
  "&response_type=code";

5. Guard against double-encoding — test before you encode

const isAlreadyEncoded = (s) => /%[0-9A-Fa-f]{2}/.test(s);

const safeEncode = (value) =>
  isAlreadyEncoded(value) ? value : encodeURIComponent(value);

safeEncode("hello%20world"); // already encoded → "hello%20world"
safeEncode("hello world");   // not encoded    → "hello%20world"

6. Selective path encoding — encode unsafe chars, preserve /

const componentUnsafe = /[^A-Za-z0-9_.~-]/g;
const encodePath = (path) =>
  path.replace(componentUnsafe, (ch) =>
    ch === "/" ? "/" : encodeURIComponent(ch)
  );

encodePath("/résumé/2026/café");
// → "/r%C3%A9sum%C3%A9/2026/caf%C3%A9"