Come ottenere i valori delle stringhe di query in JavaScript

I valori della stringa di query in un URL forniscono spesso informazioni sulla richiesta, come i parametri di ricerca. Una stringa di query può essere utilizzata per richiedere una pagina Web utilizzando il protocollo HTTP. Occasionalmente potresti dover recuperare gli attributi della stringa di query nel tuo script. Inoltre, sapere come estrarre i dati della stringa di query dall'URL è essenziale se qualsiasi logica aziendale o di richiesta viene gestita nel front-end.

Questo blog definirà la procedura per ottenere i valori della stringa di query in JavaScript.

Come ottenere i valori delle stringhe di query in JavaScript?

Per ottenere i valori della stringa di query in JavaScript, utilizzare i seguenti metodi:

Utilizzare l'API dell'URL con il metodo get()
URLSearchParams con il metodo get()
URLSearchParams con il metodo values()

Metodo 1: ottenere i valori della stringa di query utilizzando l'API URL con il metodo get()

Usa il ' API dell'URL ' con il ' ottenere() ” per ottenere i valori della stringa di query in JavaScript. Un URL (Uniform Resource Locator) è un modo per trovare una specifica risorsa Internet. Tipicamente è composto da un protocollo (come “ http ' o ' https '), un nome di dominio (come ' esempio.com ') e un percorso (come ' /percorso/della/risorsa “). Gli URL vengono utilizzati per accedere a pagine Web, scaricare file e accedere ad altre risorse, inclusi i valori delle stringhe di query su Internet.

Esempio
Crea una variabile che memorizzi l'URL con stringhe di query:

era urlQueryString = 'https://www.example.com/page.html?keyword=SearchText &fullname=jennyConvey &click=Submit' ;

Chiama l'oggetto URL passando ' urlQueryString ”:

era stringa della domanda = nuovo URL ( urlQueryString ) ;

Utilizzare il metodo get() passando la chiave ' parola chiave ” della query per ottenere il suo valore con l'attributo searchParams. La proprietà searchParams dell'oggetto URL in JavaScript rappresenta la stringa di query di un URL. Fornisce un modo per manipolare la stringa di query di un URL come un oggetto piuttosto che una stringa:

era valore1 = stringa della domanda. searchParams . ottenere ( 'parola chiave' ) ;
consolare. tronco d'albero ( 'valore della parola chiave: ' + valore1 ) ;

Ottieni il secondo valore dalla stringa di query passando la sua chiave al metodo get() e stampa sulla console:

era valore2 = stringa della domanda. searchParams . ottenere ( 'nome e cognome' ) ;
consolare. tronco d'albero ( 'valore del nome completo: ' + valore2 ) ;

Allo stesso modo, recupera il terzo valore nella stringa:

era valore3 = stringa della domanda. searchParams . ottenere ( 'clic' ) ;
consolare. tronco d'albero ( 'valore del clic: ' + valore3 ) ;

Si può vedere che i valori della stringa di query sono stati recuperati con successo:

Metodo 2: ottenere i valori della stringa di query utilizzando URLSearchParams con il metodo get()

Il ' URLSearchParams L'interfaccia ” può essere utilizzata in JavaScript per recuperare i valori dalla stringa di query. Valuta la stringa di query di un URL e offre un mezzo per accedere ai valori. Tieni presente che dovresti inviare solo la parte della stringa di query dell'URL, che puoi recuperare utilizzando il ' finestra.posizione.ricerca ” come parametro per URLSearchParams().

Esempio
Crea una variabile che memorizzi la stringa di query:

era urlQueryString = 'keyword=CercaTesto &fullname=jennyConvey &click=Invia' ;

Passa la stringa al ' URLSearchParams interfaccia ':

era stringa della domanda = nuovo URLSearchParams ( urlQueryString ) ;

Ottieni il valore della chiave ' nome e cognome ' dalla stringa di query utilizzando ' ottenere() ' metodo:

era valore1 = stringa della domanda. ottenere ( 'nome e cognome' ) ;
consolare. tronco d'albero ( 'valore del nome completo: ' + valore1 ) ;

Produzione

Nota : Utilizzo ' const queryString = new URLSearchParams(window.location.search) ” per ottenere l'URL attivo/corrente.

Dopo aver ottenuto l'URL corrente, ottenere la stringa di query da esso, creare un'istanza di URLSearchParams e passargli la stringa di query. Infine, ottieni il valore di un parametro specifico nella stringa di query utilizzando il metodo get().

Metodo 2: ottenere i valori della stringa di query utilizzando URLSearchParams con il metodo values()

Puoi anche usare il ' i valori() ” con l'interfaccia URLSearchParams per recuperare i valori della stringa di query. Aiuta ad accedere a tutti i valori della stringa contemporaneamente.

Esempio
Passa la stringa di query all'interfaccia URLSearchParams e memorizzala in una variabile ' stringa della domanda ”:

era stringa della domanda = nuovo URLSearchParams ( urlQueryString ) ;

Chiamare il metodo values() nel ' per ” ciclo per ottenere tutti i valori della stringa di query:

per ( cost valore di queryString . i valori ( ) ) {
consolare. tronco d'albero ( valore ) ;
}

Si può osservare che tutti i valori di stringa sono stati recuperati:

Si tratta di ottenere i valori della stringa di query in JavaScript.

Conclusione

Per ottenere i valori della stringa di query, utilizzare ' API dell'URL ' con il ' ottenere() 'metodo e' searchParam 'attributo. La proprietà searchParams dell'oggetto URL in JavaScript rappresenta la stringa di query di un URL. Puoi anche usare il ' URLSearchParams ” interfaccia con il “ ottenere() ” metodo o “ i valori() ' metodo. Questo blog ha descritto la procedura per ottenere i valori della stringa di query in JavaScript.

Come ottenere i valori delle stringhe di query in JavaScript