我已经建立了一个交互式,人们可以选择六名球员组成他们的全明星队,当他们点击分享到Twitter时,我希望有一个包含所有六名球员参数的URL,比如website.com/?playerName=picked?playerName=picked,这样人们就可以分享他们的球队
website.com/?playerName=picked?playerName=picked
mgdq6dx11#
你可以直接在url中使用数组,但是你需要将数组序列化为字符串。这里有一个小函数来自动化它。当使用url时,你应该总是使用encodeURIComponent来编码任何非url友好的字符。播放器是一个数组,所以我们Map它并获得一个已编码的新数组。之后,我们只需使用&连接数组
encodeURIComponent
&
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+'[]=') }
aurhwmvo2#
清洁剂:
website.com/?players=player1,player2,player3,player4
然后拆分查询以获得结果:
var arrayResult = query.players.split(",")
ltqd579y3#
您应该依靠内置的URLSearchParams API来构造(和解构)查询字符串。使用append将新参数添加到末尾(使用set将替换现有参数):
append
set
const players = ["alice", "bob", "charlie"]; const params = new URLSearchParams(); players.forEach((player) => params.append("playerName", player)); console.log(params.toString());
使用getAll检索所有值的数组(使用get只会得到第一个值):
getAll
get
const params = new URLSearchParams("playerName=alice&playerName=bob&playerName=charlie"); console.log(params.getAll("playerName"));
您还可以获取URLSearchParams对象from a URL object:
const url = new URL("https://website.com/?playerName=alice&playerName=bob&playerName=charlie"); const params = url.searchParams; console.log(params.getAll("playerName"));
3条答案
按热度按时间mgdq6dx11#
你可以直接在url中使用数组,但是你需要将数组序列化为字符串。
这里有一个小函数来自动化它。
当使用url时,你应该总是使用
encodeURIComponent
来编码任何非url友好的字符。播放器是一个数组,所以我们Map它并获得一个已编码的新数组。之后,我们只需使用
&
连接数组编辑
唯一的区别是函数声明风格,其他都是标准ES5
aurhwmvo2#
清洁剂:
然后拆分查询以获得结果:
ltqd579y3#
您应该依靠内置的URLSearchParams API来构造(和解构)查询字符串。
使用
append
将新参数添加到末尾(使用set
将替换现有参数):使用
getAll
检索所有值的数组(使用get
只会得到第一个值):您还可以获取URLSearchParams对象from a URL object: