1. 犀牛前端部落首页
  2. JavaScript百科

js获取URL参数

本文俺将跟大家介绍如何使用URLSearchParam访问和修改查询字符串值。

js获取URL参数
js获取URL参数

HTTP协议允许使用查询参数向web页面发出请求。

例如:

https://test.com/?name=roger
https://test.com/hello?name=roger

在本例中,我们有一个名为name的查询参数,其值为roger。

你可以有多个参数,像这样:

https://test.com/hello?name=roger&age=20

要在浏览器内访问查询的值,使用JavaScript,我们有一个特殊的API,称为URLSearchParam,它受到所有现代浏览器的支持:

我们可以这样使用:

const params = new URLSearchParams(window.location.search)

注意:不要将完整的URL作为参数传递给URLSearchParams(),而只传递URL的查询字符串部分,您可以使用window.location.search访问该部分。

在这个例子中:

https://test.com/hello?name=roger

window.location.search等于字符串?name=roger。

现在我们拥有params对象后,我们就可以访问他了。

检查一个值:

params.has('test')

获取一个值:

params.get('test')

你也可以使用for…of…遍历所有的查询参数。

const params = new URLSearchParams(window.location.search)
for (const param of params) {
  console.log(param)
}

查询参数可能有多个相同的key。

在本例中,我们多次传递相同的参数名,如下所示:

https://test.com/hello?name=roger&name=flavio

我们无法检测参数是否被多次传递。如果我们使用parms .get(‘name’),我们将只返回第一个值。

我们可以使用parms . getall (‘name’)来返回一个包含传递的所有值的数组。

除了has()、get()和getAll()之外,URLSearchParams API还提供了一些其他的方法,我们可以使用它们来遍历参数:

  • forEach()迭代参数
  • entries()返回一个包含参数key/values的迭代器
  • keys()返回包含参数键的迭代器
  • values()返回一个包含参数值的迭代器

其他改变参数的方法,在页面中运行的其他JavaScript中使用(它们不改变URL):

  • append()向对象追加一个新参数
  • delete()删除现有参数
  • set()设置参数的值

我们可以使用sort()对参数进行键值排序,并使用toString()方法从这些值生成查询字符串。

我们可以使用append() / set() / delete()来编辑查询字符串,并使用toString()生成一个新的查询字符串。

俺之前还有一篇文章是通过正则来获取URL参数,感兴趣的朋友,可以看这里。

javascript中获取url查询字符串值

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3200.html

发表评论

登录后才能评论