Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

Web Geliştirmede `Intl` API ile Profesyonel Uluslararasılaştırma (i18n) Rehberi 🌍

codrix

Üye
Katılım
14 Mart 2026
Mesajlar
11
Web Geliştirmede `Intl` API ile Profesyonel Uluslararasılaştırma (i18n) Rehberi 🌍

Selam dostlar! Uzun zamandır forumda takılıyorum ve birçok projede, özellikle de global kullanıcı kitlesi hedefleyenlerde, ortak bir sorunla karşılaşıyoruz: uluslararasılaştırma (i18n). Tarihler, saatler, para birimleri, sayılar... Her ülkenin kendine özgü bir formatı var. Bu işleri manuel yapmaya kalktığınızda hem kod şişiyor hem de hata yapma ihtimaliniz artıyor. İşte tam burada, JavaScript'in az bilinen hazinelerinden biri olan `Intl` (Internationalization) API imdadımıza yetişiyor. Bugün bu güçlü aracı birlikte inceleyelim. 🚀

`Intl` API Nedir ve Neden Kullanmalıyız?

`Intl` nesnesi, ECMAScript Internationalization API'nin bir parçasıdır ve tarayıcılarda ve Node.js'de (çoğu özellik) yerleşik olarak bulunur. Temel amacı, dil ve kültüre duyarlı metin karşılaştırma, sayı, tarih ve saat biçimlendirmesi sağlamaktır.

Neden kullanmalısınız?
  • Yerleşik ve Performanslı: Harici kütüphanelere bağımlılığı azaltır. Tarayıcı/çevre tarafından optimize edilmiş native kod çalıştırır.
  • Karmaşık Mantıklardan Kurtarır: "Türkçe'de bin ayırıcı nokta, İngilizce'de virgül" gibi kuralları sizin kodlamanıza gerek kalmaz.
  • Kullanıcı Deneyimini (UX) Zirveye Taşır: Kullanıcı, kendi dil ve kültür formatında içerik görür. Bu güven ve profesyonellik hissi yaratır.
  • Bakımı Kolay: Merkezi ve standart bir API ile çalışırsınız.

Pratikte `Intl` Kullanımı: Başlıca Formatlayıcılar

Hadi şimdi bu API'nin en sık kullanılan üç silahşörüne bakalım: `NumberFormat`, `DateTimeFormat` ve `RelativeTimeFormat`.

  • 1. `Intl.NumberFormat`: Sayıları ve Parayı Biçimlendirme
    Para birimleri, yüzdeler, ondalık ayraçlar... Hepsi burada.
    Kod:
    // Türkçe para formatı
    const trCurrencyFormatter = new Intl.NumberFormat('tr-TR', {
      style: 'currency',
      currency: 'TRY'
    });
    console.log(trCurrencyFormatter.format(12345.67)); // "₺12.345,67"
    
    // İngilizce (ABD) para formatı
    const usCurrencyFormatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    });
    console.log(usCurrencyFormatter.format(12345.67)); // "$12,345.67"
    
    // Almanca binlik ayracı ve ondalık gösterimi
    const deNumberFormatter = new Intl.NumberFormat('de-DE');
    console.log(deNumberFormatter.format(1234567.89)); // "1.234.567,89"
    
    // Yüzde formatı
    const percentFormatter = new Intl.NumberFormat('tr-TR', { style: 'percent' });
    console.log(percentFormatter.format(0.753)); // "%75"
    Gördüğünüz gibi, sadece locale (ör. 'tr-TR', 'en-US') ve options nesnesini değiştirerek mükemmel sonuçlar alıyoruz. ⚙️
  • 2. `Intl.DateTimeFormat`: Tarih ve Saatleri Biçimlendirme
    "12/25/2023" mi "25.12.2023" mü? Hangi dilde haftanın günü yazılacak? Bu formatter tüm bu karışıklığı çözüyor.
    Kod:
    const now = new Date();
    
    // Türkçe uzun tarih formatı
    const trDateFormatter = new Intl.DateTimeFormat('tr-TR', {
      dateStyle: 'full',
      timeStyle: 'long'
    });
    console.log(trDateFormatter.format(now));
    // Örnek: "26 Ekim 2023 Perşembe 14:30:45 GMT+3"
    
    // İngilizce kısa tarih formatı
    const enDateFormatter = new Intl.DateTimeFormat('en-GB', { // İngiliz İngilizcesi
      dateStyle: 'short'
    });
    console.log(enDateFormatter.format(now)); // "26/10/2023"
    
    // Sadece ay ve günü Japonca gösterelim
    const jpDateFormatter = new Intl.DateTimeFormat('ja-JP', {
      month: 'long',
      day: 'numeric'
    });
    console.log(jpDateFormatter.format(now)); // "10月26日"
    `dateStyle` ve `timeStyle` gibi yüksek seviye seçenekler hayatı çok kolaylaştırıyor. Ayrıca `weekday`, `year`, `month`, `day`, `hour`, `minute`, `second` gibi daha detaylı kontroller de mümkün.
  • 3. `Intl.RelativeTimeFormat`: Göreceli Zamanları Biçimlendirme
    "3 gün önce", "gelecek ay" gibi ifadeleri otomatik ve doğru bir şekilde oluşturmak için birebir. Bu, sosyal medya uygulamaları veya bildirim sistemleri için altın değerinde. 💎
    Kod:
    const rtfTr = new Intl.RelativeTimeFormat('tr', { numeric: 'auto' }); // 'auto': "dün", "yarın" gibi ifadeler kullanır.
    
    console.log(rtfTr.format(-1, 'day'));  // "dün"
    console.log(rtfTr.format(2, 'day'));   // "2 gün sonra"
    console.log(rtfTr.format(10, 'hour')); // "10 saat sonra"
    console.log(rtfTr.format(1, 'month')); // "gelecek ay"
    
    const rtfEn = new Intl.RelativeTimeFormat('en', { style: 'long' });
    console.log(rtfEn.format(-5, 'year')); // "5 years ago"

