JavaScript’te toLocaleString ile Uluslararasılaşmış Biçimlendirme

JavaScript’te toLocaleString ile Uluslararasılaşmış Biçimlendirme

JavaScript’in güçlü metotlarından biri olan toLocaleString(), sayıları, tarihleri ve hatta dizi elemanlarını kullanıcının yerel ayarına uygun bir şekilde biçimlendirmek için kullanılır. Bu rehber, toLocaleString() metodunun Number, Date ve Array nesneleriyle nasıl kullanıldığını, çeşitli seçeneklerini ve pratik uygulamalarını detaylı bir şekilde açıklayacaktır. Uluslararası uygulamalar geliştirirken kullanıcı deneyimini zenginleştirmek için bu metodun sunduğu esneklik ve güç vazgeçilmezdir.

Giriş: toLocaleString Nedir?

toLocaleString() metodu, bir nesneyi dile duyarlı bir dizgeye dönüştürmek için tasarlanmıştır. Bu, özellikle farklı coğrafyalardaki kullanıcılar için sayıların, para birimlerinin, tarihlerin ve saatlerin doğru ve anlaşılır bir şekilde gösterilmesi gerektiğinde kritik öneme sahiptir. Örneğin, Amerika Birleşik Devletleri’nde “1,234.56” olarak yazılan bir sayı, Almanya’da “1.234,56” olarak görünür. toLocaleString() bu tür farklılıkları otomatik olarak ele alarak geliştiricinin işini kolaylaştırır.

Metot genellikle iki ana argüman alır:
1. locales (yerel ayarlar): Biçimlendirme için kullanılacak bir veya daha fazla dil etiketi içeren bir dizge veya dizge dizisi (örneğin, 'en-US', 'de-DE', ['tr-TR', 'en-US']).
2. options (seçenekler): Biçimlendirmeyi özelleştirmek için kullanılan özelliklere sahip bir nesne.

Bu rehberde, Number, Date ve Array prototiplerinde toLocaleString()‘in nasıl farklı davrandığını ve her bir durum için özel seçenekleri inceleyeceğiz.

Sayılarla toLocaleString Kullanımı (Number.prototype.toLocaleString)

Sayıları biçimlendirmek, toLocaleString() metodunun en yaygın kullanımlarından biridir. Para birimleri, yüzdeler veya sadece büyük sayıların okunabilirliğini artırmak için idealdir.

Temel Kullanım ve Yerel Ayar Belirtme

Varsayılan olarak, toLocaleString() yerel çalışma ortamının (tarayıcı veya Node.js) yerel ayarlarını kullanır. Ancak, belirli bir yerel ayarı açıkça belirtebilirsiniz.

const sayi = 123456.789;

// Varsayılan yerel ayar (örneğin, tarayıcınızın ayarına göre)
console.log(sayi.toLocaleString()); // Çıktı: "123.456,789" (Türkçe sistemde) veya "123,456.789" (İngilizce sistemde)

// İngilizce (Amerika Birleşik Devletleri) yerel ayarı
console.log(sayi.toLocaleString('en-US')); // Çıktı: "123,456.789"

// Almanca (Almanya) yerel ayarı
console.log(sayi.toLocaleString('de-DE')); // Çıktı: "123.456,789"

// Türkçe (Türkiye) yerel ayarı
console.log(sayi.toLocaleString('tr-TR')); // Çıktı: "123.456,789"

// Arapça (Suudi Arabistan) yerel ayarı
console.log(sayi.toLocaleString('ar-SA')); // Çıktı: "١٢٣٬٤٥٦٫٧٨٩"

Seçenek Nesnesi ile Biçimlendirme

options nesnesi, sayıların nasıl biçimlendirileceği üzerinde çok daha fazla kontrol sağlar.

const urunFiyati = 1234.56;
const indirimOrani = 0.25;
const buyukSayi = 1234567890;

// Para Birimi Biçimlendirme
console.log(urunFiyati.toLocaleString('tr-TR', {
  style: 'currency',
  currency: 'TRY'
}));
// Çıktı: "1.234,56 TL"

console.log(urunFiyati.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol' // Varsayılan
}));
// Çıktı: "$1,234.56"

