正文

轻松掌握：JS获取地址栏参数的5种实用方法，快速上手实战技巧

/0 浏览量
0717

在Web开发中，经常需要从URL地址中获取特定的参数值，例如查询字符串。JavaScript为我们提供了多种获取地址栏参数的方法。下面，我将详细介绍五种常用的方法，帮助大家快速上手并应用于实战。

方法一：使用window.location.search

window.location.search属性可以获取当前页面的查询字符串。查询字符串是URL中?后面的部分。

function getQueryParam(param) {
  const queryParams = window.location.search.substring(1); // 去除开头的'？'
  const params = queryParams.split('&');
  for (let i = 0; i < params.length; i++) {
    const pair = params[i].split('=');
    if (pair[0] === param) {
      return pair[1];
    }
  }
  return null;
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出：123

方法二：使用URLSearchParams

URLSearchParams是一个构建在URL接口之上的构造函数，用于解析URL的查询字符串。

function getQueryParam(param) {
  const params = new URLSearchParams(window.location.search);
  return params.get(param);
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出：123

方法三：使用RegExp

使用正则表达式匹配查询字符串中的参数。

function getQueryParam(param) {
  const regex = new RegExp('[?&]' + param + '(=([^&#]*)|&|#|$)');
  const results = regex.exec(window.location.href);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出：123

方法四：使用location.hash

location.hash属性可以获取URL中的哈希值。哈希值是URL中#后面的部分。

function getQueryParam(param) {
  const hash = location.hash.substring(1);
  const params = hash.split('&');
  for (let i = 0; i < params.length; i++) {
    const pair = params[i].split('=');
    if (pair[0] === param) {
      return pair[1];
    }
  }
  return null;
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出：123

方法五：使用第三方库

虽然上述方法已经足够应对大多数场景，但在一些复杂场景下，使用第三方库可以更加方便和高效。例如，可以使用query-string库。

// 安装 query-string
// npm install query-string

function getQueryParam(param) {
  const params = require('query-string').parse(window.location.search);
  return params[param];
}

// 使用示例
const userId = getQueryParam('userId');
console.log(userId); // 输出：123

通过以上五种方法，相信你已经能够轻松掌握JavaScript获取地址栏参数的技巧。在实际开发中，可以根据具体场景选择合适的方法，以提高开发效率和代码的可读性。

-- 展开阅读全文 --