Como obter string de consulta em JavaScript

Resumo : neste tutorial, você aprenderá como usar URLSearchParams  para obter parâmetros de string de consulta em JavaScript.

Para obter uma string de consulta você pode acessar a searchpropriedade do locationobjeto:

location.search
Linguagem de código:  CSS  ( css )

Supondo que o valor de seja location.search:

'?type=list&page=20'
Linguagem de código:  JavaScript  ( javascript )

Para trabalhar com a string de consulta, você pode usar o URLSearchParamsobjeto.

const urlParams = new URLSearchParams(location.search);
Linguagem de código:  JavaScript  ( javascript )

O URLSearchParamsé um objeto iterável , portanto você pode usar a for...ofestrutura para iterar sobre seus elementos que são parâmetros de string de consulta:

const urlParams = new URLSearchParams(location.search);

for (const [key, value] of urlParams) {
    console.log(`${key}:${value}`);
}
Linguagem de código:  JavaScript  ( javascript )

Saída:

type:list
page:20
Linguagem de código:  CSS  ( css )

URLSearchParamsMétodos úteis

O URLSearchParamspossui alguns métodos úteis que retornam iteradores de chaves de parâmetros, valores e entradas:

• keys()retorna um iterador que itera sobre as chaves de parâmetro.
• values()retorna um iterador que itera sobre os valores dos parâmetros.
• entries()retorna um iterador que itera sobre os pares (chave, valor) dos parâmetros.

keys()exemplo

O exemplo a seguir usa o keys()método para listar todos os nomes de parâmetros de uma string de consulta:

const urlParams = new URLSearchParams('?type=list&page=20');

for (const key of urlParams.keys()) {
    console.log(key);
}
Linguagem de código:  JavaScript  ( javascript )

Saída:

type
page

values()exemplo

O exemplo a seguir usa o keys()método para listar todos os valores de parâmetro de uma string de consulta:

const urlParams = new URLSearchParams('?type=list&page=20');

for (const value of urlParams.values()) {
    console.log(value);
}
Linguagem de código:  JavaScript  ( javascript )

Saída:

list
20
Linguagem de código:  PHP  ( php )

entries()exemplo

O exemplo a seguir usa o entries()método para listar todos os pares de chave/valor de parâmetro de uma string de consulta:

const urlParams = new URLSearchParams('?type=list&page=20');

for (const entry of urlParams.entries()) {
    console.log(entry);
}
Linguagem de código:  JavaScript  ( javascript )

Saída:

["type", "list"]
["page", "20"]
Linguagem de código:  JSON/JSON com comentários  ( json )

Verifique se existe um parâmetro de string de consulta

O URLSearchParams.has()método retorna truese existir um parâmetro com um nome especificado.

const urlParams = new URLSearchParams('?type=list&page=20');

console.log(urlParams.has('type')); // true
console.log(urlParams.has('foo'));  // false
Linguagem de código:  JavaScript  ( javascript )

Saída

true
false
Linguagem de código:  JavaScript  ( javascript )

Resumo

• O URLSearchParamsfornece uma interface para trabalhar com parâmetros de string de consulta
• O URLSearchParamsé iterável para que você possa usar a for...ofconstrução para iterar sobre os parâmetros da string de consulta.
• O has()método de URLSearchParamsdetermina se existe um parâmetro com um nome especificado.