Web编码全解析：URL编码、Base64、Unicode深度指南

几年前我接手过一个搜索功能，用户搜「中文」回来全是 404。打开 Network 一看，请求里赫然躺着 %E4%B8%AD 这串东西，当时我还以为是后端挂了，折腾了半天才反应过来——是我自己把已经编码过的字符串又 encodeURIComponent 了一遍，% 变成了 %25，活活双重编码。这种事现在想起来都觉得蠢，但当年是真踩。

后来更离谱的还有：表单提交里一个 a+b 到了服务端变成了 a b，+ 凭空消失；对接一个十几年的老 ERP，对方死活用 GBK，我们这边 UTF-8，结果中文全是「锟斤拷」那种经典乱码；还有一次产品在昵称里塞了个 😀，数据库 varchar 直接报错 incorrect string value，查到最后发现是 MySQL 的 utf8 根本不是真 UTF-8（得用 utf8mb4）。

这些坑的共同点是：表面看是「字符串处理」，本质全是编码问题。这篇就把我这些年踩过的 URL 编码、Base64、Unicode/UTF-8 这几摊事讲清楚——不是教科书顺序，是按实际会坑到你的顺序。

目录

1. 为什么需要编码
2. URL编码详解
3. Base64编码原理
4. Unicode与UTF-8
5. 实战应用
6. 常见问题

先记住这张表

几种编码经常被混为一谈，但用途和坑完全不一样。我把最容易栽跟头的地方列在前面，后面再展开：

编码方式	干什么用的	最常见的踩坑点
URL 编码（百分号编码）	让特殊字符能安全塞进 URL	双重编码（% 变 %25）、+ 和空格的歧义
Base64	把二进制塞进只能放文本的地方	当加密用（它不是加密）、体积膨胀 33%、btoa 不吃中文
HTML 实体	防止 < & 被当标签解析	该转义没转义直接 XSS，或者转义了又显示成 &lt;
UTF-8	字符↔字节的实际编码方案	和 GBK/Latin1 串台变乱码、MySQL utf8 假冒伪劣

如果你只想解决眼前的乱码，直接跳到最后一节的结论；想搞明白为什么，往下读。

为什么需要编码

计算机只懂二进制

计算机的底层只能理解0和1，所有的数据最终都要转换成二进制。但人类习惯使用文字、符号、图片等多样化的信息形式。编码就是建立人类可读信息与计算机二进制之间的桥梁。

不同场景的限制

不同的传输协议和存储格式对数据有不同的要求：

• URL：只能包含ASCII可打印字符，空格和特殊字符需要编码
• HTTP Headers：只支持ASCII字符
• JSON：文本格式，二进制数据需要转换为文本
• HTML：需要转义特殊字符以避免与标签混淆

示例：中文在URL中的问题

// 直接使用中文参数
const url1 = 'https://example.com/search?q=你好';
// 浏览器实际发送：https://example.com/search?q=%E4%BD%A0%E5%A5%BD

// 手动编码
const url2 = `https://example.com/search?q=${encodeURIComponent('你好')}`;
console.log(url2); // https://example.com/search?q=%E4%BD%A0%E5%A5%BD

URL编码详解

URL的组成

一个完整的URL包含多个部分：

https://user:pass@www.example.com:8080/path/to/page?key=value#section
└─┬──┘ └──┬───┘ └──────┬────────┘└─┬─┘└─────┬─────┘└───┬────┘└──┬───┘
  │       │            │           │        │          │        │
 协议    认证        主机名        端口     路径      查询参数   片段

为什么需要URL编码

URL中的某些字符具有特殊含义：

• ? - 分隔路径和查询参数
• & - 分隔多个参数
• = - 分隔参数名和值
• # - 标识片段标识符
• / - 路径分隔符

如果参数值包含这些字符，就会产生歧义：

// ❌ 问题：& 被解释为参数分隔符
const wrong = 'https://example.com/search?q=Tom&Jerry';
// 服务器会解析为两个参数：q=Tom 和 Jerry（无值）

// ✅ 正确：对参数值进行编码
const correct = `https://example.com/search?q=${encodeURIComponent('Tom&Jerry')}`;
// https://example.com/search?q=Tom%26Jerry

URL编码规则

URL编码使用百分号(%)后跟两位十六进制数表示字节值：