console.log(urunFiyati.toLocaleString('en-GB', {
  style: 'currency',
  currency: 'GBP',
  currencyDisplay: 'name'
}));
// Çıktı: "1,234.56 British pounds"

// Yüzde Biçimlendirme
console.log(indirimOrani.toLocaleString('tr-TR', {
  style: 'percent'
}));
// Çıktı: "%25"

// Ondalık Basamak Kontrolü
const pi = 3.14159;
console.log(pi.toLocaleString('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
}));
// Çıktı: "3.14"

// Birim Biçimlendirme (ECMAScript 2020+)
const mesafeMetre = 1234.56;
console.log(mesafeMetre.toLocaleString('en-US', {
  style: 'unit',
  unit: 'meter',
  unitDisplay: 'long'
}));
// Çıktı: "1,234.56 meters"

console.log(mesafeMetre.toLocaleString('tr-TR', {
  style: 'unit',
  unit: 'meter',
  unitDisplay: 'short'
}));
// Çıktı: "1.234,56 m"

// Sayı Notasyonu (compact, scientific, engineering)
console.log(buyukSayi.toLocaleString('en-US', {
  notation: 'compact'
}));
// Çıktı: "1.23B" (Billion)

console.log(buyukSayi.toLocaleString('tr-TR', {
  notation: 'compact'
}));
// Çıktı: "1,23 Milyar"

console.log(123000..toLocaleString('en-US', {
  notation: 'compact'
}));
// Çıktı: "123K"

Pratik Bilgiler

* currencyDisplay seçeneği symbol, code veya name değerlerini alabilir. Bu, para birimi sembolünün ($, €), ISO kodunun (USD, EUR) veya tam adının (US dollars, Euro) gösterilip gösterilmeyeceğini belirler.
* Büyük sayıları kısaltmak için notation: 'compact' seçeneği, sosyal medya takipçi sayıları veya finansal raporlar gibi alanlarda okunabilirliği artırır.
* useGrouping seçeneği (varsayılan olarak true), binlik ayırıcıların kullanılıp kullanılmayacağını kontrol eder.

Tarihlerle toLocaleString Kullanımı (Date.prototype.toLocaleString)

Tarih ve saatleri biçimlendirmek, toLocaleString()‘in bir başka güçlü yönüdür. Kullanıcının beklentilerine uygun olarak gün, ay, yıl, saat, dakika ve saniye bilgilerini çeşitli formatlarda gösterebilirsiniz.

Temel Kullanım ve Yerel Ayar Belirtme

Date nesnesi için toLocaleString() metodu, yerel ayara göre tarih ve saati birleştirir.

const simdi = new Date();

// Varsayılan yerel ayar
console.log(simdi.toLocaleString()); // Çıktı: "20.05.2024 14:30:00" (Türkçe sistemde)

// İngilizce (Amerika Birleşik Devletleri) yerel ayarı
console.log(simdi.toLocaleString('en-US')); // Çıktı: "5/20/2024, 2:30:00 PM"

// Almanca (Almanya) yerel ayarı
console.log(simdi.toLocaleString('de-DE')); // Çıktı: "20.5.2024, 14:30:00"

Seçenek Nesnesi ile Biçimlendirme

options nesnesi, tarih ve saat bileşenlerinin (yıl, ay, gün, saat, dakika, saniye) nasıl gösterileceğini detaylı bir şekilde kontrol etmenizi sağlar.

const dogumGunu = new Date('1990-08-15T10:00:00');

// Sadece tarih (uzun format)
console.log(dogumGunu.toLocaleString('tr-TR', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}));
// Çıktı: "Perşembe, 15 Ağustos 1990"

// Sadece saat (kısa format)
console.log(dogumGunu.toLocaleString('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: true
}));
// Çıktı: "10:00:00 AM"

// Hem tarih hem saat (kombine)
console.log(dogumGunu.toLocaleString('fr-FR', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit'
}));
// Çıktı: "15/08/1990 10:00"

// dateStyle ve timeStyle kullanarak daha basit biçimlendirme (ECMAScript 2020+)
console.log(simdi.toLocaleString('en-US', {
  dateStyle: 'full',
  timeStyle: 'long'
}));
// Çıktı: "Monday, May 20, 2024 at 2:30:00 PM GMT+3" (GMT+3 zaman dilimi ile)

