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?
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`.
`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.
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.
Projelerinizde `Intl` API'yi Kullanırken İzlenecek Yol
**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!
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.
Gördüğünüz gibi, sadece locale (ör. 'tr-TR', 'en-US') ve options nesnesini değiştirerek mükemmel sonuçlar alıyoruz.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"
- 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.
`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.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日"
- 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!