URLSearchParams ile kolay URL değiştirme

URLSearchParams API, URL'nin parçaları için tutarlı bir arayüz sağlar ve sorgu dizesinin (?'den sonraki kısım) basit bir şekilde değiştirilmesine olanak tanır.

Geliştiriciler, URL'den sorgu parametrelerini almak için genellikle normal ifade ve dize bölme işlemlerini kullanır. Kendimize karşı dürüst olursak bu hiç de eğlenceli bir durum değil. Bu işlemin doğru şekilde yapılması zahmetli ve hatalara açık olabilir. Gizli sırlarımdan biri, Google Noel Baba Takip ve Google I/O 2015 web dahil olmak üzere çeşitli büyük Google.com uygulamalarında aynı get|set|removeURLParameter yardımcı yöntemleri yeniden kullandığımdır.

Bu işlemleri bizim için yapacak uygun bir API'nin zamanı geldi.

URLSearchParams API

Demoyu deneyin

Chrome 49, URL sorgu parametreleriyle uğraşmak için kullanışlı bir API olan URL spesifikasyonundan URLSearchParams'ü uygular. URLSearchParams'ü, FormData'ün formlar için yaptığı kolaylığı URL'ler için yapan bir özellik olarak düşünüyorum.

Peki bu özelliği nasıl kullanabilirsiniz? Bir URL dizesi verildiğinde parametre değerlerini kolayca ayıklayabilirsiniz:

// 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ğerini ayarlama:

params.set('version', 2);

Mevcut bir parametreye başka bir değer append:

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

Parametreleri silmek için:

params.delete('person');

URL'lerle çalışma

Çoğu zaman tam URL'lerle çalışır veya uygulamanızın URL'sini değiştirirsiniz. URL kurucusu ö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'ü 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ştirilmiş parametrelerden güncellenmiş bir URL oluşturmak için ES6 şablon dizelerini kullandım.

Diğer yerlerle entegrasyon için URL'ler kullanılır

fetch() API isteğinde FormData göndermek varsayılan olarak çok bölümlü bir gövde oluşturur. Gerekirse URLSearchParams, POST verileri için mime multipart yerine URL kodlaması yapılan 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 kurucu ve a etiketleriyle de entegre olur. Her ikisi de sorgu parametrelerine erişmek için salt okunur bir .searchParams mülkü sağlayarak yeni arkadaşımızı destekler:

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

Bağlantılar da bir .searchParams özelliği 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'ü desteklemektedir.

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

github.com/WebReflection/url-search-params adresindeki polyfill'i öneririm.

Demo

Örneği deneyin.

URLSearchParams'ü gerçek bir uygulamada görmek için Polymer'in Materyal Tasarım Simge Grubu Oluşturucusu'na göz atın. Bu yöntemi, uygulamanın derin bağlantıdan başlangıç durumunu ayarlamak için kullandım. Oldukça kullanışlı :)