在 JavaScript 中的 URL 中传递参数

在 Web 应用程序中，我们通常需要通过 URL 来传递参数。这里将介绍如何在 JavaScript 中的 URL 中传递参数。

传递参数的方式

1. 查询字符串

查询字符串是指 URL 中?后的参数键值对，多个参数使用&连接。例如：

http://example.com/index.html?key1=value1&key2=value2

JavaScript 中可以使用window.location.search来获取查询字符串，但需要注意的是返回的值包含?。

const queryString = window.location.search.substr(1); // 去掉 '?'
const params = new URLSearchParams(queryString);
console.log(params.get("key1")); // "value1"
console.log(params.get("key2")); // "value2"

2. URL 路径

URL路径是指 URL 中除去协议、主机和端口号之外的部分。例如：

http://example.com/customers/123/orders/456

这个 URL 中包含了两个参数，123和456。

JavaScript 中可以使用window.location.pathname来获取 URL 路径。但需要注意的是返回的值包含了 URL 的文件名，需要我们自己解析出参数。

const pathArray = window.location.pathname.split("/"); // 分割路径
const customerId = pathArray[2]; // "123"
const orderId = pathArray[4];   // "456"

3. 哈希

哈希是指 URL 中#后的字符串，通常用来定位某个位置或状态。例如：

http://example.com/index.html#section3

JavaScript 中可以使用window.location.hash来获取哈希值，但需要注意的是返回的值包含了#。

const hashString = window.location.hash.substr(1); // 去掉 '#'
console.log(hashString); // "section3"

传递参数的示例

下面是一个传递参数的示例，使用查询字符串和哈希来传递参数。

http://example.com/index.html?name=Peter#section3

JavaScript 代码如下：

const queryString = window.location.search.substr(1); // 去掉 '?'
const params = new URLSearchParams(queryString);
const name = params.get("name"); // "Peter"

const hashString = window.location.hash.substr(1); // 去掉 '#'
console.log(hashString); // "section3"

总结

以上是在 JavaScript 中的 URL 中传递参数的介绍，通过查询字符串、URL 路径和哈希三种方式来传递参数。同样的方式也可以在后端语言中使用。