如何获取参数 url js - Javascript

在Javascript中，我们可以通过URL获取多个参数，并且可以在页面刷新时保留这些参数。本文将介绍如何获取URL中的参数。

获取URL参数

获取URL参数的方法有很多种，下面介绍3种：

使用URLSearchParams

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

上面的代码首先通过window.location.search获取到URL中的查询字符串，然后使用URLSearchParams将其解析为参数列表。最后，通过get方法获取参数的值，参数名称作为参数传递。

使用正则表达式

function getParam(name) {
  const reg = new RegExp(`[?&]${name}=([^&]*)`);
  const match = window.location.search.match(reg);
  return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

const myParam = getParam('myParam');

上面的代码定义了一个getParam函数，通过正则表达式匹配URL中的参数。其中，decodeURIComponent用于解码参数值，并替换+号为空格。

使用split和reduce

function getParams() {
  const params = window.location.search
    .slice(1)
    .split('&')
    .reduce((params, param) => {
      const [key, value] = param.split('=');
      params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
      return params;
    }, {});

  return params;
}

const params = getParams();
const myParam = params.myParam;

上面的代码定义了一个getParams函数，首先使用slice去掉URL中的?号，然后使用split和reduce将字符串解析为一个参数对象，最后通过属性访问获取参数的值。

保留URL参数

在JavaScript中，我们可以使用URLSearchParams和URL对象设置URL参数。例如：

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);

params.set('myParam', 'myValue');

url.search = params.toString();
window.location.replace(url);

上面的代码首先获取URL对象，然后使用URLSearchParams设置参数，最后通过toString方法将参数转换为字符串来更新URL。最后使用location.replace方法在不影响历史记录的情况下重新加载页面。

现在，我们已经了解了如何获取URL参数和如何保留URL参数，可以在需要时使用这些技术来处理URL。