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是解析的搜索参数的表示。解析（在此处指定）包括解码值。

如果您不想解析搜索参数，而只想在＆符号和 = 符号上进行拆分，则不要使用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] = val;
        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