#全球第六代荣放中国交付备受关注#

我们经常看到网页地址中有问号和等号。比如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=20const 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=trueconst 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=dateconst 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=highconst 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=cssconst 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参数。这个方案代码量少，容易理解，性能也很好。