URLSearchParams 不会返回与 URL 参数中找到的字符串相同的字符串

Question

至少在 Chrome 中是这样。如果我的窗口的 URL 是

https://www.google.com/search?q=JavaScript+URLSearchParams

并且我在 JavaScript 控制台中运行此命令：

url = new URL(document.URL);
urlsp = url.searchParams;
console.log(urlsp.get("q"));

然后记录到控制台的不是

JavaScript+URLSearchParams

，而是

JavaScript URLSearchParams

。这很痛苦，因为我尝试编写的用户脚本需要访问

q

参数的实际值；浏览器对 和

+

的处理方式不同。当然，我可以编写一些代码将 URL 作为字符串处理，但这会很乏味且容易出错。参数中的值

%3A

也会发生同样的情况，但它会以

:

的形式返回。如何让 URLSearchParams 返回 URL 参数的实际值？

Answer 1

URLSearchParams

是 parsed 搜索参数的表示。解析（此处指定）包括对值进行解码。

如果您不想解析搜索参数，而只是例如按 & 符号和 = 符号分开，然后不要使用

url.searchParams

。请改用

url.search

，并自行执行拆分。

Answer 2

我可以编写一些将 URL 作为字符串处理的代码，但是 这将是乏味且容易出错的

我不知道，这是一个相当新的 API，我们已经在没有它的情况下正常生存了很长一段时间。无论如何它都有问题，最后我检查了API不支持像

foo[]=1&foo[]=2

这样的参数数组。它确实不是很复杂，也不需要那么多代码来自行编写：

class UrlParams {
   constructor(search) {
      this.qs = (search || location.search).substr(1);
      this.params = {};
      this.parseQuerstring();
   }
   parseQuerstring() {
      this.qs.split('&').reduce((a, b) => {
        let [key, val] = b.split('=');
        a[key] = decodeURIComponent(val).replaceAll('+', ' ');
        return a;
      }, this.params);
   }
   get(key) {
      return this.params[key];
   }
}

const params = new UrlParams('?q=Javascript+Stuff');
console.log(params.get('q'));

Answer 3

url = new URL(document.URL);
urlsp = url.searchParams;
console.log(encodeURI(urlsp.get("q")));

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

Answer 4

试试这个，一定会成功的！

 var params = new window.URLSearchParams(window.location.search);
     console.log(params.get('invitationCode'))