jQuery.param() 接受一个键值对数组，并将其转换为一个字符串，您可以在HTML请求中用作查询字符串。例如，
a = {
userid:1,
gender:male
}
会被转换为
userid=1&gender=male
a = {
userid:1,
gender: "male",
}
url = Object.keys(a).map(function(k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(a[k])
}).join('&')
console.log(url)userid=1&gender=male
{a:[1,2],b:{c:3}} 应该转换为 a[]=1&a[]=2&b[c]=3 而不是 a=1,2&b=[object Object]。 - oriadamES6版本允许像使用encodeURI(getUrlString({a: 1, b: [true, 12.3, "string"]}))一样转换嵌套对象和数组。
getUrlString (params, keys = [], isArray = false) {
const p = Object.keys(params).map(key => {
let val = params[key]
if ("[object Object]" === Object.prototype.toString.call(val) || Array.isArray(val)) {
if (Array.isArray(params)) {
keys.push("")
} else {
keys.push(key)
}
return getUrlString(val, keys, Array.isArray(val))
} else {
let tKey = key
if (keys.length > 0) {
const tKeys = isArray ? keys : [...keys, key]
tKey = tKeys.reduce((str, k) => { return "" === str ? k : `${str}[${k}]` }, "")
}
if (isArray) {
return `${ tKey }[]=${ val }`
} else {
return `${ tKey }=${ val }`
}
}
}).join('&')
keys.pop()
return p
}
这里大多数解决方案在处理数组/对象值时都会失败。
以下代码将支持一级数组/对象：
const param = obj => Object.entries(obj).map(
pair => Array.isArray(pair[1]) ?
pair[1].map(x=>`${encodeURIComponent(pair[0])}[]=${encodeURIComponent(x)}`).join('&') :
typeof pair[1] === 'object' ?
Object.entries(pair[1]).map(x=>`${encodeURIComponent(pair[0])}[${x[0]}]=${encodeURIComponent(x[1])}`).join('&') :
pair.map(encodeURIComponent).join('=')).join('&')
示例：
param({a:1,b:'b'})
"a=1&b=b"
param({a:1,b:2,c:[1,2],d:{e:'abc',f:4}});
"a=1&b=2&c[]=1&c[]=2&d[e]=abc&d[f]=4"
param({a:1,b:2,c:[1,2,'"'],d:{e:'a"b[c]',f:4}});
"a=1&b=2&c[]=1&c[]=2&c[]=%22&d[e]=a%22b%5Bc%5D&d[f]=4"
但是请注意，它在第二层嵌套时失败：
param({a:1,b:{c:[1,2]}});
"a=1&b[c]=1%2C2"
更新：
如果您不需要支持IE11，请使用URLSearchParams API。请参见error的这个答案。
function urlString(params)
{
if (!params)
return '';
const urlParams = new URLSearchParams();
for (const [name, value] of Object.entries(params))
urlParams.append(name, value || '');
return urlParams.toString();
};
@Amaynut的回答很棒。但我做了一些简化：
const obj = {
userid: 1,
gender: 'male'
}
const params = Object.keys(obj).map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])).join('&')
util.js
export default {
params (obj) {
return Object.keys(obj).map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])).join('&')
}
}
and use like this:
import util from './util'
const q = {
userid: 1,
gender: 'male'
}
const query = util.params(q)
console.log(query)
Object.entries(obj).map(pair => pair.map(encodeURIComponent).join('=')).join('&') - Albin{a:[1,2],b:{c:3}} 应转换为 a[]=1&a[]=2&b[c]=3 而不是 a=1,2&b=[object Object]。 - oriadamES6 gives us some nice primitives:
// Function that parses an object of string key/value params to build up
// a string of url params
// requires an object with no nested values
export function parseUrlParams(urlParams) {
const joinByEquals = (pair) => pair.join('=')
const params = Object.entries(urlParams).map(joinByEquals).join('&')
if (params) {
return `?${params}`
} else {
return ''
}
}
在这里查看它的运行效果： https://www.webpackbin.com/bins/-KnpOI6hb1AzTDpN3wS7
export。 - Rubénfunction formData (obj) {
return Object.keys(obj).map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(JSON.stringify(obj[k]))).join('&')
}
顺便说一下，我不得不在FastSpring的API中使用这个，因为由于某种奇怪的原因，他们在2020年只接受x-www-form-urlencoded数据。因为这是近十年来第一次API没有接受JSON，所以我花了一整天的时间在这上面。
URLSearchParams答案，支持多级嵌套。const urlString = (data) => {
if (data == null) { return ""; }
const urlParams = new URLSearchParams();
const rbracket = /\[\]$/;
const add = (name, valueOrFunction) => {
const value = typeof valueOrFunction === "function" ? valueOrFunction() : valueOrFunction;
urlParams.append(name, value == null ? "" : value);
};
const buildParams = (prefix, obj) => {
if (Array.isArray(obj)) {
obj.forEach((value, index) => {
if (rbracket.test(prefix)) {
add(prefix, value);
} else {
const i = typeof value === "object" && value != null ? index : "";
buildParams(`${prefix}[${i}]`, value);
}
});
} else if (typeof obj === "object" && obj != null) {
for (const [name, value] of Object.entries(obj)) {
buildParams(`${prefix}[${name}]`, value);
}
} else {
add(prefix, obj);
}
};
if (Array.isArray(data) || data instanceof NodeList) {
// If an array or NodeList was passed in,
// assume that it is a collection of form elements:
data.forEach(el => add(el.name, el.value));
} else {
for (const [name, value] of Object.entries(data)) {
buildParams(name, value);
}
}
return urlParams.toString();
};
$.param相同的输出。唯一的区别是空格将被编码为+而不是%20。编辑：如果您需要支持不支持URLSearchParams类的环境，则需要使用数组和encodeURIComponent方法的组合，如其他答案所示：
const urlString = (data) => {
if (data == null) { return ""; }
const urlParams = [];
const rbracket = /\[\]$/;
const add = (name, valueOrFunction) => {
let value = typeof valueOrFunction === "function" ? valueOrFunction() : valueOrFunction;
if (value == null) { value = ""; }
urlParams.push(`${encodeURIComponent(name)}=${encodeURIComponent(value)}`);
};
const buildParams = (prefix, obj) => {
if (Array.isArray(obj)) {
obj.forEach((value, index) => {
if (rbracket.test(prefix)) {
add(prefix, value);
} else {
const i = typeof value === "object" && value != null ? index : "";
buildParams(`${prefix}[${i}]`, value);
}
});
} else if (typeof obj === "object" && obj != null) {
for (const [name, value] of Object.entries(obj)) {
buildParams(`${prefix}[${name}]`, value);
}
} else {
add(prefix, obj);
}
};
if (Array.isArray(data)) {
// If an array was passed in,
// assume that it is a collection of form elements:
data.forEach(el => add(el.name, el.value));
} else {
for (const [name, value] of Object.entries(data)) {
buildParams(name, value);
}
}
return urlParams.join("&");
};
NodeList。 - RubénURLSearchParams 也不受支持。 - RubénNodeList 引用并将 URLSearchParams 替换为数组 - 请参阅我的更新答案。 - Richard Deemingexport function param( params ) {
const p = new URLSearchParams;
for( const [ key, value ] of Object.entries( params ) ) {
p.set( key, String( value ) );
}
return p.toString();
}
export。 - Rubén