URLSearchParams ile kolay URL değiştirme

Eric Bidelman
Twitter GitHub Ana sayfa

URLSearchParams API, URL'nin bit ve parçalarına tutarlı bir arayüz sağlar ve sorgu dizesinin (? sonrası) basit bir şekilde değiştirilmesine olanak tanır.

Geliştiriciler geleneksel olarak sorgu parametrelerini URL'den çıkarmak için normal ifadeler ve dize bölme kullanır. Kendimize karşı dürüst olursak bu hiç eğlenceli olmaz. Bu yöntem yorucu ve hataya meyilli olabilir. Karanlık sırlarımdan biri, Google Santa Tracker ve Google I/O 2015 web dahil olmak üzere birkaç büyük Google.com uygulamasında aynı get|set|removeURLParameter yardımcı yöntemleri kullanmış olmam.

Şimdi, bunu bizim için yapan düzgün bir API'nin zamanı geldi.

URLSearchParams API'sı

Demoyu deneyin

Chrome 49, URL spesifikasyonundan URLSearchParams yöntemini uygular. Bu API, URL sorgu parametreleriyle uğraşmak için yararlı olur. URLSearchParams ürününün URL'ler için eşdeğer bir kolay olduğunu düşünüyorum. FormData, formlar için de o kadar kolaydı.

Peki bununla ne yapabilirsiniz? Bir URL dizesi sayesinde, parametre değerlerini kolayca çıkartabilirsiniz:

// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+string&version=1&person=Eric');

params.get('q') === "search string"
params.get('version') === "1"
Array.from(params).length === 3

for (let p of params) {
    console.log(p);
}

parametre değeri ayarlayın:

params.set('version', 2);

mevcut bir parametre için başka bir değer append:

params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']

parametreleri sil:

params.delete('person');

URL'lerle çalışma

Çoğu zaman, muhtemelen tam URL'lerle veya uygulamanızın URL'sini değiştirirsiniz. URL oluşturucu, özellikle aşağıdaki durumlarda kullanışlı olabilir:

const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);

params.has('baz') === true
params.toString() === 'foo=1&bar=2&baz=3'

URL'de gerçek değişiklikler yapmak için parametreleri alabilir, değerlerini güncelleyebilir ve ardından URL'yi güncellemek için history.replaceState işlevini kullanabilirsiniz.

// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);

window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0

Burada, uygulamanın mevcut URL yolundan ve değiştirilen parametrelerden güncellenmiş bir URL'yi yeniden oluşturmak için ES6 şablon dizelerini kullandım.

URL'lerin kullanıldığı diğer yerlerle entegrasyon

Varsayılan olarak, fetch() API isteği içinde FormData gönderildiğinde çok parçalı bir gövde oluşturulur. Gerekirse URLSearchParams, çok parçalı MIME yerine url kodlamalı POST verileri için alternatif bir mekanizma sağlar.

const params = new URLSearchParams();
params.append('api_key', '1234567890');

fetch('https://example.com/api', {
    method: 'POST',
    body: params
}).then(...)

Henüz Chrome'da uygulanmamış olsa da URLSearchParams, URL oluşturucu ve a etiketleriyle de entegre olur. Her ikisi de sorgu parametrelerine erişim için salt okunur bir özellik (.searchParams) sağlayarak yeni arkadaşımızı destekler:

const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';

Bağlantılar bir .searchParams özelliği de alır:

const a = document.createElement('a');
a.href = 'https://example.com?filter=api';

// a.searchParams.get('filter') === 'api';

Özellik algılama ve tarayıcı desteği

Şu anda Chrome 49, Firefox 44 ve Opera 36, URLSearchParams işletim sistemini desteklemektedir.

if ('URLSearchParams' in window) {
    // Browser supports URLSearchParams
}

Çoklu dolgular için github.com/WebReflection/url-search-params adresinde bulunan seçeneği öneririz.

Demo

Örneği deneyin!

URLSearchParams uygulamasını gerçek bir uygulamada görmek için Polymer'in Material Design iconset Üreticisi'ne göz atın. Bunu derin bağlantıdan uygulamanın ilk durumunu ayarlamak için kullandım. Oldukça kullanışlı :)