如何使用 Javascript 构建查询字符串

IT技术 javascript string forms get
2021-02-01 12:34:46

只是想知道是否有任何内置于 Javascript 的东西可以采用 Form 并返回查询参数,例如: "var1=value&var2=value2&arr[]=foo&arr[]=bar..."

多年来我一直在想这个问题。

6个回答

URLSearchParams API在所有现代浏览器中都可用。例如:

const params = new URLSearchParams({
  var1: "value",
  var2: "value2",
  arr: "foo",
});
console.log(params.toString());
//Prints "var1=value&var2=value2&arr=foo"

@pomber 关于过滤掉那些未定义的项目有什么好主意吗?
2021-03-23 12:34:46
最好的答案在这里imo。只是为了添加它,您可以params.append(key, value)稍后在更复杂的场景中添加新的搜索参数。
2021-03-26 12:34:46
请注意,未定义和空值包含在最终字符串中: x=null&y=undefined
2021-03-28 12:34:46
请注意,TS 会警告使用普通对象,但它仍然可以正常工作
2021-03-30 12:34:46
此外,如果您已经有一个 URL 对象(例如const url = new URL("https://stackoverflow.com")),您可以设置其查询字符串url.search = new URLSearchParams({foo: "bar"})url.searchParams.append("foo", "bar")
2021-03-31 12:34:46

2k20 更新:将Josh 的解决方案与URLSearchParams.toString() 结合使用

旧答案:


没有 jQuery

var params = {
    parameter1: 'value_1',
    parameter2: 'value 2',
    parameter3: 'value&3' 
};

var esc = encodeURIComponent;
var query = Object.keys(params)
    .map(k => esc(k) + '=' + esc(params[k]))
    .join('&');

对于不支持需要 ES5 的箭头函数语法的浏览器,将.map...更改

    .map(function(k) {return esc(k) + '=' + esc(params[k]);})
我见过的最佳解决方案 - 非常干净简洁。不过,有几个警告。1) 在.map() 中,k 和params[k] 都应该被编码,例如encodeURIComponent(k) 和encodeURIComponent(params[k])。2) 您可以在查询字符串中拥有多个命名参数的实例。如果您想要该功能,则必须使用数组而不是对象(大多数应用程序不需要或不需要)。
2021-03-23 12:34:46
@ user1738579 我编辑了答案,还包括您的非 ES5 示例。
2021-03-24 12:34:46
“不够jquery”
2021-03-27 12:34:46
3) 并非所有浏览器都支持箭头函数语法(需要 ES5)。如果您想支持所有浏览器(并编码部分),请将上面的 .map() 替换为 .map(function(k) {return encodeURIComponent(k) + '=' + encodeURIComponent(params[k]);})
2021-03-29 12:34:46
超级优雅和紧凑。
2021-03-29 12:34:46

如果您使用 jQuery,您可能需要查看jQuery.param() http://api.jquery.com/jQuery.param/

例子:

var params = {
    parameter1: 'value1',
    parameter2: 'value2',
    parameter3: 'value3' 
};
var query = $.param(params);
console.log(query);

这将打印出:

parameter1=value1&parameter2=value2&parameter3=value3
这实际上是正确的答案!表单的查询字符串是$.param($('#myform').serializeArray())
2021-03-21 12:34:46
@Jesse,这将与以下结果相同: $('#myform').serialize()
2021-03-28 12:34:46
jQuery !== JavaScript
2021-04-01 12:34:46
@gphilip 嗯,这就是为什么我以“如果您使用 jQuery ...”开头的原因。否则,如果你想在 vanilla JS 中实现它,你可以检查jQuery.param()这里的实现github.com/jquery/jquery/blob/master/src/serialize.js :)
2021-04-12 12:34:46
与我的答案不同,这个支持嵌套对象,例如 someStr=value1&someObj[a]=5&someObj[b]=6&someArr[]=1&someArr[]=2
2021-04-12 12:34:46

这不会直接回答您的问题,但这里有一个通用函数,它将创建一个包含查询字符串参数的 URL。参数(名称和值)被安全地转义以包含在 URL 中。

function buildUrl(url, parameters){
  var qs = "";
  for(var key in parameters) {
    var value = parameters[key];
    qs += encodeURIComponent(key) + "=" + encodeURIComponent(value) + "&";
  }
  if (qs.length > 0){
    qs = qs.substring(0, qs.length-1); //chop off last "&"
    url = url + "?" + qs;
  }
  return url;
}

// example:
var url = "http://example.com/";

var parameters = {
  name: "George Washington",
  dob: "17320222"
};

console.log(buildUrl(url, parameters));
// => http://www.example.com/?name=George%20Washington&dob=17320222
更强大的原生 JavaScript 解决方案位于stackoverflow.com/a/1714899/1269037
2021-03-17 12:34:46
@UmutSirin Lol 是的,我当时对 Javascript 了解不多。xD 我想我把它当作一个 PHP 数组来对待。如果你愿意,可以随意重构。
2021-03-19 12:34:46
在 jquery、mootools 等流行的 javascript 框架之一中是否有与此类似的内置函数?
2021-04-03 12:34:46
有史以来最奇怪的实现,为什么你需要初始化一段new Array时间,你实际上将它用作对象?○, ○
2021-04-05 12:34:46
@迈克尔哈哈,是的。我刚刚发送了一个编辑。谢谢你的回答!
2021-04-11 12:34:46

ES2017 (ES8)

利用Object.entries(),它返回一个对象[key, value]的数组例如,因为{a: 1, b: 2}它会返回[['a', 1], ['b', 2]]. 仅 IE 不支持(也不会)。

代码:

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

例子:

buildURLQuery({name: 'John', gender: 'male'});

结果:

"name=John&gender=male"
2021-03-14 12:34:46