location的用法js

location的用法js
使用location的方法和属性来操作URL
`location`是JavaScript中的一个对象，它提供了方法和属性来操作URL。

URL是网址的标识符，它包含了网站的域名、路径和其他参数等信息。

在这篇文章中，我们将学习如何使用`location`对象来操作URL。

1. 获取当前URL
首先，让我们看一下如何获取当前页面的URL。

`location`对象的`href`属性返回当前页面的URL字符串。

javascript
console.log(location.href);
以上代码将在控制台输出当前页面的URL。

2. 改变当前URL
有时候，我们可能需要改变当前页面的URL。

`location`对象的`assign()`方法可以用于这个目的。

javascript
location.assign("
上述代码将把当前页面的URL重定向到`
3. 重载当前页面
如果我们希望刷新当前页面，可以使用`reload()`方法。

javascript
location.reload();
这个方法将重新加载当前页面，相当于用户点击浏览器的刷新按钮。

4. 获取URL的各个部分
`location`对象的其他属性可以帮助我们获取URL的不同部分。

- `hostname`属性返回URL的主机名，例如`
- `pathname`属性返回URL的路径名，例如`/blog/post/123`。

- `search`属性返回URL的查询字符串，例如
`?id=123&category=javascript`。

javascript
console.log(location.hostname);
console.log(location.pathname);
console.log(location.search);
5. 解析查询参数
通过解析查询参数，我们可以轻松地获取URL中的参数值。

`search`属性返回的是一个包含所有查询参数的字符串，我们可以使用
`URLSearchParams`对象来解析它。

javascript
const params = new URLSearchParams(location.search); console.log(params.get("id")); 输出查询参数"id"的值
console.log(params.get("category")); 输出查询参数"category"的值以上代码将输出URL中对应查询参数的值。

6. 更改URL的查询参数
有时候，我们可能需要修改URL的查询参数。

`URLSearchParams`对象提供了一些方法来实现这个目的。

javascript
创建一个URLSearchParams对象
const params = new URLSearchParams(location.search);
修改查询参数的值
params.set("id", "456");
params.set("category", "web development");
更新URL的查询参数
location.search = params.toString();
上述代码将更新URL的查询参数，并将页面重定向到带有更新参数的新URL。

7. 替换URL的查询参数
除了修改查询参数的值外，我们还可以替换URL的查询参数。

这可以通过更改`searchParams`属性来实现。

javascript
const params = new URLSearchParams(location.search);
替换查询参数的值
params.set("id", "789");
params.set("category", "frontend");
替换URL的查询参数
history.replaceState(null, "", `{location.pathname}?{params}`);
上述代码将替换URL的查询参数，并且不会导致页面被重定向。

8. 重写URL
如果我们希望将当前页面的URL重写为一个新的URL，我们可以使用`replace()`方法。

javascript
location.replace("
上述代码将当前页面的URL替换为`
总结
在这篇文章中，我们学习了如何使用`location`对象来操作URL。

我们了解了如何获取当前URL、改变当前URL、重载当前页面，以及获取和修改URL的各个部分。

我们还学习了如何解析查询参数、更改URL的查询参数、替换URL的查询参数，以及将页面的URL重写为一个新的URL。

通过掌握`location`对象的方法和属性，我们可以很容易地处理和操作URL，为我们的应用程序增加更多功能和灵活性。