window.location.href or window.location.search

这两个属性返回不同的things:

href：是包含整个URL的DOMString。

和：

search:DOMString是否包含"？"然后是的参数URL。也称为"querystring"

因此，您可以使用其中一个，只需确保考虑到函数中返回值之间的差异。如果决定使用href属性，则需要先提取查询字符串部分（?之后的部分），然后再将其拆分为多个部分。

浏览器现在有一个URLSearchParams类，可以帮助解析搜索参数。它在现代浏览器中已经存在了近4年：https://caniuse.com/?search=URLSearchParams

let queryParams = new URLSearchParams(window.location.search)
queryParams.set('page', '1')
queryParams.toString()
queryParams.get('page')
queryParams.delete('page')

i使用

var qr={};
window.location.search.substring(1).split("&").forEach(p => { qr[p.split("=")[0]] = p.split("=")[1] })
//use
console.log(qr["sample"]);
//or
console.log(qr.sample);

注意-如果没有location.href.search值，则会得到一个空字符串。

您可以使用浏览器的Inspect功能来查看值，从而探索页面（任何页面）的DOM。

使用这个过程，您可以学到很多关于DOM的知识，甚至比大多数人听说的都要多。

打开检查器（如何取决于浏览器，但请尝试右键单击页面上的任何位置，并检查您将看到的下拉菜单-它可能显示为Inspect或Inspect Object。

打开检查器后，单击检查器框架顶部菜单中的控制台。

对于Foxfire，输入行位于检查器窗口的底部，前缀为>>

注意：Chrome显示了一个多行输入字段，Firefox只显示了一行字段。如果你有Chrome-用它来检查东西，在你键入一些东西并按Enter键后，你想要的值将显示在你键入的内容下，光标向下移动到下一个空行，这样你就可以输入其他内容。

Firefox允许您查看内容，但它笨重且有点难以使用。

在输入行或字段中，键入：

文档.位置.

将显示文档位置（URL）的所有属性列表，并自动填写以帮助您。

例如：

document.location.search将显示URL 中#符号后面的URL中的任何文本

document.location.htm将向您显示整个URL

document.location.host将显示URL 的主机部分

实验并查看document.location列出的所有属性，您将了解到有关document.location.properties的更多信息。

您也可以键入window。并查看窗口对象的属性列表，其中一个属性将是document。

您可以通过键入window.document.location.href 来增加键入难度，而不是键入document.location.htm

它们产生相同的结果，因为顶部属性总是被假定为window。

对于Firefox-在您键入内容并点击回车键后，结果将显示在输入行上方。要调出上次键入的内容，以便进行更改，请在光标位于输入行时按向上箭头键。

使用Chrome-正如我上面所说，当你按下回车键时，值将显示在你刚刚键入的行中，光标将向下移动到下一个空白行，你可以在那里输入另一个属性的名称，以查看它的值。

探索顶部。和自我。-您会发现是顶部窗口对象（如果页面上有多个框架，而不是iframes）和当前窗口。

花一些时间探索window的属性。自己顶部将教你很多关于DOM（文档对象模型）的知识，而这些知识你可能从来没有遇到过。

如果没有看到输入字段或行，请确保单击检查器顶部菜单中的Console。

如果你决定使用document.location.href，你会在JavaScript中这样编码来获取值或设置值——你可以更改href，让浏览器转到另一个网页。

注意-另一个答案说

"如果您决定使用href属性，则需要先提取查询字符串部分（？之后的部分），然后再将其拆分为多个部分"

你不需要拆分任何内容。浏览document.location的所有属性，你会发现你可以从位置字符串中获得已经"拆分"的哈希、搜索等。

Hash是URL 中英镑符号（#）后的值

Search是URL 中问号（？）后的值

以下是一些其他内容：

document.links
document.links[0]
document.URL
document.body

只要浏览一下DOM，你就会学到很多东西。

我假设你知道javascript数组和几个方法

---

使用窗口.location.href

var url="site.com/seach？a＝val0&b=val1'

拆分"？"

var someArray=url.split（'？'）；

someArray看起来像这样['site.com/seach'，'a=1000&b=c']索引0是窗口位置，索引1是queryString

var queryString=someArray[1]；

继续分裂所以你得到一个密钥=值

var keyValue=queryString.split（'&'）；

keyVal看起来像这样[aa=val0'，'b=val1']；

现在让我们获取键和值。

var keyArray=[]，valArray=[]；

循环keyValue数组并拆分"="更新keyArray和valArray

对于（var i=0；i<keyValue.length；i++）{

key=keyValue[i].split（'='）[0]；

val=keyValue[i].split（'='）[1]；

keyArray.push（键）；

valArray.push（val）；

}

最后我们有

keyArray=['a'，'b']；

valArray=['val0'，'val1']；

我们的完整代码是这样的。

var url="site.com/seach？a＝val0&b=val1'；

var someArray=url.split（'？'）；

var queryString=someArray[1]；

var keyValue=queryString.split（'&'）；

var keyArray=[]，valArray=[]；

对于（var i=0；i<keyValue.length；i++）{

key=keyValue[i].split（'='）[0]；

val=keyValue[i].split（'='）[1]；

keyArray.push（键）；

valArray.push（val）；

}

完成！