URL 编码与 JavaScript

用浏览器自带的 encodeURIComponent / encodeURI / decodeURIComponent 做百分号（%XX）编码的在线工具、原理说明和可复制代码示例。全部在你的浏览器里运行。

本页所有处理都在你的浏览器里进行，文字不会被上传到任何服务器。代码示例也可直接复制到你的项目里用。

① 在线工具：实时看 JS 怎么编码

在下面输入文字，下方三个框会实时显示 JavaScript 三个原生函数各自的结果。

Input（输入）

选择函数 Function

处理对象 Target

Output（输出） result

encodeURIComponent(input)

encodeURI(input)

decodeURIComponent(input)

② 人话说明：这几个函数到底差在哪

百分号编码（URL 编码）：把网址里“不能直接放进去”的字符换成 %＋两位十六进制。中文、空格、& = A-Z a-z 0-9 - _ . ! ~ * ' ( ) 之外的所有字符都编码。适合编码“一个值/一个参数”，比如查询参数的值。
encodeURI(str)：只编码真正非法的字符，会保留 URL 结构符号 :/?#@&=+$,; 等。适合编码“一整条已经结构正确的网址”。
decodeURIComponent / decodeURI：把 %XX 还原回原字符。解码用对应的那一个即可。
常见坑 1 — 别重复编码：对已经编码过的字符串再 encode 一次，% 会变成 %25，越编越乱。先判断再编。
常见坑 2 — + 不是空格：encodeURIComponent(' ') 得到 %20，不是 +。+ 表示空格只出现在 application/x-www-form-urlencoded 表单提交里。
常见坑 3 — 整条 URL 要分段编：直接 encodeURIComponent 一整条 URL 会把 :// ? & 也编掉，网址就坏了。正确做法是把协议、域名、路径每段、参数名、参数值分别编码（见下方代码）。

③ 代码示例（点“复制”直接用）

1) 基本编码：一个参数值

// 把一个值编码，用作查询参数
const q = encodeURIComponent('你好 world');
// → "%E4%BD%A0%E5%A5%BD%20world"
const url = 'https://example.com/search?q=' + q;

2) 安全地拼接查询字符串

function buildQuery(params) {
  return Object.keys(params)
    .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
    .join('&');
}
const qs = buildQuery({ q: '你好', page: 2 });
// → "q=%E4%BD%A0%E5%A5%BD&page=2"

3) 读取并解码地址栏里的参数（推荐 URLSearchParams）

// 浏览器环境：自动帮你 decode
const params = new URLSearchParams(window.location.search);
const q = params.get('q');   // 已是解码后的原文

// 手动解码一段编码串
const raw = '%E4%BD%A0%E5%A5%BD';
const text = decodeURIComponent(raw);  // "你好"

4) 编码整条 URL 的每个部分（正确姿势）

function encodeUrl(url) {
  const u = new URL(url);
  u.pathname = u.pathname.split('/').map(encodeURIComponent).join('/');
  u.search = '?' + new URLSearchParams(
    [...new URLSearchParams(u.search)].map(
      ([k, v]) => [encodeURIComponent(k), encodeURIComponent(v)]
    )
  ).toString();
  return u.toString();
}
encodeUrl('https://example.com/搜索?q=你好');

5) 防止重复编码

function safeEncode(str) {
  // 如果已经编码过（含 %XX），就先解码再编码，保证只编一次
  const decoded = /%[0-9A-Fa-f]{2}/.test(str) ? decodeURIComponent(str) : str;
  return encodeURIComponent(decoded);
}

无需登录 · 无限使用 · 仅在你浏览器内运行。想回到通用编解码工具？点这里 →