如何通过 js 向 url 添加一些东西 - Javascript

在 web 开发中，我们经常需要通过 url 向服务端传递一些参数，来获取需要的数据。在这种情况下，我们可以通过 javascript 在 url 中添加一些东西。本文将介绍如何使用 javascript 来向 url 添加查询参数或 hash 值。

向 url 添加查询参数

要向 url 添加查询参数，我们可以使用 URLSearchParams 对象。这个对象是一个内置的 javascript 对象，可以通过它来处理 url 查询参数。

以下是如何使用 URLSearchParams 对象向 url 添加查询参数的示例代码：

const url = new URL("http://example.com");
const params = new URLSearchParams(url.search);
params.append("key", "value");
url.search = params.toString();
console.log(url.href);

在代码中，我们首先创建了一个新的 URL 对象，然后从 search 属性中获取了查询参数。接下来，我们使用 append 方法向查询参数对象中添加了一个新的参数。最后，我们将修改后的查询参数设置回 search 属性中。

执行上述代码后，会在控制台输出修改后的 url。输出结果如下：

http://example.com/?key=value

向 url 添加 hash 值

要向 url 添加 hash 值，我们可以使用 location.hash 属性。这个属性是一个字符串值，可以通过它来读取或修改当前 url 中的 hash 值。

以下是如何使用 location.hash 属性向 url 添加 hash 值的示例代码：

window.location.hash += "new-hash-value";
console.log(window.location.href);

在代码中，我们通过 window.location.hash 属性获取了当前 url 中的 hash 值，并在原有 hash 值的基础上添加了一个新的值。最后，我们通过 href 属性获取修改后的 url 并输出它。

执行上述代码后，会在控制台输出修改后的 url。输出结果如下：

http://example.com/#old-hash-value#new-hash-value

总结

本文介绍了如何使用 javascript 向 url 添加查询参数或 hash 值。我们使用了 URLSearchParams 对象和 location.hash 属性来实现这个功能。在实际开发中，我们可以根据具体的需求来选择使用哪一种方法。