如何在不刷新页面的情况下使用 JavaScript 从 window.location 中删除哈希？

在 Web 开发中，通过 window.location 属性可以获取当前页面的 URL 信息。如果当前 URL 中包含哈希（#）部分，那么该哈希部分可以用于页面内部的定位，或者用于实现前端路由等功能。但是有时候我们需要在不刷新页面的情况下删除这个哈希部分，本文将介绍如何使用 JavaScript 实现这个操作。

方法一：使用 window.location.hash 属性

window.location.hash 属性返回 URL 中的哈希部分，可以直接通过赋值的方式将其删除。代码示例：

window.location.hash = "";

但是这种方法有一个问题，它会在 URL 中添加一个新的历史记录。也就是说，如果用户在页面中使用了前进或后退按钮，会回退到带有哈希的 URL。

方法二：使用 history.replaceState 方法

history.replaceState 方法可以修改浏览器的历史记录，但是不会添加新的历史记录。因此，我们可以通过该方法修改 URL，从而实现删除哈希的效果。代码示例：

history.replaceState(null, null, window.location.pathname + window.location.search);

其中，第一个参数和第二个参数都为 null，表示不需要额外的数据和标题信息。第三个参数是一个新的 URL，由当前页面的路径和查询参数组成，不包含哈希部分。

注意事项

需要注意的是，如果当前 URL 没有哈希部分，那么这两种方法都不会产生任何效果。因此，在执行代码之前，需要判断当前页面的 URL 中是否包含哈希部分。代码示例：

if (window.location.hash) {
  history.replaceState(null, null, window.location.pathname + window.location.search);
}

这里使用了 if 语句判断当前 URL 是否包含哈希部分，如果有，才会执行删除操作。

总结

本文介绍了两种方法，可以在不刷新页面的情况下删除 window.location 中的哈希部分。第一种方法可以通过直接修改 window.location.hash 属性实现，但是会产生新的历史记录。第二种方法使用 history.replaceState 方法修改 URL，不会产生新的历史记录。在实际使用中，需要根据需求选择合适的方法。