Web Geliştirmede `new URL()` API'si ile URL'leri Sorunsuz Yönetme Rehberi 🧩

devnix · Bugün 01:12

Web Geliştirmede `new URL()` API'si ile URL'leri Sorunsuz Yönetme Rehberi

Selam dostlar!

Uzun süredir forumda backend ve frontend projelerimden bahsediyorum. Bugün, özellikle routing (yönlendirme), query string (sorgu parametresi) işleme veya harici bir API'den gelen linkleri ayrıştırma gibi işler yaparken hayat kurtaran, ama belki de yeterince önemsenmeyen bir JavaScript özelliğinden bahsetmek istiyorum: `new URL()` constructor'ı.

Eminim birçoğunuz URL'leri parçalamak için `split()`, `substring()` veya regex ile uğraşmışsınızdır.

İşte bu karmaşaya son vermenin zamanı geldi. `new URL()` bize bir URL'yi ayrıştırmak ve onunla çalışmak için standart, güvenilir ve tarayıcı dostu bir arayüz sunuyor.

Neden `new URL()`? String Manipülasyon Neden Riskli?

Basit bir örnekle başlayalım. Diyelim ki şu URL'den `id` parametresini almak istiyorsunuz:
`https://bingunluk.com/profil?userId=42&tab=ayarlar`

Eski usül yaklaşım şöyle olabilirdi:

Kod:

let urlString = "https://bingunluk.com/profil?userId=42&tab=ayarlar";
let paramsString = urlString.split('?')[1]; // "userId=42&tab=ayarlar"
let paramsArray = paramsString.split('&'); // ["userId=42", "tab=ayarlar"]
let idParam = paramsArray.find(p => p.startsWith('userId')); // "userId=42"
let userId = idParam ? idParam.split('=')[1] : null; // "42"

Bu kod kırılgandır! Ya URL'de `#` (hash) varsa? Ya `?` karakteri yoksa? `new URL()` ise tüm bu detayları sizin için hallediyor.

`new URL()` Nasıl Çalışır?

Kullanımı son derece basit:

Kod:

let url = new URL('https://bingunluk.com/profil?userId=42&tab=ayarlar');

Bu `url` artık bir URL nesnesidir ve aşağıdaki gibi özelliklere sahiptir:

`url.href`: Tam URL'yi verir -> `"https://bingunluk.com/profil?userId=42&tab=ayarlar"`
`url.origin`: Kök (protocol + host + port) -> `"https://bingunluk.com"`
`url.protocol`: Protokol -> `"https:"`
`url.host`: Host (domain + port) -> `"bingunluk.com"`
`url.hostname`: Sadece domain -> `"bingunluk.com"`
`url.pathname`: Yol (path) -> `"/profil"`
`url.search`: `?` ile başlayan tüm sorgu string'i -> `"?userId=42&tab=ayarlar"`
`url.hash`: `#` ile başlayan hash/fragment -> `""` (boş)
`url.searchParams`: Bu en önemlisi! Sorgu parametreleriyle çalışmak için `URLSearchParams` nesnesi döner.

Sihirin Gerçek Kaynağı: `url.searchParams`

`searchParams` özelliği, sorgu parametrelerini yönetmek için bir dizi harika metot sunar:

Kod:

let url = new URL('https://bingunluk.com/profil?userId=42&tab=ayarlar');
let params = url.searchParams;

// Bir parametrenin değerini almak
console.log(params.get('userId')); // "42"
console.log(params.get('tab'));    // "ayarlar"
console.log(params.get('token'));  // null (yoksa null döner)

// Tüm parametreleri döngüyle gezmek
for (let [key, value] of params) {
  console.log(key, value); // "userId", "42" ve "tab", "ayarlar" yazar
}

// Parametre eklemek veya değiştirmek
params.set('theme', 'dark'); // URL şimdi: ...&theme=dark
params.append('filter', 'new'); // Aynı isimde birden fazla değer ekler.

// Parametre var mı diye kontrol etmek
console.log(params.has('userId')); // true

// Bir parametreyi silmek
params.delete('tab');

// Tüm parametreleri string olarak almak
console.log(params.toString()); // "userId=42&theme=dark&filter=new"

Pratik Kullanım Senaryoları

1. Mevcut Sayfa URL'sini İşlemek: Tarayıcıda `window.location` bir string DEĞİL, zaten bir URL nesnesidir! Ama onu da `new URL()` ile sarmalayabilirsiniz.

Kod:

    // Mevcut sayfanın 'page' parametresini alalım
    let currentUrl = new URL(window.location.href);
    let pageNum = currentUrl.searchParams.get('page') || 1;
    console.log(`Geçerli sayfa: ${pageNum}`);

2. Göreli (Relative) URL'lerle Çalışmak: `new URL()` ikinci bir parametre olarak base URL (temel URL) ister. Bu, göreli yolları mutlak URL'ye çevirmek için mükemmeldir.

Kod:

    let base = 'https://bingunluk.com';
    let relativePath = '/forum/web-gelistirme';

    let absoluteUrl = new URL(relativePath, base);
    console.log(absoluteUrl.href); // "https://bingunluk.com/forum/web-gelistirme"

Bu, özellikle API endpoint'lerini veya asset (kaynak) yollarını dinamik olarak oluştururken çok işe yarar.

3. Güvenli URL Doğrulama: Geçersiz bir URL ile `new URL()` oluşturmaya çalışırsanız, bir `TypeError` alırsınız. Bu, basit bir doğrulama mekanizması olarak kullanılabilir.

Kod:

    function isValidUrl(string) {
      try {
        new URL(string);
        return true;
      } catch (_) {
        return false;
      }
    }
    console.log(isValidUrl('bingunluk')); // false
    console.log(isValidUrl('https://bingunluk.com')); // true

`new URL()` vs `URLSearchParams` Tek Başına

Sadece sorgu string'i ile uğraşacaksanız, doğrudan `URLSearchParams` constructor'ını da kullanabilirsiniz:

Kod:

// Sadece query string'den
let paramsOnly = new URLSearchParams('?userId=42&tab=ayarlar');
// Veya doğrudan obje ile oluşturabilirsiniz
let paramsFromObj = new URLSearchParams({ userId: 42, tab: 'ayarlar' });
console.log(paramsFromObj.toString()); // "userId=42&tab=ayarlar"

Ancak, host, path gibi diğer bileşenlere de ihtiyacınız varsa, `new URL()` kullanmak daha kapsamlı ve temizdir.

Sonuç

`new URL()` ve `URLSearchParams`, modern JavaScript projelerinde URL manipülasyonu için vazgeçilmez araçlardır.

Kodunuzu daha okunabilir, güvenli ve bakımı kolay hale getirirler. Bir dahaki sefere bir URL'yi parçalamaya kalkışmadan önce, bu yerleşik API'nin işinizi çok daha kolay halledebileceğini hatırlayın.

Deneyimlerinizi veya bu API ile yaptığınız havalı şeyleri yorumlarda paylaşmayı unutmayın! Kodlamaya devam edin!

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Web Geliştirmede `new URL()` API'si ile URL'leri Sorunsuz Yönetme Rehberi 🧩

devnix

Tema özelleştirme sistemi

Tam ekran yada dar ekran