// 空格编码为 %20
encodeURIComponent(' '); // '%20'

// 中文"你"的UTF-8编码是 0xE4 0xBD 0xA0
encodeURIComponent('你'); // '%E4%BD%A0'

// 特殊字符
encodeURIComponent('!@#$%^&*()'); // '!%40%23%24%25%5E%26*（）'

encodeURI vs encodeURIComponent

JavaScript提供了两个URL编码函数，区别在于哪些字符会被编码：

const url = 'https://example.com/path?key=value&name=张三';

// encodeURI：不编码URL结构字符（: / ? & =）
console.log(encodeURI(url));
// https://example.com/path?key=value&name=%E5%BC%A0%E4%B8%89

// encodeURIComponent：编码所有非字母数字字符（除了 - _ . ! ~ * ' ( )）
console.log(encodeURIComponent(url));
// https%3A%2F%2Fexample.com%2Fpath%3Fkey%3Dvalue%26name%3D%E5%BC%A0%E4%B8%89

使用建议：

• encodeURI：编码整个URL
• encodeURIComponent：编码URL的某个部分（如参数值）

实战：构建安全的URL

function buildURL(base, params) {
  const queryString = Object.entries(params)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');

  return `${base}?${queryString}`;
}

const url = buildURL('https://api.example.com/search', {
  q: '你好 世界',
  filter: 'type=article&status=published',
  page: 1,
});

console.log(url);
// https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD%20%E4%B8%96%E7%95%8C&filter=type%3Darticle%26status%3Dpublished&page=1

Base64编码原理

什么是Base64

Base64是一种将二进制数据转换为ASCII文本的编码方式。它使用64个可打印字符（A-Z, a-z, 0-9, +, /）来表示二进制数据。

编码过程详解

让我们通过编码字符串"Man"来理解Base64：

步骤1：转换为二进制

M = 77  = 01001101
a = 97  = 01100001
n = 110 = 01101110

连接：010011010110000101101110（24位）

步骤2：分组（每6位）

010011 | 010110 | 000101 | 101110
  19       22       5        46

步骤3：查表转换

Base64字符表：
索引 0-25 → A-Z
索引 26-51 → a-z
索引 52-61 → 0-9
索引 62 → +
索引 63 → /

19 → T
22 → W
5  → F
46 → u

结果：Man → TWFu

填充规则

Base64以3字节为一组进行编码。如果最后一组不足3字节，使用=填充：

// 1字节："A"
// 二进制：01000001 00000000 00000000
// Base64：QQ==

btoa('A'); // 'QQ=='

// 2字节："AB"
// 二进制：01000001 01000010 00000000
// Base64：QUI=

btoa('AB'); // 'QUI='

// 3字节："ABC"
// 无需填充
btoa('ABC'); // 'QUJD'

Base64的应用场景

1. Data URL（内嵌图片）

<!-- 传统方式：外链图片 -->
<img src="/images/logo.png" alt="Logo" />

<!-- Base64：内嵌图片 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Logo" />

优点：

• 减少HTTP请求
• 适合小图标、Logo

缺点：

• 体积增大约33%
• 无法缓存
• 不适合大图片

2. API数据传输

// 将文件转换为Base64发送到服务器
async function uploadFile(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const base64 = e.target.result.split(',')[1];
      resolve(
        fetch('/api/upload', {
          method: 'POST',
          body: JSON.stringify({ file: base64 }),
          headers: { 'Content-Type': 'application/json' },
        })
      );
    };
    reader.readAsDataURL(file);
  });
}

3. 存储二进制数据

// LocalStorage只能存储字符串，二进制数据需要Base64编码
const binaryData = new Uint8Array([72, 101, 108, 108, 111]);
const base64 = btoa(String.fromCharCode(...binaryData));
localStorage.setItem('data', base64);

// 读取
const storedBase64 = localStorage.getItem('data');
const decoded = Uint8Array.from(atob(storedBase64), (c) => c.charCodeAt(0));

Base64性能考虑

// ❌ 大文件不适合Base64
const hugeImage = '...'; // 10MB图片
const base64 = btoa(hugeImage); // 变成约13.3MB，且会阻塞UI

// ✅ 使用Blob URL代替
const blob = new Blob([hugeImage], { type: 'image/png' });
const blobURL = URL.createObjectURL(blob);
// 使用完记得释放
URL.revokeObjectURL(blobURL);

