URL 编码对照表

实战片段

要点：① 空格在查询串可用 +，在路径必须 %20（URL 路径里 + 是字面加号）；② 合法编码结果不会含 %25，出现即说明多编码了一次，修复方式是约定「只有一层负责编码，其余透传」；③ 构造查询串优先用 URLSearchParams，它会自动把 & 和 = 正确编码，避免参数串位；④ 调试时地址栏显示的是浏览器规范化后的值，编码问题应以 Request URL 与服务端日志为准。

// ① 空格：查询串用 +，路径用 %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 与服务端日志为准