我有一个这样的字符串:
abc=foo&def=%5Basf%5D&xyz=5
如何将其转换为这样的JavaScript对象?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
我有一个这样的字符串:
abc=foo&def=%5Basf%5D&xyz=5
如何将其转换为这样的JavaScript对象?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
当前回答
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"]
]
其他回答
console.log (decodeURI (' abc = foo&def = % 5巴斯夫% 5 d&xyz = 5 ') .split (' & ') .reduce((result, current) => { Const [key, value] = current.split('='); 结果[key] = value; 返回结果 }, {}))
有一个名为YouAreI.js的轻量级库,它经过测试,使这个非常简单。
YouAreI = require('YouAreI')
uri = new YouAreI('http://user:pass@www.example.com:3000/a/b/c?d=dad&e=1&f=12.3#fragment');
uri.query_get() => { d: 'dad', e: '1', f: '12.3' }
使用URLSearchParams JavaScript Web API非常简单,
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 api | MDN 简单的URL操作与URLSearchParams | Web |谷歌开发者
注意:IE不支持
许多其他的解决方案没有考虑到边界情况。
这个可以处理
空键a=1&b=2& 空值a=1&b 空值a=1&b= 未编码的等号a=1&b=2=3=4
decodeQueryString: qs => {
// expects qs to not have a ?
// return if empty qs
if (qs === '') return {};
return qs.split('&').reduce((acc, pair) => {
// skip no param at all a=1&b=2&
if (pair.length === 0) return acc;
const parts = pair.split('=');
// fix params without value
if (parts.length === 1) parts[1] = '';
// for value handle multiple unencoded = signs
const key = decodeURIComponent(parts[0]);
const value = decodeURIComponent(parts.slice(1).join('='));
acc[key] = value;
return acc;
}, {});
},
如果您需要递归,您可以使用小巧的js-extension-ling库。
npm i js-extension-ling
const jsx = require("js-extension-ling");
console.log(jsx.queryStringToObject("a=1"));
console.log(jsx.queryStringToObject("a=1&a=3"));
console.log(jsx.queryStringToObject("a[]=1"));
console.log(jsx.queryStringToObject("a[]=1&a[]=pomme"));
console.log(jsx.queryStringToObject("a[0]=one&a[1]=five"));
console.log(jsx.queryStringToObject("http://blabla?foo=bar&number=1234"));
console.log(jsx.queryStringToObject("a[fruits][red][]=strawberry"));
console.log(jsx.queryStringToObject("a[fruits][red][]=strawberry&a[1]=five&a[fruits][red][]=cherry&a[fruits][yellow][]=lemon&a[fruits][yellow][688]=banana"));
这将输出如下内容:
{ a: '1' }
{ a: '3' }
{ a: { '0': '1' } }
{ a: { '0': '1', '1': 'pomme' } }
{ a: { '0': 'one', '1': 'five' } }
{ foo: 'bar', number: '1234' }
{
a: { fruits: { red: { '0': 'strawberry' } } }
}
{
a: {
'1': 'five',
fruits: {
red: { '0': 'strawberry', '1': 'cherry' },
yellow: { '0': 'lemon', '688': 'banana' }
}
}
}
注意:它基于loctus parse_str函数(https://locutus.io/php/strings/parse_str/)。