js解析url query参数

在JavaScript中，解析URL的查询字符串（query string）参数是一个常见的任务，尤其是在处理Web页面或API请求时。虽然现代JavaScript（如ES6及以上版本）没有直接提供内置的方法来解析查询字符串为对象，但你可以通过几种方式来实现这一功能。

方法1：使用URLSearchParams（推荐）

如果你的项目运行在较新的浏览器环境中（比如Chrome 51+、Firefox 49+、Edge 14+等），你可以使用URLSearchParams接口。这是处理URL查询字符串的最现代和推荐的方法。

function parseQueryString(queryString) {
  return new URLSearchParams(queryString).entries().reduce((result, [key, value]) => {
    result[key] = value;
    return result;
  }, {});
}

// 示例
const queryString = "name=John&age=30&city=New York";
const params = parseQueryString(queryString);
console.log(params); // { name: 'John', age: '30', city: 'New York' }

注意：URLSearchParams也支持直接从URL实例中创建，这对于处理当前页面的URL特别有用。

const url = new URL(window.location.href);
const searchParams = url.searchParams;
console.log(searchParams.get('name')); // 假设URL中有name参数

方法2：使用split和reduce

对于不支持URLSearchParams的旧环境，你可以通过结合使用split和reduce方法来实现。

function parseQueryString(queryString) {
  return queryString.split('&').reduce((result, item) => {
    const [key, value] = item.split('=');
    result[decodeURIComponent(key)] = decodeURIComponent(value);
    return result;
  }, {});
}

// 示例
const queryString = "name=John&age=30&city=New%20York";
const params = parseQueryString(queryString);
console.log(params); // { name: 'John', age: '30', city: 'New York' }

方法3：使用第三方库

如果你正在处理复杂的URL解析或需要更多功能，考虑使用如qs（适用于Node.js和浏览器）或url-parse等第三方库。

注意

• 在使用decodeURIComponent时，请确保你的查询字符串是有效编码的，以避免潜在的安全问题，如跨站脚本攻击（XSS）。
• 如果你的查询字符串包含数组形式的参数（例如items[]=1&items[]=2），上述方法需要进行修改才能正确解析。
• URLSearchParams是处理查询字符串的推荐方法，因为它提供了丰富的API来处理各种情况，并且与Web标准兼容。