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

Question

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

这是网址 http://localhost:8000/restaurant.html?id=2

那么，有人可以为我解释这段代码吗？

Answer 1

As defined in the RFC 3986 , URI 只能包含字符 -_.~a-zA-Z0-9 和 :/?#[]@!$&'()*+,;=，其中后一组有一些特殊的含义。通过限制这些字符，URL 被清楚地分隔(通常由空格或换行符)并通过代理和其他无法处理非 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

您会看到所有非 ASCII 字符和符号 (&) 都已使用百分号和 UTF-8 encoding 中字符的十六进制表示进行了编码.

空格字符的处理方式不同；因为它在用户输入中非常常见，所以它被分配了较短的字符 +。这意味着 + 也必须进行百分比编码，如 %2B。

您的代码从 URL 中提取 GET 参数 name。如果有，最后一行

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 将产生原始输入 ( 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&勒内穆勒'