我们经常看到网页地址中有问号和等号。比如https://example.com?name=张三&age=20。这里的name=张三和age=20就是URL参数。

这些参数很重要。它们可以传递用户信息、搜索关键词、页面状态等。网站需要读取这些参数来展示正确的内容。

以前，需要写很多代码来获取参数。现在，可以用一个简单方法，一行代码搞定！

传统方法的麻烦

先看看过去怎么获取URL参数：

function getUrlParams() {
  var params = {};
  var query = window.location.search.substring(1);
  var pairs = query.split('&');
  
  for (var i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=');
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1] || '');
    params[key] = value;
  }
  
  return params;
}

var params = getUrlParams();
console.log(params.name); // 输出：张三

这个方法需要：

• • 10多行代码
• • 循环处理
• • 手动解码
• • 错误处理

很麻烦，对不对？

一行代码的解决方案

这是今天要介绍的核心代码：

const getParams = (url = window.location.href) => 
  Object.fromEntries(new URL(url).searchParams.entries());

使用起来很简单：

// 假设当前URL是：https://example.com?name=张三&age=20
const params = getParams();
console.log(params.name); // 输出：张三
console.log(params.age);  // 输出：20

代码逐行解析

第一层：箭头函数

const getParams = (url = window.location.href) => ...

这里定义了一个函数getParams：

• • 它接受一个参数url
• • 如果不传参数，默认使用当前页面URL
• • 使用箭头函数语法，更简洁

第二层：URL对象

new URL(url)

URL是浏览器内置的对象：

• • 它能自动解析URL的各个部分
• • 包含协议、域名、路径、参数等信息
• • 比手动分割字符串更可靠

第三层：searchParams

.searchParams

这是URL对象的属性：

• • 专门用来处理URL参数
• • 提供了很多方便的方法
• • 比如get()、has()、entries()等

第四层：entries()方法

.entries()

这个方法：

• • 返回所有参数的键值对
• • 格式是[key, value]的数组
• • 比如[['name', '张三'], ['age', '20']]

第五层：Object.fromEntries()

Object.fromEntries(...)

这是最关键的部分：

• • 把键值对数组转换成对象
• • [['name', '张三'], ['age', '20']]变成{name: '张三', age: '20'}
• • 这样就能用params.name的方式访问了

实际应用场景

场景1：用户信息展示

// URL: https://myapp.com?username=李四&vip=true
const params = getParams();

if (params.username) {
  document.getElementById('welcome').textContent = 
    `欢迎，${params.username}！`;
}

if (params.vip === 'true') {
  document.body.classList.add('vip-theme');
}

场景2：搜索功能

// URL: https://search.com?q=JavaScript教程&sort=date
const params = getParams();

if (params.q) {
  searchProducts(params.q, params.sort);
  document.getElementById('search-input').value = params.q;
}

场景3：分页和筛选

// URL: https://shop.com?page=2&category=electronics&price=high
const params = getParams();

loadProducts({
  page: params.page || 1,
  category: params.category,
  sortBy: params.price
});

兼容写法

如果需要支持旧浏览器：

function getParams(url) {
  url = url || window.location.href;
  var searchParams = new URLSearchParams(new URL(url).search);
  var params = {};
  
  for (var [key, value] of searchParams.entries()) {
    params[key] = value;
  }
  
  return params;
}

进阶用法

处理数组参数

有时候URL参数可能是数组形式：

// URL: https://example.com?tags=js&tags=html&tags=css
const params = getParams();
console.log(params.tags); // 只输出：css

// 正确处理方法：
const getAllParams = (url = window.location.href) => {
  const urlObj = new URL(url);
  const params = {};
  
  for (const [key, value] of urlObj.searchParams.entries()) {
    if (params[key]) {
      if (Array.isArray(params[key])) {
        params[key].push(value);
      } else {
        params[key] = [params[key], value];
      }
    } else {
      params[key] = value;
    }
  }
  
  return params;
};

类型转换

URL参数都是字符串，有时需要转换类型：

const getTypedParams = (url = window.location.href) => {
  const params = getParams(url);
  const result = {};
  
  for (const [key, value] of Object.entries(params)) {
    // 尝试转换为数字
    if (!isNaN(value) && value.trim() !== '') {
      result[key] = Number(value);
    } 
    // 处理布尔值
    else if (value === 'true' || value === 'false') {
      result[key] = value === 'true';
    }
    // 保持字符串
    else {
      result[key] = value;
    }
  }
  
  return result;
};

实用代码片段

这里是一些可以直接在项目中使用的代码：

基础版本

const getParams = (url = window.location.href) => 
  Object.fromEntries(new URL(url).searchParams.entries());

带默认值版本

const getParamsWithDefaults = (url = window.location.href, defaults = {}) => ({
  ...defaults,
  ...Object.fromEntries(new URL(url).searchParams.entries())
});

获取单个参数

const getParam = (name, url = window.location.href) => 
  new URL(url).searchParams.get(name);

使用方法很简单：把代码复制到你的项目中，调用getParams()就能获取所有URL参数。这个方案代码量少，容易理解，性能也很好。

阅读原文：原文链接