是否有一个快速和简单的方法来编码JavaScript对象到字符串,我可以通过GET请求传递?
没有jQuery,没有其他框架-只有纯JavaScript:)
是否有一个快速和简单的方法来编码JavaScript对象到字符串,我可以通过GET请求传递?
没有jQuery,没有其他框架-只有纯JavaScript:)
当前回答
我建议使用URLSearchParams接口:
const searchParams = new URLSearchParams(); Const params = {foo: "hi there", bar: "100%"}; 种(params)。forEach(key => searchParams。追加(关键,params[主要])); console.log (searchParams.toString ())
或者像这样将搜索对象传递给构造函数:
Const params = {foo: "hi there", bar: "100%"}; const queryString = new URLSearchParams(params).toString(); console.log(参数);
其他回答
ES6解决方案用于JavaScript对象的查询字符串编码
const params = {
a: 1,
b: 'query stringify',
c: null,
d: undefined,
f: '',
g: { foo: 1, bar: 2 },
h: ['Winterfell', 'Westeros', 'Braavos'],
i: { first: { second: { third: 3 }}}
}
static toQueryString(params = {}, prefix) {
const query = Object.keys(params).map((k) => {
let key = k;
const value = params[key];
if (!value && (value === null || value === undefined || isNaN(value))) {
value = '';
}
switch (params.constructor) {
case Array:
key = `${prefix}[]`;
break;
case Object:
key = (prefix ? `${prefix}[${key}]` : key);
break;
}
if (typeof value === 'object') {
return this.toQueryString(value, key); // for nested objects
}
return `${key}=${encodeURIComponent(value)}`;
});
return query.join('&');
}
toQueryString (params)
"a=1&b=query%20stringify&c=&d=&f=&g[foo]=1&g[bar]=2&h[]=Winterfell&h[]=Westeros&h[]=Braavos&i[first][second][third]=3"
您也可以通过使用简单的JavaScript来实现这一点。
const stringData = '?name=Nikhil&surname=Mahirrao&age=30'; const newData= {}; stringData.replace('?', '').split('&').map((value) => { const temp = value.split('='); 新数据[温度[0]] = 温度[1]; }); console.log('stringData: '+stringData); console.log('newData: '); console.log(newData);
URLSearchParams看起来不错,但是对于嵌套对象来说行不通。
试着使用
encodeURIComponent(JSON.stringify(object))
单行转换对象为查询字符串,以防有人再次需要它:
let Objs = { a: 'obejct-a', b: 'object-b' }
Object.keys(objs).map(key => key + '=' + objs[key]).join('&')
// The result will be a=object-a&b=object-b
Use:
const toQueryString = obj => "?".concat(Object.keys(obj).map(e => `${encodeURIComponent(e)}=${encodeURIComponent(obj[e])}`).join("&"));
const data = {
offset: 5,
limit: 10
};
toQueryString(data); // => ?offset=5&limit=10
或者使用预定义的特性
const data = {
offset: 5,
limit: 10
};
new URLSearchParams(data).toString(); // => ?offset=5&limit=10
Note
如果不存在,上述两个方法都将值设置为null。 如果你不想设置查询参数值为空,那么使用:
const toQueryString = obj => "?".concat(Object.keys(obj).map(e => obj[e] ? `${encodeURIComponent(e)}=${encodeURIComponent(obj[e])}` : null).filter(e => !!e).join("&"));
const data = {
offset: null,
limit: 10
};
toQueryString(data); // => "?limit=10" else with above methods "?offset=null&limit=10"
你可以自由使用任何方法。