Полное руководство по URL-кодированию: Принципы и практика процентного кодирования

Обзор структуры URL

https://user:pass@www.example.com:8080/path/to/page?name=张三&age=25#section
└──┬──┘ └────┬────┘ └──────┬──────┘└─┬─┘└────┬─────┘└──────┬──────┘└──┬──┘
  scheme   userinfo     host      port    path        query     fragment

Только части path, query и fragment требуют кодирования. Scheme и host следуют своим собственным правилам.

Зачем нужно URL-кодирование

URL-адреса могут содержать только печатные ASCII-символы. Следующие символы должны быть закодированы:

Символ	Кодирование	Причина
Пробел	`%20` или `+`	Голые пробелы не допускаются
Китайский「张三」	`%E5%BC%A0%E4%B8%89`	Не ASCII
`&`	`%26`	Разделитель запроса
`=`	`%3D`	Разделитель ключ=значение
`#`	`%23`	Маркер фрагмента
`?`	`%3F`	Начало запроса
`/`	`%2F`	Разделитель пути

Использование инструмента URL-кодирования/декодирования ToolsKu

Шаги

Откройте инструмент URL-кодирования/декодирования
Введите URL или текст
Выберите кодирование или декодирование
Посмотрите результат

encodeURI vs encodeURIComponent

Функция	Не кодируется	Случай использования
`encodeURI()`	`: / ? # [ ] @ ! $ & ' ( ) * + , ; =`	Полный URL
`encodeURIComponent()`	`A-Z a-z 0-9 - _ . ! ~ * ' ( )`	Значения параметров URL

const base = 'https://example.com/search';

// ✅ Кодировать значения параметров
const url = `${base}?q=${encodeURIComponent('hello world')}`;
// → https://example.com/search?q=hello%20world

// ❌ Кодировать весь URL
const wrong = encodeURIComponent('https://example.com/search?q=test');
// → https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dtest

Практические сценарии

Китайские параметры запроса

Оригинал: https://search.com/q=前端开发
Закодировано:  https://search.com/q=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91

Разбор параметров URL

Используйте инструмент разбора URL, чтобы разбить URL и отобразить параметры запроса в таблице:

Ввод: https://api.com/users?name=张三&role=admin&page=1
Вывод:
  name  = 张三
  role  = admin
  page  = 1

Интернационализированные доменные имена (IDN)

Кодирование Punycode для китайского домена「工具库.com」:

工具库.com → xn--6qq986b3xl.com

Используйте инструмент Punycode для конвертации между форматами.

Параметры URL в кодировке Base64

Иногда нужно закодировать объект JSON как параметр URL:

{"user":"admin","role":"editor"}
  → Base64 → eyJ1c2VyIjoiYWRtaW4iLCJyb2xlIjoiZWRpdG9yIn0=
  → URL encode → eyJ1c2VyIjoiYWRtaW4iLCJyb2xlIjoiZWRpdG9yIn0%3D

Распространённые ошибки

Двойное кодирование

Оригинал:     hello world
Однократное кодирование: hello%20world  ✅
Двукратное кодирование: hello%2520world  ❌ (декодировать один раз → hello%20world)

Кодирование всего URL

Используйте encodeURIComponent только для значений параметров, а не для полного URL.

Пробел: `+` или `%20`?

В параметрах запроса: + и %20 эквивалентны
В путях: допустимо только %20
Рекомендация: используйте %20 последовательно

Итоги

URL-кодирование — это фундаментальный навык веб-разработки. Понимание разницы между encodeURI и encodeURIComponent, кодирования UTF-8 для китайских параметров и Punycode для интернационализированных доменов экономит часы отладки. ToolsKu предоставляет инструменты URL-кодирования/декодирования, разбора URL и Punycode.