【问题标题】：Adding parameters to URL, putting array in query string向 URL 添加参数，将数组放入查询字符串中
【发布时间】：2017-02-01 12:08:25
【问题描述】：

目标

我已经建立了一个互动，人们可以选择六名球员组成他们的全明星队。当他们点击分享到 Twitter 时，我希望有一个包含所有六名球员参数的 URL，例如 website.com/?playerName=picked?playerName=picked，以便人们可以分享他们的球队

问题

将参数附加到 URL 的最佳方法是什么？
如何将数组放入查询字符串中？

【问题讨论】：

标签： javascript jquery arrays url query-string

【解决方案1】：

我不确定你是否可以对数组进行编码，如果可以的话，它可能是特定于框架的

查询字符串的格式为?a=1&b=2&c=3&...，添加起来很简单。您绝对可以将 6 个玩家作为上述参数传递

编辑：每个请求，查询字符串看起来像

website.com/?player1=foobar&player2=foobuz&player3=foobaz

【讨论】：

【解决方案2】：

您可以直接在 url 中使用数组，但是您需要将数组序列化为字符串。像这样player[]=one&player[]=two

这里有一个自动化的小功能。

在使用 url 时，您应该始终使用 encodeURIComponent 来编码任何非 url 友好的字符。玩家是一个数组，所以我们映射它并获得一个已编码的新数组。

之后我们只需要使用&加入数组

const players = [
  'player Name 1',
  'playerName2',
  'playerName3'
]

const parameterizeArray = (key, arr) => {
  arr = arr.map(encodeURIComponent)
  return '?'+key+'[]=' + arr.join('&'+key+'[]=')
}

console.log(parameterizeArray('player', players))

编辑

唯一的区别是函数声明风格，其他都是标准的 ES5

function parameterizeArray(key, arr) {
  arr = arr.map(encodeURIComponent)
  return '?'+key+'[]=' + arr.join('&'+key+'[]=')
}

【讨论】：

你介意还包括一个 sn-p w/o const 和更新的 ES2015 语法

【解决方案3】：

清洁工：

website.com/?players=player1,player2,player3,player4

然后拆分查询得到结果：

var arrayResult = query.players.split(",")

【讨论】：

此解决方案将需要验证在这种情况下不能具有“分隔”值的名称，即逗号。