手把手教你用JS提取URL参数（超简单，小白秒懂！）

想知道HTML中如何利用JS提取URL参数吗？本文手把手教你搞定queryString，轻松实现页面跳转时参数的保留与传递！获取URL参数是前端开发中的常见需求，无论是页面跳转后的条件保持，还是根据URL中的ID加载不同数据，都离不开它。本文将介绍三种核心方法：自定义函数解析、利用URLSearchParams对象以及页面跳转时拼接URL。我们将深入探讨如何处理URL编码、解决同名参数问题，并提供简洁高效的URLSearchParams使用技巧，助你彻底掌握JS提取URL参数的精髓，提升你的Web开发效率！

获取URL参数的方法有三种：1.自定义函数解析，通过分割字符串提取键值对并处理编码；2.使用URLSearchParams对象，通过get和getAll方法获取参数；3.页面跳转时通过拼接URL或合并新旧参数保留参数。第一种方法需手动处理分割与解码且无法直接支持多同名参数，但可通过数组存储解决；第二种方法更简洁且内置解码功能；第三种方法在跳转时动态生成包含旧参数的新URL以实现参数保留。

获取URL参数，简单来说就是从浏览器地址栏里提取问号后面的东西，然后拆解成JS可以用的对象。这事儿看似简单，但用处可大了，比如页面跳转后保留搜索条件，或者根据URL里的ID加载不同的数据。

function getQueryStringParams() {
  const params = {};
  const search = window.location.search.substring(1); // 去掉问号
  if (search) {
    search.split('&').forEach(pair => {
      const [key, value] = pair.split('=');
      params[key] = decodeURIComponent(value || ''); // 解码，处理特殊字符
    });
  }
  return params;
}

const urlParams = getQueryStringParams();
console.log(urlParams.id); // 假设URL里有id参数

这段代码首先获取URL的search部分，也就是问号后面的字符串。然后，把它按&分割成键值对，再按=分割键和值。decodeURIComponent是为了处理URL编码的字符，比如空格会被编码成%20。

如何处理URL中多个相同参数名的情况？

有时候，URL里会有多个相同名字的参数，比如?tag=javascript&tag=html&tag=css。上面的代码只能获取到最后一个tag的值。要处理这种情况，需要稍微修改一下代码：

function getQueryStringParams() {
  const params = {};
  const search = window.location.search.substring(1);
  if (search) {
    search.split('&').forEach(pair => {
      let [key, value] = pair.split('=');
      value = decodeURIComponent(value || '');
      if (params[key]) {
        if (Array.isArray(params[key])) {
          params[key].push(value);
        } else {
          params[key] = [params[key], value];
        }
      } else {
        params[key] = value;
      }
    });
  }
  return params;
}

const urlParams = getQueryStringParams();
console.log(urlParams.tag); //  ["javascript", "html", "css"]

这段代码会检查params对象里是否已经存在同名的键。如果存在，并且已经是一个数组，就直接把新的值push进去；如果存在但不是数组，就把原来的值和新的值一起放到一个数组里。

除了自己写函数，还有什么更方便的方法获取URL参数？

现代浏览器提供了一个更方便的API：URLSearchParams。用它可以更简洁地获取URL参数：

const urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.get('id')); // 获取单个参数
console.log(urlParams.getAll('tag')); // 获取所有同名参数

// 还可以遍历所有参数
for (const [key, value] of urlParams.entries()) {
  console.log(`${key}: ${value}`);
}

URLSearchParams的优势在于它更简洁，而且已经内置了URL解码的功能，不需要手动调用decodeURIComponent。

如何在页面跳转时保留URL参数？

一个常见的需求是在页面跳转后，保持原来的URL参数。比如，从商品列表页跳转到商品详情页，需要把商品ID传过去。这可以通过在跳转链接里拼接参数来实现：

查看商品

或者，用JS动态生成URL：

const productId = 123;
window.location.href = `product.html?id=${productId}`;

更复杂的情况是，需要在跳转时合并新的参数和旧的参数。可以先获取旧的参数，然后合并到新的参数里，再生成新的URL。

function mergeParamsAndRedirect(url, newParams) {
  const urlParams = new URLSearchParams(window.location.search);
  for (const key in newParams) {
    urlParams.set(key, newParams[key]);
  }
  window.location.href = `${url}?${urlParams.toString()}`;
}

// 示例：跳转到product.html，同时保留旧的参数，并添加新的参数
mergeParamsAndRedirect('product.html', { category: 'electronics' });

这种方法可以确保在页面跳转后，所有的参数都被保留下来。

理论要掌握，实操不能落！以上关于《手把手教你用JS提取URL参数（超简单，小白秒懂！）》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！