向 URL 添加参数，将数组放入查询字符串中

Question

客观的

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

题

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

Answer 1

清洁工：

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

然后拆分查询以获得结果：

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

Answer 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+'[]=')
}