有人能告诉我为什么我们需要 decodeURIComponent

can someone tell me the why we need decodeURIComponent

我有这段代码,我找不到任何解释。当我用谷歌搜索 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, ' '));
}

这是URLhttp://localhost:8000/restaurant.html?id=2

那么,有人可以为我解释这段代码吗?

As defined in the RFC 3986,URI只能包含字符-_.~a-zA-Z0-9:/?#[]@!$&'()*+,;=,后一组有一些特殊的含义。通过限制这些字符,URLs 被清楚地分隔(通常由 space 或换行符)并且通过代理和其他无法处理 non-ASCII 字符的服务生存。

如果您填写 GET 表单,用户输入将被编码。比如if you google for Hellö Lädies&Gentlemen+Bob,浏览器会请求

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

您看到所有 non-ASCII 字符和符号 (&) 都已使用百分号和 UTF-8 encoding.

中字符的十六进制表示进行了编码

space字符处理不同;因为它在用户输入中 非常 常见,所以它被分配了较短的字符 +。这意味着 + 也必须是 percent-encoded,因为 %2B.

您的代码从 URL 中提取 GET 参数 name。如果它在那里,最后一行

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

首先撤销spaces的编码为+

decodeURIComponent is then used to get the value of the name parameter. For instance, if the user inputted a name of name of René Müller&勒内穆勒, the browser will send name=Ren%C3%A9+M%C3%BCller%26%E5%8B%92%E5%86%85%E7%A9%86%E5%8B%92, and decodeURIComponent will yield the original input (try it yourself):

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