如何将URL参数转换为JavaScript对象？

另一种基于最新的URLSearchParams标准的解决方案(https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)

function getQueryParamsObject() {
  const searchParams = new URLSearchParams(location.search.slice(1));
  return searchParams
    ? _.fromPairs(Array.from(searchParams.entries()))
    : {};
}

我也遇到了同样的问题，尝试了这里的解决方案，但是它们都没有真正起作用，因为我的URL参数中包含了数组，像这样：

?param[]=5&param[]=8&othr_param=abc&param[]=string

/**
 * Creates an object from URL encoded data
 */
var createObjFromURI = function() {
    var uri = decodeURI(location.search.substr(1));
    var chunks = uri.split('&');
    var params = Object();

    for (var i=0; i < chunks.length ; i++) {
        var chunk = chunks[i].split('=');
        if(chunk[0].search("\\[\\]") !== -1) {
            if( typeof params[chunk[0]] === 'undefined' ) {
                params[chunk[0]] = [chunk[1]];

            } else {
                params[chunk[0]].push(chunk[1]);
            }


        } else {
            params[chunk[0]] = chunk[1];
        }
    }

    return params;
}

使用JavaScript Web API URLSearchParams 很容易实现，

var paramsString = "abc=foo&def=%5Basf%5D&xyz=5";

//returns an iterator object
var searchParams = new URLSearchParams(paramsString);

//Usage
for (let p of searchParams) {
  console.log(p);
}

//Get the query strings
console.log(searchParams.toString());

//You can also pass in objects

var paramsObject = {abc:"forum",def:"%5Basf%5D",xyz:"5"}

//returns an iterator object
var searchParams = new URLSearchParams(paramsObject);

//Usage
for (let p of searchParams) {
  console.log(p);
}

//Get the query strings
console.log(searchParams.toString());

##有用的链接

• URLSearchParams - Web APIs | MDN
• 使用 URLSearchParams 轻松操作 URL | Web | Google Developers

注意: 不支持 IE 浏览器

使用URLSearchParams接口是最简单的方式之一。

以下是工作代码片段：

let paramObj={},
    querystring=window.location.search,
    searchParams = new URLSearchParams(querystring);    

  //*** :loop to add key and values to the param object.
 searchParams.forEach(function(value, key) {
      paramObj[key] = value;
   });

使用 ES6 有一个相当简单但不正确的答案：

console.log(
  Object.fromEntries(new URLSearchParams(`abc=foo&def=%5Basf%5D&xyz=5`))
);

但是这一行代码不能处理多个相同的键，你需要使用更复杂的方法：

function parseParams(params) {
  const output = [];
  const searchParams = new URLSearchParams(params);

  // Set will return only unique keys()
  new Set([...searchParams.keys()])
    .forEach(key => {
      output[key] = searchParams.getAll(key).length > 1 ?  
        searchParams.getAll(key) : // get multiple values
        searchParams.get(key); // get single value
    });

  return output;
}

console.log(
   parseParams('abc=foo&cars=Ford&cars=BMW&cars=Skoda&cars=Mercedes')
)

代码将生成以下结构：

[
  abc: "foo"
  cars: ["Ford", "BMW", "Skoda", "Mercedes"]
]

ES6一行代码（尽管由于代码行长，我们可能不太想这样称呼它）

[...new URLSearchParams(location.search).entries()].reduce((prev, [key,val]) => {prev[key] = val; return prev}, {})

将URL参数解析成对象字面量的一行代码。

function objectifyQueryString(url) {
  let _url = new URL(url);
  let _params = new URLSearchParams(_url.search);
  let query = Array.from(_params.keys()).reduce((sum, value)=>{
    return Object.assign({[value]: _params.get(value)}, sum);
  }, {});
  return query;
}

使用内置的 Node 模块可以给出一个简单的答案。(无需第三方 npm 模块)

querystring 模块提供了解析和格式化 URL 查询字符串的实用工具。可以通过以下方式访问它:

const querystring = require('querystring');

const body = "abc=foo&def=%5Basf%5D&xyz=5"
const parseJSON = querystring.parse(body);
console.log(parseJSON);

function unserialize(str) {
  str = decodeURIComponent(str);
  var chunks = str.split('&'),
      obj = {};
  for(var c=0; c < chunks.length; c++) {
    var split = chunks[c].split('=', 2);
    obj[split[0]] = split[1];
  }
  return obj;
}

编辑：添加了decodeURIComponent（）