`Intl` ile Metin Karşılaştırma ve Sıralama

`Intl.Collator` nesnesi, dil kurallarına uygun dize karşılaştırması yapmanızı sağlar. Özellikle alfabe sıralaması farklı olan dillerde (Türkçe'de ı/i, İngilizce'de aksanlı harfler) çok kritiktir.
Kod:
const names = ["Zeynep", "İbrahim", "şevket", "Ahmet", "Çağla"];
const trCollator = new Intl.Collator('tr');

names.sort(trCollator.compare);
console.log(names); // Türkçe alfabe sırasına göre: ["Ahmet", "Çağla", "İbrahim", "şevket", "Zeynep"]

// Karşılaştırma olmadan standart sort:
names.sort();
console.log(names); // Yanlış sıralama: ["Ahmet", "Zeynep", "İbrahim", "şevket", "Çağla"]

Kullanıcının Tercih Ettiği Dili (`locale`) Tespit Etmek

Locale'ı nereden alacağız? En iyi yöntem, öncelikle kullanıcının tarayıcı/cihaz dilini kullanmak, isteğe bağlı olarak da uygulama içinde değiştirme seçeneği sunmaktır.
Kod:
// Kullanıcının tarayıcı dilini al (dizi olarak gelir, ilk tercih en yüksek önceliklidir)
const userPreferredLanguages = navigator.languages; // Örn: ["tr-TR", "tr", "en-US", "en"]
const defaultLocale = userPreferredLanguages[0] || 'en-US';

// Veya sadece ana dili al
const userLanguage = navigator.language; // Örn: "tr-TR"

// Bu locale'ı Intl formatter'larınızda kullanın
const userCurrencyFormatter = new Intl.NumberFormat(userLanguage, { style: 'currency', currency: 'EUR' });

Projelerinizde `Intl` API'yi Kullanırken İzlenecek Yol

  • 1. Bir Yardımcı (Helper) Modülü Oluşturun: Projenizin ihtiyaçlarına göre `formatCurrency`, `formatDate`, `formatRelativeTime` gibi fonksiyonlar içeren bir modül yazın. Bu, tüm uygulamada tutarlılık sağlar.
  • 2. Locale'ı Dinamik Yönetin: Locale bilgisini bir context (React), store (Vuex/Pinia) veya basit bir state yönetimi ile uygulama genelinde erişilebilir kılın.
  • 3. Fallback (Yedek) Locale Tanımlayın: Kullanıcının dilini desteklemiyorsanız, varsayılan bir locale'a (ör. 'en-US') düşmeyi unutmayın.
  • 4. Performansı Aklınızda Tutun: `new Intl.NumberFormat()` gibi constructor'ları sık sık çağırmak maliyetli olabilir. Mümkünse formatter nesnelerini önceden oluşturup (memoize edip) tekrar kullanın.
  • 5. Erişilebilirliği Unutmayın: `DateTimeFormat` ile sadece sayısal tarih verirseniz, ekran okuyucular için sorun olabilir. `dateStyle: 'full'` gibi seçenekler daha anlamlı metinler üretir. ♿

**Sonuç olarak**, `Intl` API, modern web uygulamalarınızı gerçekten global bir ürün haline getirmenin en temiz ve güçlü yollarından biridir. Başlangıçta biraz yabancı gelebilir, ancak bir kez alıştığınızda, tarih/para/sayı formatlama kabuslarından tamamen kurtulduğunuzu göreceksiniz.

Umarım bu rehber faydalı olmuştur! Konuyla ilgili sorularınızı veya kendi `Intl` deneyimlerinizi aşağıdaki yorumlarda paylaşmaktan çekinmeyin. Bir sonraki yazıda görüşmek üzere, kodlamaya devam! 💻
 

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Geri