js 获取location 参数

window.location 对象

你需要了解 window.location 对象，它包含了当前页面的 URL 的所有信息。

我们获取参数的关键就在于 location.search。

方法一：手动解析 (原生 JavaScript，不依赖库)

这是最基础的方法，能帮助你理解其原理,适用于简单场景或不想引入任何库的情况。

步骤：

1. 获取 location.search。
2. 去掉开头的 。
3. 按 & 分割成键值对数组。
4. 遍历数组，再按 分割出 key 和 value。
5. 处理 URL 编码 (%20 -> 空格)。

示例代码：

function getParams() {
  // 1. 获取查询字符串，"?name=John&age=30&city=New%20York"
  const queryString = window.location.search;
  // 2. 创建一个空对象来存储参数
  const params = {};
  // 3. 如果查询字符串为空，直接返回空对象
  if (!queryString) {
    return params;
  }
  // 4. 去掉开头的 '?'，然后按 '&' 分割
  const paramPairs = queryString.substring(1).split('&');
  // 5. 遍历每个键值对
  for (let i = 0; i < paramPairs.length; i++) {
    const pair = paramPairs[i];
    // 跳过空字符串（URL 末尾的 &）
    if (!pair) {
      continue;
    }
    // 按 '=' 分割成键和值
    const [key, value] = pair.split('=');
    // 6. 处理 URL 编码并存储到对象中
    // decodeURIComponent 用于解码 %20 这样的编码为空格
    params[decodeURIComponent(key)] = decodeURIComponent(value || '');
  }
  return params;
}
// --- 使用示例 ---
// 假设当前 URL 是: https://example.com/?name=John&age=30&city=New%20York
const myParams = getParams();
console.log(myParams);
// 输出: { name: "John", age: "30", city: "New York" }
// 访问特定参数
console.log(myParams.name); // 输出: "John"
console.log(myParams.city); // 输出: "New York"

优点：

• 不依赖任何外部库。
• 有助于理解 URL 参数的格式。

缺点：

• 代码量稍多。
• 需要自己处理边缘情况（如参数值为空、参数没有 等）。

方法二：使用 URLSearchParams API (现代且推荐)

现代浏览器提供了一个内置的 URLSearchParams 接口，专门用来处理查询字符串，这是目前最推荐、最简洁、最健壮的方法。

示例代码：

// 1. 创建一个 URLSearchParams 实例
// window.location.search 会自动包含 '?'
const params = new URLSearchParams(window.location.search);
// --- 常用方法 ---
// 2. 获取单个参数的值 (如果参数不存在，返回 null)
const name = params.get('name'); // 返回 "John"
const age = params.get('age');   // 返回 "30"
const occupation = params.get('occupation'); // 返回 null
console.log(name); // "John"
console.log(age); // "30"
console.log(occupation); // null
// 3. 获取所有同名参数的值 (返回一个数组)
// URL: ...&hobbies=reading&hobbies=coding
const hobbies = params.getAll('hobbies'); // 返回 ["reading", "coding"]
// 4. 检查是否存在某个参数
console.log(params.has('name')); // true
console.log(params.has('gender')); // false
// 5. 遍历所有参数
params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
  // name: John
  // age: 30
  // city: New York
});
// 6. 将参数对象转换回查询字符串
const newQueryString = params.toString();
console.log(newQueryString); // "name=John&age=30&city=New%20York"

优点：

• 代码简洁：几行代码就能搞定所有操作。
• 功能强大：内置了 get, getAll, has, forEach 等实用方法。
• 自动处理编码/解码：无需手动调用 decodeURIComponent。
• 健壮：是浏览器原生 API，经过了充分测试,能很好地处理各种边缘情况。

缺点：

• 在非常旧的浏览器（如 IE11）中不支持，但在所有现代浏览器（Chrome, Firefox, Safari, Edge）中都可以安全使用。

方法三：使用第三方库 (如 Lodash.js, qs.js)

在大型项目中，特别是已经引入了像 Lodash 这样的工具库时,可能会使用它们提供的解析方法。

使用 Lodash 的 _.get 和简单解析：

Lodash 本身没有直接解析 URL 参数的方法，但可以和原生方法结合使用，或者使用其 _.fromPairs 来简化代码。

// 假设已经引入了 Lodash
const queryString = window.location.search.substring(1);
const paramPairs = queryString ? queryString.split('&') : [];
const params = _.fromPairs(paramPairs.map(pair => {
  const [key, value] = pair.split('=');
  return [decodeURIComponent(key), decodeURIComponent(value || '')];
}));
console.log(params);

使用专门的 qs 库：

qs 是一个功能非常强大的库，不仅能解析，还能序列化,并且能处理嵌套对象和数组格式的参数。

# 首先需要安装
npm install qs

import qs from 'qs';
// 解析
const params = qs.parse(window.location.search.substring(1));
console.log(params);
// 序列化
const newSearch = qs.stringify({ user: 'John', page: 1 });
console.log(newSearch); // "user=John&page=1"

优点：

• qs 库非常强大,能处理复杂的参数结构。
• 在已经使用这些库的项目中,保持了一致性。

缺点：

• 增加了项目的依赖包体积。
• 对于简单的 URL 参数，有些“杀鸡用牛刀”。

总结与建议

最终建议：

对于 99% 的情况，请直接使用 URLSearchParams。 它是现代 JavaScript 的标准解决方案，既简单又可靠，如果你的项目需要支持 IE11 这样的旧浏览器，可以考虑使用手动解析方法或引入一个 URLSearchParams 的 polyfill（垫片）。