URL Encoding Reference

Practical Snippet

Key points: (1) a space may be + in a query string but must be %20 in a path, where + is a literal plus; (2) a valid encoded result never contains %25 — seeing it means double encoding, fixed by agreeing that exactly one layer encodes and the rest pass through; (3) prefer URLSearchParams, which correctly encodes & and = so parameters cannot shift; (4) the address bar shows a normalised value, so debug encoding against the Network Request URL and server logs.

// ① 空格：查询串用 +，路径用 %20
const q = 'keyword=' + encodeURIComponent('a b')  // keyword=a%20b（函数一律用 %20，更安全）
const legacyForm = 'keyword=a+b'                // 仅在 form-urlencoded 语境下等价于空格
// ⚠️ 路径里绝不能用 + 表示空格：
new URL('https://x.dev/a b').pathname            // /a%20b
new URL('https://x.dev/' + 'a+b').pathname       // /a+b —— 服务器会当成字面加号

// ② 检测双重编码：合法编码结果不含 %25
const twice = encodeURIComponent('%20')           // '%2520'  ← % 被编码成 %25
console.log(twice.includes('%25'))                // true ⇒ 多编码了

// ③ 只在约定的一层编码，其余透传
function buildQuery(params) {
  const p = new URLSearchParams()
  for (const [k, v] of Object.entries(params)) p.append(k, v)   // 内部正确编码
  return p.toString()                                          // keyword=a+b
}
console.log(buildQuery({ keyword: 'a b', q: 'x&y' }))
// keyword=a+b&q=x%26y  —— & 已被编码，参数不会串位

// ④ 调试时看原始 URL，不看地址栏显示值
console.log(location.href)                      // 浏览器可能已规范化
console.log(new URL(location.href).pathname)     // 规范化后的路径
// 排编码问题：以 Network 面板的 Request URL 与服务端日志为准