Unicode与UTF-8

Unicode的诞生

早期计算机用 ASCII，只能表示 128 个字符（7 位），对英语世界够用了。但只要你要处理中文、日文、阿拉伯文，128 个格子根本不够塞。各国早年各搞各的（GB2312、Big5、Shift-JIS……），同一段字节在不同编码下显示成完全不同的字，互联网一连通就是灾难。Unicode 就是来收拾这个烂摊子的：给地球上每个字符发一个全球唯一的号。

Unicode vs UTF-8

这俩我面试时问过不少人，能说清的不多。其实分工很明确：

• Unicode：字符集，只负责给每个字符发一个唯一编号（码点），它不管怎么存。
• UTF-8：编码方案，负责把 Unicode 码点真正变成一串字节存到磁盘、发到网络上。

一个是「门牌号」，一个是「怎么把信送到」。同一个码点，UTF-8、UTF-16 编出来的字节完全不同。

字符 "你"
Unicode码点：U+4F60（十六进制）= 20320（十进制）
UTF-8编码：E4 BD A0（3字节）
UTF-16编码：4F 60（2字节）

UTF-8的优势

UTF-8是Web的标准编码，优势在于：

1. 兼容ASCII：ASCII字符仍然是1字节
2. 变长编码：根据字符自动调整字节数
3. 无字节序问题：不像UTF-16有大端小端之分
4. 自同步性：可以从任意位置开始解码

UTF-8编码规则

字符范围                    UTF-8编码（二进制）
U+0000 - U+007F（ASCII）    0xxxxxxx
U+0080 - U+07FF             110xxxxx 10xxxxxx
U+0800 - U+FFFF             1110xxxx 10xxxxxx 10xxxxxx
U+10000 - U+10FFFF          11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

示例：编码"你"（U+4F60）

1. 确定范围：U+4F60在U+0800-U+FFFF，使用3字节模板
   1110xxxx 10xxxxxx 10xxxxxx

2. 转换为二进制：
   4F60 = 0100 1111 0110 0000

3. 填充模板：
   1110[0100] 10[111101] 10[100000]
   E4         BD         A0

JavaScript中的Unicode处理

// 字符的Unicode码点
'你'.codePointAt(0); // 20320
String.fromCodePoint(20320); // '你'

// 转义序列
('\\u4F60'); // '你'
('\\u{1F600}'); // '😀' (需要使用大括号表示超过U+FFFF的字符)

// 字符串长度陷阱
'你好'.length; // 2
'😀'.length; // 2（Emoji是双字节字符，占2个code unit）

// 正确计算字符数
[...'😀'].length; // 1
Array.from('😀').length; // 1

实战：处理Emoji

function getCharCount(str) {
  // 使用扩展运算符正确统计字符数（包括Emoji）
  return [...str].length;
}

function truncate(str, maxLength) {
  const chars = [...str];
  if (chars.length <= maxLength) return str;
  return chars.slice(0, maxLength).join('') + '...';
}

console.log(getCharCount('Hello 😀 World')); // 13
console.log(truncate('Hello 😀 World 😊', 10)); // 'Hello 😀 W...'

实战应用

案例1：安全的查询字符串解析

function parseQueryString(url) {
  const params = {};
  const queryString = url.split('?')[1];

  if (!queryString) return params;

  queryString.split('&').forEach((pair) => {
    const [key, value] = pair.split('=');
    params[decodeURIComponent(key)] = decodeURIComponent(value || '');
  });

  return params;
}

const url = 'https://example.com?name=%E5%BC%A0%E4%B8%89&age=30&city=%E5%8C%97%E4%BA%AC';
console.log(parseQueryString(url));
// { name: '张三', age: '30', city: '北京' }

案例2：图片转Base64预览

function previewImage(file) {
  return new Promise((resolve, reject) => {
    if (!file.type.startsWith('image/')) {
      reject(new Error('请选择图片文件'));
      return;
    }

    const reader = new FileReader();

    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        // 限制图片大小
        const maxSize = 500 * 1024; // 500KB
        if (file.size > maxSize) {
          // 压缩图片
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');

          const scale = Math.sqrt(maxSize / file.size);
          canvas.width = img.width * scale;
          canvas.height = img.height * scale;

          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          resolve(canvas.toDataURL('image/jpeg', 0.8));
        } else {
          resolve(e.target.result);
        }
      };
      img.src = e.target.result;
    };

    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 使用
document.querySelector('#upload').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const preview = await previewImage(file);
  document.querySelector('#preview').src = preview;
});

