Что делает encodeURIComponent? Простое объяснение с примерами
Если вы создали URL-адрес на JavaScript, вы, вероятно, столкнулись с encodeURIComponent и, возможно, с его похожим до смешения родным братом encodeURI. Использование неправильного — это классическая ошибка, которая тонким образом нарушает работу ссылок. Вот четкое объяснение того, что делает encodeURIComponent, с примерами и простым правилом выбора между ними.
Что он делает
encodeURIComponent принимает строку и заменяет любой небезопасный символ в URL-адресе его эквивалентом в процентном кодировании. Пробел становится %20, амперсанд становится %26, знак равенства становится %3D, вопросительный знак становится %3F и так далее. Цель состоит в том, чтобы сделать часть текста безопасным для добавления в URL-адрес в качестве значения, условия поиска, параметра, цели перенаправления, без того, чтобы специальные символы были ошибочно интерпретированы как структура URL-адреса. Он кодирует все, что может вызвать проблему, а это именно то, что вам нужно для одного значения.
Конкретный пример
Допустим, вы хотите создать URL-адрес поиска по запросу «кошки и собаки». Если вы просто объедините его, вы получите ...?q=cats & Dogs, что нарушается, амперсанд читается как разделитель параметров, а пробел является недопустимым. Сначала запустите значение через encodeURIComponent, и «cats &dogs» станет «cats%20%26%20dogs», что даст вам ...?q=cats%20%26%20dogs, которое сервер правильно считывает как одно значение «cats&dogs». Кодировка сохраняет значение ваших данных, экранируя символы, которые в противном случае были бы структурными.
encodeURIComponent против encodeURI
Разница в том, что каждый оставляет в покое. encodeURIComponent кодирует все зарезервированное, включая символы структуры URL, такие как / ? & = #, поскольку предполагается, что вы кодируете значение, которое находится внутри URL-адреса. encodeURI намеренно не кодирует эти структурные символы, поскольку предполагает, что вы кодируете целый, уже созданный URL-адрес и хотите сохранить его работоспособность. Таким образом, encodeURI('https://x.com?a=b c') сохраняет ://, ? и = нетронутыми и исправляет только пробел, в то время как encodeURIComponent будет экранировать их все. Используйте компонент для частей, encodeURI для всего URL.
Простое правило
Вот правило, которое убережет вас от неприятностей: если вы кодируете значение, которое входит в URL-адрес, поисковый запрос, значение параметра, сегмент пути, цель перенаправления, используйте encodeURIComponent. Если вы кодируете весь URL-адрес и хотите, чтобы он оставался рабочим URL-адресом, используйте encodeURI. Если вы не уверены, вам почти всегда нужно кодироватьURIComponent, потому что вы почти всегда кодируете значение, а не весь URL-адрес. Если вы это сделаете правильно, вы предотвратите наиболее распространенные ошибки при построении URL-адресов.
Остерегайтесь двойного кодирования
Одна ловушка: никогда не запускайте encodeURIComponent для уже закодированной строки. Если вы закодируете значение дважды, закодируются сами знаки процента, %20 станет %2520, и связь разорвется. Кодируйте только необработанный, незакодированный текст. Если вы не уверены, закодирована ли строка, сначала декодируйте ее, а затем закодируйте ровно один раз. Эта ошибка двойного кодирования является источником загадочного %2520, который вы иногда видите в неработающих URL-адресах.