console.log(simdi.toLocaleString('tr-TR', {
  dateStyle: 'medium',
  timeStyle: 'short'
}));
// Çıktı: "20 May 2024, 14:30"

// Zaman Dilimi Belirtme
const newYorkSaati = new Date();
console.log(newYorkSaati.toLocaleString('en-US', {
  timeZone: 'America/New_York',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  timeZoneName: 'short'
}));
// Çıktı: "07:30:00 AM EDT" (Eğer şu anki saat 14:30 ise)

Pratik Bilgiler

* dateStyle ve timeStyle seçenekleri (full, long, medium, short), karmaşık seçenek nesneleri oluşturmak yerine yaygın tarih/saat formatlarını kolayca uygulamanızı sağlar.
* timeZone seçeneği ile belirli bir zaman dilimine göre tarih ve saat gösterebilirsiniz. Bu, uluslararası uygulamalarda farklı zaman dilimlerindeki etkinlikleri göstermek için çok kullanışlıdır.
* hour12: true veya false ile 12 saatlik (AM/PM) veya 24 saatlik format arasında geçiş yapabilirsiniz.

Dizilerle toLocaleString Kullanımı (Array.prototype.toLocaleString)

Array.prototype.toLocaleString() metodu, bir dizinin elemanlarını yerel ayara uygun dizgeler halinde birleştirir. Bu metot, her bir dizi elemanının kendi toLocaleString() metodunu çağırır ve sonuçları yerel ayara uygun bir liste ayırıcı ile birleştirir.

Temel Kullanım

Varsayılan olarak, bu metot dizinin elemanlarını virgülle ayırır. Ancak, elemanlar sayı veya tarih ise, kendi toLocaleString() metotları çağrıldığı için daha karmaşık sonuçlar elde edilebilir.

const sayiDizisi = [100, 2000, 30000];
const tarihDizisi = [new Date('2023-01-01'), new Date('2024-02-02')];
const stringDizisi = ['elma', 'armut', 'çilek'];
const karisikDizi = [123.45, new Date(), 'merhaba'];

// Sayı dizisi
console.log(sayiDizisi.toLocaleString('tr-TR'));
// Çıktı: "100, 2.000, 30.000" (Her sayı kendi toLocaleString'ini çağırır)

// Tarih dizisi
console.log(tarihDizisi.toLocaleString('en-US'));
// Çıktı: "1/1/2023, 12:00:00 AM, 2/2/2024, 12:00:00 AM" (Her tarih kendi toLocaleString'ini çağırır)

// String dizisi (genellikle join(',') ile aynı)
console.log(stringDizisi.toLocaleString('tr-TR'));
// Çıktı: "elma,armut,çilek"

// Karışık dizi
console.log(karisikDizi.toLocaleString('de-DE'));
// Çıktı: "123,45, 20.5.2024, 14:30:00, merhaba" (Örnek çıktı)

Elemanların Kendi toLocaleString Metodunu Kullanması

Array.prototype.toLocaleString()‘in kritik noktası, dizideki her elemanın (eğer tanımlıysa) kendi toLocaleString() metodunu çağırmasıdır. Bu, dizideki sayıların veya tarihlerin, Array.prototype.toLocaleString()‘e geçirdiğiniz locales ve options argümanlarıyla biçimlendirileceği anlamına gelir.

const urunFiyatlari = [19.99, 123.45, 999.99];

// Array.toLocaleString'e geçirilen seçenekler, sayı elemanlarının toLocaleString'ine uygulanır.
console.log(urunFiyatlari.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD'
}));
// Çıktı: "$19.99,$123.45,$999.99" (Ayırıcı karakter yerel ayara göre değişebilir)

const etkinlikTarihleri = [new Date('2024-06-15'), new Date('2024-07-20')];

console.log(etkinlikTarihleri.toLocaleString('tr-TR', {
  year: 'numeric',
  month: 'short',
  day: 'numeric'
}));
// Çıktı: "15 Haz 2024, 20 Tem 2024" (Ayırıcı karakter yerel ayara göre değişebilir)

