js中的location的href和pathname,search

### 关于 `window.location.href` 和 `window.location` 的区别及其获取 URL 参数的方法 #### 1. **`window.location.href` 和 `window.location` 的基本概念** `window.location.href` 是 `window.location` 对象的一个属性，表示当前页面的完整 URL 地址。而 `window.location` 是一个完整的对象，包含了更多有关当前页面的信息，例如主机名 (`hostname`)、端口号 (`port`)、路径 (`pathname`) 等[^4]。 - `window.location.href`: 表示整个 URL 字符串。 - `window.location`: 提供了一个接口来访问和设置与当前页面相关的各种信息。 两者的主要区别在于： - `window.location.href` 是字符串类型，仅提供 URL 的完整表示。 - `window.location` 是一个对象，提供了更多的方法和属性来操作 URL[^3]。 --- #### 2. **如何使用 `window.location` 获取 URL 参数** ##### 方法一：通过正则表达式解析查询参数 可以编写一个通用函数，利用正则表达式从 `window.location.search` 中提取指定名称的参数值。 ```javascript function getUrlParameter(name) { const regex = new RegExp(`[?&]${encodeURIComponent(name)}=([^&#]*)`); const results = regex.exec(window.location.search); return results === null ? null : decodeURIComponent(results[1]); } // 示例调用 const paramValue = getUrlParameter('key'); // 替换 'key' 为你想获取的参数名 console.log(paramValue); ``` 这种方法适用于简单的键值对形式的查询字符串，并能够正确处理编码字符[^1]。 --- ##### 方法二：分割查询字符串并手动查找目标字段 如果不希望通过正则表达式实现，还可以通过对 `window.location.search` 的子串操作完成同样的功能。 ```javascript function getQueryValue(key) { const queryStr = window.location.search.substring(1); // 去掉开头的 '?' const pairs = queryStr.split('&'); for (let i = 0; i < pairs.length; i++) { const pair = pairs[i].split('='); if (decodeURIComponent(pair[0]) === key) { // 比较解码后的键名 return decodeURIComponent(pair[1]); // 返回对应的值 } } return null; // 如果未找到，则返回 null } // 示例调用 const value = getQueryValue('paramName'); // 替换 'paramName' 为实际参数名 console.log(value); ``` 这种方式适合于逐项对比需求较为简单的场景[^2]。 --- ##### 方法三：使用现代浏览器支持的 `URLSearchParams` API 在较新的环境中（如主流桌面端/移动端浏览器），推荐使用内置的 `URLSearchParams` 接口简化操作流程。 ```javascript function getUrlParam(paramName) { const params = new URLSearchParams(window.location.search); // 创建 URLSearchParams 对象 return params.get(paramName); // 调用 .get() 方法传入要找寻的名字即可得到对应的结果 } // 示例调用 const result = getUrlParam('searchKey'); // 替换 'searchKey' 为目标参数名 console.log(result); ``` 该方案不仅语义清晰，而且性能优越，在兼容性允许的情况下优先选用它来进行开发工作[^4]。 --- #### 3. **总结** `window.location.href` 和 `window.location` 各自扮演着不同的角色： - `window.location.href` 更加专注于 URL 的整体表现形式； - `window.location` 则是一个更为强大的工具集，允许开发者深入挖掘 URL 的各个组成部分。 至于获取 URL 参数的具体实现方式，可以根据项目的实际情况和个人偏好选择合适的技术路线——无论是传统的正则匹配还是现代化的 `URLSearchParams` API，都能满足日常开发中的绝大多数需求。 --- ###