1. 从window.location到URL对象：前端URL处理的进化史
十年前我刚入行前端时，处理URL参数最常用的方式就是手动解析window.location.search。那时候经常要写这样的代码：
function getParam(name) { const search = window.location.search.substring(1); const params = search.split('&'); for(const param of params) { const [key, value] = param.split('='); if(key === name) return decodeURIComponent(value); } return null; }这种方式虽然能用，但存在几个明显问题：需要手动处理编码解码、无法便捷地修改参数、对复杂URL结构支持不好。随着Web应用越来越复杂，这种原始方法逐渐显得力不从心。
现代Web开发中，我们有了更强大的工具——URL和URLSearchParams API。这两个API提供了完整的URL解析和操作能力，让URL处理变得前所未有的简单。比如上面的功能现在可以这样实现：
const url = new URL(window.location.href); const paramValue = url.searchParams.get('name');2. 传统location对象详解
2.1 location的核心属性
window.location对象提供了访问当前页面URL各个部分的能力，这些属性都是只读的（除了href和assign()方法可以导航）：
- href：完整URL字符串
- protocol：协议部分（包含冒号）
- host：主机名+端口号
- hostname：主机名（不含端口）
- port：端口号
- pathname：路径部分（以/开头）
- search：查询字符串（包含问号）
- hash：片段标识符（包含井号）
实际项目中，我经常用location.host来动态配置API基础地址：
const apiBase = `${location.protocol}//${location.host}/api`;2.2 location的局限性
虽然location对象很实用，但在实际开发中我发现几个痛点：
- 修改URL困难：直接修改location属性会导致页面刷新
- 参数处理繁琐：需要手动解析search字符串
- 相对路径处理缺失：无法直接解析相对路径
- 编码问题：需要手动处理encode/decodeURIComponent
特别是在SPA应用中，这些限制更加明显。有次我需要实现一个复杂的分页筛选功能，用location处理参数差点让我崩溃——各种字符串拼接和编码问题层出不穷。
3. 现代URL API深度解析
3.1 创建URL对象
URL构造函数接受1-2个参数：
// 绝对URL const absUrl = new URL('https://example.com/path?q=1'); // 相对URL（需要base） const relUrl = new URL('/new-path', 'https://example.com');我在项目中遇到过的一个常见错误是忘记处理base URL。有次在Node.js环境中解析URL时直接用了new URL('/api')，结果报错——在非浏览器环境必须提供base参数。
3.2 URL对象的实用属性
URL对象提供了比location更丰富的属性，其中一些特别有用的：
- origin：只读的协议+主机+端口
- searchParams：URLSearchParams实例
- username/password：支持认证信息
一个实用的技巧是利用origin属性实现跨域检测：
function isSameOrigin(url) { return new URL(url).origin === location.origin; }3.3 修改URL的实践技巧
与location不同，URL对象的属性是可写的：
const url = new URL(location.href); url.pathname = '/new-path'; url.searchParams.set('page', '2'); history.pushState({}, '', url);在电商项目中，我常用这种方式实现无刷新筛选：
function updateFilter(key, value) { const url = new URL(location.href); url.searchParams.set(key, value); history.replaceState({}, '', url); loadResults(); }4. URLSearchParams：查询参数的专业管家
4.1 基本使用方法
URLSearchParams提供了直观的参数操作接口：
const params = new URLSearchParams('?q=js&page=1'); params.get('q'); // 'js' params.has('page'); // true params.append('sort', 'desc');相比传统方式，它有三大优势：
- 自动处理编码/解码
- 支持多种参数类型
- 提供便捷的操作方法
4.2 高级特性解析
处理数组参数：
const params = new URLSearchParams(); params.append('color', 'red'); params.append('color', 'blue'); params.getAll('color'); // ['red', 'blue']迭代参数：
for(const [key, value] of params) { console.log(key, value); }在实际项目中，我封装了一个常用的参数处理工具：
function getUrlParams() { const params = new URLSearchParams(location.search); return Object.fromEntries( Array.from(params.keys()).map(key => [key, params.getAll(key).length > 1 ? params.getAll(key) : params.get(key)] ) ); }5. 实战对比与兼容性方案
5.1 新旧API对比示例
获取单个参数：
// 旧方式 function getParam(name) { const match = location.search.match(new RegExp(`[?&]${name}=([^&]*)`)); return match ? decodeURIComponent(match[1]) : null; } // 新方式 const value = new URL(location.href).searchParams.get(name);设置多个参数：
// 旧方式 function setParams(obj) { const params = Object.entries(obj) .map(([k,v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`) .join('&'); location.search = `?${params}`; } // 新方式 function setParams(obj) { const url = new URL(location.href); Object.entries(obj).forEach(([k,v]) => url.searchParams.set(k,v)); history.pushState({}, '', url); }5.2 兼容性处理方案
虽然现代浏览器都支持这些API，但在老旧项目中可能需要polyfill。我常用的方案是：
// 简单的URLSearchParams polyfill if(!window.URLSearchParams) { window.URLSearchParams = class { constructor(search) { this.params = new Map(); (search.startsWith('?') ? search.slice(1) : search) .split('&') .forEach(pair => { const [k,v] = pair.split('='); this.append(k, v); }); } // 实现必要的方法... }; }对于IE用户较多的项目，我会使用core-js提供的完整polyfill：
import 'core-js/features/url'; import 'core-js/features/url-search-params';6. 最佳实践与常见陷阱
6.1 安全注意事项
处理URL时容易忽略的安全问题：
- XSS风险：直接将未处理的参数插入DOM
- 开放重定向：未验证的重定向URL
- 参数注入：未过滤的参数直接用于SQL或命令
安全示例：
// 不安全的做法 const redirect = new URL(location.href).searchParams.get('redirect'); location.href = redirect; // 可能被利用 // 安全的做法 const url = new URL(location.href); const redirect = url.searchParams.get('redirect'); if(redirect && isAllowedRedirect(redirect)) { location.href = redirect; }6.2 性能优化技巧
- 复用URL实例：避免重复创建
- 惰性解析：只在需要时解析
- 批量操作：减少history操作
优化示例：
let cachedUrl = null; function getCurrentUrl() { if(!cachedUrl) { cachedUrl = new URL(location.href); } return cachedUrl; } // 监听URL变化 window.addEventListener('popstate', () => { cachedUrl = null; // 清除缓存 });7. 综合应用案例
7.1 分页组件实现
class Pagination { constructor() { this.url = new URL(location.href); this.pageSize = 10; } get currentPage() { return parseInt(this.url.searchParams.get('page') || '1'); } nextPage() { this.url.searchParams.set('page', this.currentPage + 1); history.pushState({}, '', this.url); this.load(); } load() { const {page} = Object.fromEntries(this.url.searchParams); fetch(`/api/data?page=${page}&size=${this.pageSize}`) .then(res => res.json()) .then(render); } }7.2 多条件筛选方案
function initFilters() { const url = new URL(location.href); const params = url.searchParams; // 绑定表单事件 form.addEventListener('change', (e) => { if(e.target.type === 'checkbox') { const values = Array.from(form.querySelectorAll(`[name="${e.target.name}"]:checked`)) .map(el => el.value); params.delete(e.target.name); values.forEach(v => params.append(e.target.name, v)); } else { params.set(e.target.name, e.target.value); } history.replaceState({}, '', url); loadData(); }); // 初始化表单状态 for(const [key, value] of params) { const input = form.querySelector(`[name="${key}"][value="${value}"]`); if(input) input.checked = true; } }在实际项目中，URL处理看似简单，但魔鬼藏在细节里。记得有次排查一个诡异的bug，最后发现是因为参数值中包含等号导致解析出错。现代API帮我们规避了这类问题，但理解底层原理仍然很重要。
