JavaScript中如何获取URL参数4种常见方法详解

方法一：使用URLSearchParams对象

URLSearchParams是一个内置的JavaScript对象，可以用于处理URL查询字符串。可以通过实例化URLSearchParams对象并传入URL参数来获取参数值。

  const params = new URLSearchParams(window.location.search);
  const param1 = params.get('param1');
  const param2 = params.get('param2');
  // ...

方法二：使用正则表达式

使用正则表达式来匹配URL中的参数，然后提取参数值。

  function getParamValue(name) {
    const regex = new RegExp('[?&]' + name + '=([^&]+)');
    const results = regex.exec(window.location.search);
    if (results === null) {
      return null;
    }
    return decodeURIComponent(results[1]);
  }
  const param1 = getParamValue('param1');
  const param2 = getParamValue('param2');
  // ...

方法三：使用split()方法

使用split()方法将URL字符串分割成包含参数的数组，然后进一步提取参数值。

  function getParamValue(name) {
    const params = window.location.search.substr(1).split('&');
    for (const param of params) {
      const [key, value] = param.split('=');
      if (decodeURIComponent(key) === name) {
        return decodeURIComponent(value);
      }
    }
    return null;
  }
  const param1 = getParamValue('param1');
  const param2 = getParamValue('param2');
  // ...

方法四：使用URL对象

使用URL对象的searchParams属性来获取URL参数值。

  const url = new URL(window.location.href);
  const param1 = url.searchParams.get('param1');
  const param2 = url.searchParams.get('param2');
  // ...

以上四种方法都可以用来在JavaScript中获取URL参数值。选择使用哪种方法取决于个人偏好和项目要求。使用URLSearchParams对象可以提供丰富的URL参数处理功能，而正则表达式和split()方法则更加灵活。使用URL对象可以方便地获取URL的各个部分。