Может кто-нибудь сказать мне, почему мы нуждаемся в decodeURIComponent

Question

У меня есть этот кусок кода, который я не смог найти объяснения. Когда я гуглил decodeURIComponent, он сказал, что это противоположность encodeURIComponent, однако я не могу найти encodeURIComponent где-нибудь в моем коде.

getParameterByName = (name, url) => {
    if (!url)
       url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`),
    results = regex.exec(url);
    if (!results)
        return null;
    if (!results[2])
        return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

это URL http://localhost:8000/restaurant.html?id=2

Так, может кто-нибудь объяснить этот код для меня.

Answer 1

Как определено в RFC 3986, URI могут содержать только символы -_.~a-zA-Z0-9 а также :/?#[]@!$&'()*+,;= где последняя группа имеет какое-то особое значение. Ограничивая эти символы, URL-адреса четко разграничены (обычно пробелом или символом новой строки) и сохраняются через прокси-серверы и другие службы, которые испытывают проблемы при обработке символов, не входящих в ASCII.

Если вы заполните форму GET, пользовательский ввод будет закодирован. Например, если вы Google для Hellö Lädies&Gentlemen+Bob, браузер запросит

https://www.google.com/search?q=Hell%C3%B6+L%C3%A4dies%26Gentlemen%2BBob

Вы видите, что все не-ASCII символы и амперсанд (&) были закодированы со знаками процента и шестнадцатеричным представлением символов в кодировке UTF-8.

Символ пробела обрабатывается по-разному; так как это очень часто при вводе пользователем, ему присваивают более короткий символ +, Это означает + должен быть также закодирован в процентах, так как %2B,

Код, который у вас есть, извлекает параметр GET name из URL. Если это там, последняя строка

return decodeURIComponent(results[2].replace(/\+/g, ' '));

сначала отменяет кодирование пробелов как +,

decodeURIComponent затем используется для получения значения параметра имени. Например, если пользователь ввел имя René Müller&勒内穆勒, браузер отправит name=Ren%C3%A9+M%C3%BCller%26%E5%8B%92%E5%86%85%E7%A9%86%E5%8B%92, а также decodeURIComponent выдаст оригинальный ввод ( попробуйте сами):

> decodeURIComponent('Ren%C3%A9 M%C3%BCller%26%E5%8B%92%E5%86%85%E7%A9%86%E5%8B%92')
'René Müller&勒内穆勒'