案例3：安全的HTML内容渲染

function escapeHTML(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

function unescapeHTML(str) {
  const div = document.createElement('div');
  div.innerHTML = str;
  return div.textContent;
}

// 防止XSS攻击
const userInput = '<script>alert("XSS")</script>';
const safe = escapeHTML(userInput);
console.log(safe); // &lt;script&gt;alert("XSS")&lt;/script&gt;

// 渲染时不会执行脚本
document.getElementById('content').innerHTML = safe;

常见问题

Q1: btoa()和atob()不支持中文怎么办？

JavaScript的btoa()和atob()只支持ASCII字符（0-255）。处理中文需要先转UTF-8：

// ❌ 直接使用会报错
btoa('你好'); // Error: DOMException

// ✅ 先转UTF-8
function base64Encode(str) {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
      return String.fromCharCode(parseInt(p1, 16));
    })
  );
}

function base64Decode(str) {
  return decodeURIComponent(
    Array.from(atob(str), (c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join('')
  );
}

console.log(base64Encode('你好')); // '5L2g5aW9'
console.log(base64Decode('5L2g5aW9')); // '你好'

Q2: URL中的+号和空格如何处理？

URL编码中，空格既可以编码为%20，也可以用+表示（仅在查询参数中）：

// 使用encodeURIComponent（推荐）
encodeURIComponent('hello world'); // 'hello%20world'

// 使用+替换空格（表单提交时常见）
'hello world'.replace(/\\s/g, '+'); // 'hello+world'

// 解码时需要处理+号
function decodeURL(str) {
  return decodeURIComponent(str.replace(/\\+/g, ' '));
}

console.log(decodeURL('hello+world')); // 'hello world'

Q3: 如何判断字符串是否是Base64？

function isBase64(str) {
  if (str === '' || str.trim() === '') return false;

  try {
    return btoa(atob(str)) === str;
  } catch (err) {
    return false;
  }
}

console.log(isBase64('SGVsbG8=')); // true
console.log(isBase64('Hello')); // false

Q4: 为什么Base64会让文件变大？

Base64使用4个ASCII字符表示3个字节：

原始数据：3字节 = 24位
Base64：  4字符 × 8位 = 32位

膨胀率：32/24 = 1.33（约33%）

最后说几句

写了这么多，真要我浓缩成一句话：乱码 99% 是编解码两端用了不同字符集。前端 UTF-8、后端 GBK、数据库 Latin1，任意两环不对齐就出问题。我的经验是——从浏览器到 API 到数据库到日志，全链路统一 UTF-8（数据库记得是 utf8mb4，别用 MySQL 那个假的 utf8），能省你后面一半的命。剩下那 1% 的疑难杂症，多半是某一环偷偷做了你没注意到的编码/解码，比如网关、Nginx、或者某个「贴心」的 SDK。

几个我自己一直在用的判断：

• URL 参数一律 encodeURIComponent，别手拼字符串，更别对已经编码过的东西再编一次（双重编码害人）。
• 看到 Base64 别下意识觉得「这是加密」——它就是个换皮的明文，谁都能 atob 回来。要保密请上真加密。
• Base64 适合小数据（图标、几 KB 的内嵌资源），大文件老老实实用 Blob URL，否则体积 +33% 还阻塞主线程。
• 用户输入进 HTML 前先转义，这是底线，XSS 大多数都是这一步偷懒来的。

顺便提一句，本站这几个编解码工具（下面有链接）全是纯前端跑的，你贴进去的内容压根不会上传到任何服务器，调试半截敏感数据也不用担心泄露——这点我自己用着比较放心，也顺手分享给你。

编码这东西，平时不出事你感觉不到它存在，一出事就是半天起步。希望这篇能帮你少熬几个夜。有更刁钻的乱码案例，欢迎来交流。

相关工具

• 🔐 Base64编解码工具
• 🔗 URL编解码工具
• 🔢 进制转换器

---

关键词: Web编码, URL编码, Base64, Unicode, UTF-8, JavaScript编码

更新时间: 2026-01-04