Pratik Bilgiler

* Array.prototype.toLocaleString() özellikle, dizideki tüm elemanların aynı türde (sayı veya tarih gibi) ve aynı biçimlendirme kurallarına sahip olmasını istediğiniz durumlarda kullanışlıdır.
* Eğer dizideki elemanlar farklı türdeyse veya her eleman için farklı biçimlendirme kuralları uygulamak istiyorsanız, map() metodunu kullanarak her elemanı ayrı ayrı biçimlendirip sonra join() ile birleştirmek daha esnek bir yaklaşım olabilir.
* Array.prototype.toLocaleString()‘in options nesnesi, Number.prototype.toLocaleString() veya Date.prototype.toLocaleString() için geçerli olan tüm seçenekleri destekler. Ancak, bu seçenekler yalnızca dizinin sayı veya tarih elemanlarına uygulanır.

Sonuç ve Sıkça Sorulan Sorular (SSS)

toLocaleString() metodu, JavaScript’te uluslararasılaşmış uygulamalar geliştirirken sayıları, tarihleri ve dizileri kullanıcı dostu bir şekilde biçimlendirmek için güçlü ve esnek bir araçtır. Yerel ayar ve seçenek nesneleri sayesinde, uygulamanızın dünya genelindeki kullanıcılar için doğru ve anlamlı bilgiler sunmasını sağlayabilirsiniz.

Sıkça Sorulan Sorular (SSS)

toLocaleString ile toString arasındaki fark nedir?

toString() metodu, nesnenin basit bir metin temsilini döndürür ve yerel ayar veya biçimlendirme seçeneklerini dikkate almaz. toLocaleString() ise, kullanıcının yerel ayarını ve belirtilen seçenekleri kullanarak dile duyarlı, biçimlendirilmiş bir metin döndürür. Örneğin, bir sayı için toString() her zaman 123456.789 döndürürken, toLocaleString() yerel ayara göre 123.456,789 veya 123,456.789 döndürebilir.

Desteklenmeyen bir yerel ayar belirtilirse ne olur?

Eğer belirtilen yerel ayar desteklenmiyorsa, JavaScript motoru en uygun varsayılan yerel ayarı kullanmaya çalışır. Genellikle bu, sistemin varsayılan yerel ayarı veya en yakın genel dil ailesidir (örneğin, tr-TR yerine sadece tr kullanmak gibi). Geçersiz bir dil etiketi belirtilirse bir RangeError hatası fırlatılabilir.

Tüm tarayıcılarda aynı sonucu verir mi?

Genel olarak, toLocaleString()‘in temel işlevselliği ve ana seçenekleri tüm modern tarayıcılarda tutarlı bir şekilde çalışır. Ancak, bazı daha yeni veya daha az yaygın seçenekler (örneğin, notation: 'compact' veya unit birimleri) veya belirli yerel ayarların tam biçimlendirme detayları tarayıcılar ve Node.js versiyonları arasında küçük farklılıklar gösterebilir. Uyumlu bir deneyim için önemli durumlarda test yapmak faydalıdır.

toLocaleString’in performans etkisi var mı?

Tekil çağrılar için toLocaleString()‘in performansı genellikle ihmal edilebilir düzeydedir. Ancak, çok sayıda elemanı olan büyük dizilerde veya yoğun döngülerde binlerce kez çağrıldığında, toLocaleString()‘in toString()‘e göre daha fazla işlem gücü gerektirmesi nedeniyle hafif bir performans farkı olabilir. Çoğu web uygulaması için bu bir sorun teşkil etmez.

Neden bazen toLocaleString varsayılan yerel ayarı kullanıyor gibi görünüyor?

toLocaleString() metoduna yerel ayar argümanı sağlanmadığında, JavaScript çalışma zamanı ortamının (tarayıcı veya Node.js) varsayılan yerel ayarını kullanır. Bu varsayılan yerel ayar, işletim sisteminin dil ayarlarına veya tarayıcının tercih edilen dil ayarlarına bağlı olabilir. Bu nedenle, farklı sistemlerde aynı kod farklı çıktılar verebilir. Her zaman belirli bir yerel ayar belirtmek, tutarlı bir davranış sağlar.