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 geleneksel olarak normal ifade ve dize bölme işlemlerini kullanır. Dürüst olmak gerekirse, bu hiç de eğlenceli değil. Bu usul yorucu ve hata yapmaya müsait bir süreç 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ığı gibi URL'ler için de benzer bir kolaylık sağlıyor.

Peki bu özelliği kullanarak neler yapabilirsiniz? 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 ekleme:

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ışıyor veya uygulamanızın URL'sini değiştiriyor olacaksınız. 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

Varsayılan olarak, fetch() API isteğinde FormData göndermek ç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 bir .searchParams mülkü 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'ü desteklemektedir.

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

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

Demo

Örneği deneyin.

URLSearchParams adlı yeri gerçek dünyaya ait bir uygulamada görmek için Polymer'in malzeme tasarımı Simge Kümesi Oluşturma Aracı'na göz atın. Bunu, bir derin bağlantıdan uygulamanın başlangıç durumunu ayarlamak için kullandım. Oldukça kullanışlı :)