JavaScript三种获取URL参数值的方法

如何获取 URL 中的参数值是 JavaScript 开发中常见的需求。本文将分享三种获取 URL 参数值的方法，具体如下。

方法一：使用 URLSearchParams 对象

在现代浏览器中，可以使用 URLSearchParams 对象获取 URL 参数值。URLSearchParams 对象包含一些方法和属性，用于解析和操作 URL 的查询字符串。

以下是演示如何使用 URLSearchParams 对象获取 URL 参数值的示例代码：

// 实例化 URLSearchParams 对象
const urlParams = new URLSearchParams(window.location.search);

// 获取参数name的值
const name = urlParams.get('name');

// 获取参数age的值，指定默认值为18
const age = urlParams.get('age') || 18;

// 获取所有查询字符串参数
const paramsObj = Object.fromEntries(urlParams.entries());

console.log('name:', name); // 输出参数name的值
console.log('age:', age); // 输出参数age的值
console.log('params:', paramsObj); // 输出所有参数

在上面的示例代码中，我们首先通过实例化 URLSearchParams 对象来获取 URL 查询字符串部分，并利用 get() 方法获取参数 name 的值和 age 的值（如果 age 参数不存在，则使用默认值 18）。

接着，我们使用 entries() 方法获取所有查询字符串参数，并通过 Object.fromEntries() 方法将数组转换为对象。

方法二：使用正则表达式

使用正则表达式获取 URL 参数值是另一种可行的方法。正则表达式可以通过字符串匹配的方式取出 URL 查询字符串中的参数值。

以下是演示如何使用正则表达式获取 URL 参数值的示例代码：

// 定义获取URL参数的函数
function getQueryString(name) {
  const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
  const result = window.location.search.substr(1).match(reg);
  if (result) {
    return decodeURIComponent(result[2]);
  }
  return null;
}

// 调用获取URL参数的函数
const name = getQueryString('name');
const age = getQueryString('age') || 18;

console.log('name:', name); // 输出参数name的值
console.log('age:', age); // 输出参数age的值

在上面的示例代码中，我们定义了一个名为 getQueryString 的函数，通过正则表达式获取 URL 查询字符串中指定参数的值。

函数使用了 match() 方法返回一个有关匹配结果的数组，并通过 decodeURIComponent() 方法对参数值进行解码，以防止出现 URL 特殊字符的转义问题。

方法三：使用原生方法

在不支持 URLSearchParams 对象的浏览器中，我们可以使用原生方法获取 URL 参数值。该方法比较繁琐，并且需要了解 URL 查询字符串的格式。

以下是演示如何使用原生方法获取 URL 参数值的示例代码：

// 获取URL参数字符串
const queryString = window.location.search.replace(/^\?/, '');

// 查询参数数组
const queryArray = queryString.split('&');

// 查询参数对象
const queryObj = {};

// 循环处理查询参数
for (let i = 0; i < queryArray.length; i++) {
  const kv = queryArray[i].split('=');
  const k = decodeURIComponent(kv[0]);
  const v = decodeURIComponent(kv[1]);
  queryObj[k] = v;
}

// 获取参数name的值
const name = queryObj.name;

// 获取参数age的值，指定默认值为18
const age = queryObj.age || 18;

console.log('name:', name); // 输出参数name的值
console.log('age:', age); // 输出参数age的值

在上面的示例代码中，我们首先获取 URL 参数字符串，并通过 split() 方法将其转换为数组。接着，我们循环处理数组中的每个查询参数，并通过 decodeURIComponent() 方法对参数进行解码。

最后，我们将所有解码后的查询参数存储在一个对象中，并通过对象的 key 来获取相应的参数值。

以上三种方法均可用于获取 URL 查询参数值，具体选择哪种方法取决于具体需求。