从 URL 获取值 - JavaScript

我们经常需要从 URL 中获取参数值。这种操作是 Web 开发中非常普遍的一种需求。在本文中，我们将介绍如何使用 JavaScript 从 URL 中获取值。

获取 URL

我们可以使用 JavaScript 中的window.location对象获取当前 URL。window.location对象包含了许多属性，如下所示：

• hash：返回 URL 中的散列值（锚点标签）
• host：返回 URL 的主机名和端口号
• hostname：返回 URL 的主机名
• href：返回完整的 URL
• pathname：返回 URL 的路径部分
• port：返回 URL 的端口号
• protocol：返回 URL 的协议部分

以下是获取当前 URL 的代码：

const url = window.location.href;
console.log(url); // 打印完整的 URL

解析 URL

我们可以使用URLSearchParams对象解析 URL 中的查询参数。URLSearchParams对象主要提供了如下几个操作：

• append(name, value)：添加指定名称和值的参数
• delete(name)：删除指定名称的参数
• get(name)：返回指定名称的参数值
• getAll(name)：返回指定名称的参数数组
• has(name)：检查是否存在指定名称的参数
• set(name, value)：设置指定名称的参数值

以下是解析 URL 中的查询参数的代码：

const searchParams = new URLSearchParams(window.location.search); // 获取查询参数
const name = searchParams.get('name'); // 获取名为 "name" 的参数值
console.log(name); // 打印名为 "name" 的参数值

获取 URL 中的特定值

现在，我们将学习如何从 URL 中获取特定的值。我们可以通过拆分 URL 字符串来实现此操作。以下是获取 URL 中的指定参数值的代码：

function getParam(name) {
  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get(name);
}

const name = getParam('name'); // 获取名为 "name" 的参数值
console.log(name); // 打印名为 "name" 的参数值

结论

现在，我们已经学会了如何使用 JavaScript 从 URL 中获取值。在 Web 开发中，这是一个非常常见的需求。以上介绍的方法可以让您轻松地从 URL 中获取所需的参数值。