Bir URL'de, sorgu dizesi değerleri genellikle, bir arama için parametreler veya kullandığınız bir nesnenin kimliği gibi istek hakkında bilgi sağlar. İş veya istek mantığından herhangi biri ön uçta işleniyorsa, URL'den sorgu dizesi değerlerinin nasıl alınacağını bilmek önemlidir. Bunu başarmanın birkaç yolu var, bunlardan birkaçını burada göreceğiz.
URLArama Parametreleri
The URLSearchParams arabirim, IE 11 hariç tüm ana tarayıcı sürümleri tarafından desteklenir. Bir URL'nin sorgu dizesini ayrıştırarak ve değerlere erişmenin bir yolunu sağlayarak çalışır. Örneğin:
let params = new URLSearchParams('q=node&page=2');
params.get('q');
params.get('page');
Bu arayüzün dezavantajlarından biri, ona yalnızca bir URL'nin sorgu dizesini iletmeniz gerektiğidir. Geçerli tarayıcı URL'si ile çalışıyorsanız, bunu yapmak kolaydır, çünkü window.location.search. Başka bir URL ile çalışıyorsanız, sorgu dizesini ayrı olarak ayrıştırmanız ve iletmeniz gerekir.
Sorgu parametrelerini bir nesneye ayrıştırmak için şunu kullanın: URL.searchParams'ler .entries() bir döndüren yöntem, Iterator anahtar/değer çiftleri ve Object.fromEntries bir nesneye dönüştürmek için.
let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries);
URL Nesnesi
The URL API, IE 11 hariç tüm ana tarayıcı sürümleri tarafından da desteklenir. URL'leri ayrıştırmak için daha esnek bir yol sunar ve ayrıca sorgu dizesi değerlerine erişmenin bir yolunu sağlar. Örneğin:
const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;
searchParams.get('q');
searchParams.get('page');
url.searchParams tarafından döndürülen aynı tür örnek nesnesidir. URLSearchParams.
The url yukarıdaki nesne ayrıca URL'nin tüm bölümlerine bölünmüştür. Örneğin:
url.href;
url.origin;
url.protocol;
url.host;
url.hostname;
url.port;
url.pathname;
url.search;
url.hash;
Saf JavaScript
Herhangi bir nedenle yukarıdaki API'lere erişemiyorsanız veya ayrıştırma üzerinde daha fazla kontrol sahibi olmak istiyorsanız, sorgu dizesini bir nesneye ayrıştırmak için aşağıdaki kodu kullanabilirsiniz.
function getQueryParams(url) {
const paramArr = url.slice(url.indexOf('?') + 1).split('&');
const params = {};
paramArr.map(param => {
const [key, val] = param.split('=');
params[key] = decodeURIComponent(val);
})
return params;
}
not: Düz JS'de sorgu paramlarını ayrıştırmanın birçok yolu vardır, bazıları diğerlerinden daha karmaşık (ve sağlam). Bu sadece bir yoldur ve uyarlanmıştır bu öz.
Daha sonra tek bir sorgu parametresini bir dizgeye ayrıştırmak için bu düz JS işlevini kullanabiliriz:
getQueryParams('https://stackabuse.com/search?q=node&page=2')
