M

MLOG

Türkçe

JavaScript Intl API ile küresel erişimin kilidini açın. Tarihleri, sayıları, para birimlerini ve daha fazlasını biçimlendirmek için uluslararasılaştırma en iyi uygulamalarını öğrenin ve dünya çapında kusursuz bir kullanıcı deneyimi sağlayın.

JavaScript Intl API: Küresel Bir Kitle İçin Uluslararasılaştırma En İyi Uygulamaları

Günümüzün birbirine bağlı dünyasında, küresel bir kitleye hitap eden web uygulamaları oluşturmak çok önemlidir. JavaScript Intl API, farklı yerel ayarların geleneklerine göre tarihleri, sayıları, para birimlerini ve daha fazlasını biçimlendirmenizi sağlayan uluslararasılaştırma (i18n) için güçlü araçlar sağlar. Bu makale, gerçekten küresel uygulamalar oluşturmak için Intl API'den yararlanmaya yönelik en iyi uygulamaları incelemektedir.

Uluslararasılaştırmayı (i18n) ve Yerelleştirmeyi (l10n) Anlamak

Intl API'nin özelliklerine dalmadan önce, uluslararasılaştırma (i18n) ve yerelleştirme (l10n) arasındaki farkı anlamak önemlidir. I18n, mühendislik değişiklikleri gerektirmeden farklı diller ve bölgeler için kolayca uyarlanabilecek şekilde uygulamalar tasarlama ve geliştirme sürecidir. Öte yandan L10n, metni çevirerek ve diğer yerel ayara özgü öğeleri özelleştirerek uluslararasılaştırılmış bir uygulamayı belirli bir yerel ayara uyarlama sürecidir.

Intl API, yerel ayara duyarlı verileri işleme mekanizmaları sağlarken i18n yönüne odaklanır ve yerelleştirme genellikle çeviriler ve yerel ayara özgü yapılandırmalar sağlamayı içerir.

Intl API'nin Temel Bileşenleri

Intl API, her biri uluslararasılaştırmanın belirli yönlerini ele almaktan sorumlu olan çeşitli temel nesneden oluşur:

Intl API'yi Kullanmak İçin En İyi Uygulamalar

Intl API'yi etkili bir şekilde kullanmak ve küresel hedef kitleniz için olumlu bir kullanıcı deneyimi sağlamak için aşağıdaki en iyi uygulamaları göz önünde bulundurun:

1. Doğru Yerel Ayarı Belirtin

Uluslararasılaştırmanın temeli, doğru yerel ayarı belirtmektir. Yerel ayar, biçimlendirme için kullanılacak dili, bölgeyi ve belirli varyantları tanımlar. Kullanıcının tercih ettiği yerel ayarı navigator.language özelliğinden veya Accept-Language HTTP başlığından alabilirsiniz.

Intl nesneleri oluştururken, yerel ayarı bir dize veya dize dizisi olarak belirtebilirsiniz. Bir dizi sağlarsanız, API mevcut seçeneklerden en iyi eşleşen yerel ayarı bulmaya çalışır.

Örnek:

const locale = navigator.language || 'en-US';
const numberFormat = new Intl.NumberFormat(locale);

Kullanıcının tercih ettiği yerel ayar kullanılamıyorsa, bir geri dönüş yerel ayarı sağlayabilirsiniz. Örneğin, kullanıcının tarayıcısı desteklenmeyen bir yerel ayar bildirirse, varsayılan olarak 'en-US' kullanabilirsiniz.

2. Tarih ve Saat Biçimlendirmesi için Intl.DateTimeFormat'tan Yararlanın

Tarihleri ​​ve saatleri doğru biçimlendirmek, yerelleştirilmiş bir deneyim sağlamak için çok önemlidir. Intl.DateTimeFormat nesnesi, tarihleri ​​ve saatleri belirli bir yerel ayarın geleneklerine göre biçimlendirmenize olanak tanır.

Yılı, ayı, günü, saati, dakikayı ve saniye biçimini gibi çeşitli seçenekleri belirterek biçimlendirmeyi özelleştirebilirsiniz. Ayrıca, tarihlerin ve saatlerin dünyanın farklı yerlerindeki kullanıcılar için doğru şekilde görüntülenmesini sağlamak için saat dilimini de belirtebilirsiniz.

Örnek:

const locale = 'de-DE'; // Almanca (Almanya)
const date = new Date();
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  timeZone: 'Europe/Berlin'
};

const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
const formattedDate = dateTimeFormat.format(date); // Çıktı: örneğin "22. Mai 2024, 14:30"
console.log(formattedDate);

Bu örnek, geçerli tarih ve saati, yıl, ay, gün, saat ve dakika dahil olmak üzere Almanca (Almanya) yerel ayarına göre biçimlendirir. Ayrıca 'Europe/Berlin' saat dilimini de belirtir.

Dünyada kullanılan farklı tarih ve saat biçimlerini dikkate almayı unutmayın. Örneğin, ABD GG/AA/YYYY kullanırken, diğer birçok ülke GG/AA/YYYY kullanır.

3. Sayı, Para Birimi ve Yüzde Biçimlendirmesi için Intl.NumberFormat'ı Kullanın

Intl.NumberFormat nesnesi, sayıları, para birimlerini ve yüzdeleri yerel ayara özgü geleneklere göre biçimlendirmenin esnek bir yolunu sağlar. Para birimi, stil (ondalık, para birimi veya yüzde), minimum ve maksimum kesirli basamaklar ve daha fazlası gibi seçenekleri belirterek biçimlendirmeyi özelleştirebilirsiniz.

Örnek (Para Birimi Biçimlendirmesi):

const locale = 'ja-JP'; // Japonca (Japonya)
const amount = 12345.67;
const options = {
  style: 'currency',
  currency: 'JPY'
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedAmount = numberFormat.format(amount); // Çıktı: örneğin "¥12,346"
console.log(formattedAmount);

Bu örnek, 12345.67 sayısını Japon Yeni (JPY) olarak biçimlendirir. Para birimi sembolünün (¥) ve gruplandırma ayırıcısının (,) Japonca yerel ayarına göre otomatik olarak nasıl ayarlandığına dikkat edin.

Örnek (Yüzde Biçimlendirmesi):

const locale = 'ar-EG'; // Arapça (Mısır)
const percentage = 0.75;
const options = {
  style: 'percent',
  minimumFractionDigits: 2
};

const numberFormat = new Intl.NumberFormat(locale, options);
const formattedPercentage = numberFormat.format(percentage); // Çıktı: örneğin "٧٥٫٠٠٪"
console.log(formattedPercentage);

Bu örnek, 0.75 sayısını Arapça (Mısır) olarak bir yüzde olarak biçimlendirir. Çıktı, Arapça yüzde işaretini (٪) ve iki ondalık basamağı içerir.

Para Birimi Biçimlendirmesi İçin Önemli Hususlar:

4. Intl.PluralRules ile Çoğul Ekleme İşlemini Doğru Şekilde Yapın

Çoğul ekleme kuralları diller arasında önemli ölçüde farklılık gösterir. Örneğin, İngilizce'de tekil ve çoğul formları içeren basit kurallar vardır, diğer dillerde ise sayının değerine göre daha karmaşık kurallar vardır. Intl.PluralRules nesnesi, belirli bir sayı ve yerel ayar için doğru çoğul formunu belirlemenize yardımcı olur.

Örnek:

const locale = 'ru-RU'; // Rusça (Rusya)
const pluralRules = new Intl.PluralRules(locale);

function getPluralForm(count) {
  const rule = pluralRules.select(count);
  switch (rule) {
    case 'one': return 'товар'; // tovar (tekil)
    case 'few': return 'товара'; // tovara (birkaç)
    case 'many': return 'товаров'; // tovarov (çok)
    default: return 'товаров'; // Varsayılan olarak çok
  }
}

const count = 5;
const pluralForm = getPluralForm(count);
console.log(`${count} ${pluralForm}`); // Çıktı: "5 товаров"

Bu örnek, Rusça'da "товар" (öğe) kelimesi için doğru çoğul formunu almak üzere Intl.PluralRules'un nasıl kullanılacağını gösterir. Rusça'da sayının 1, 2-4 veya 5-9 ile bitmesine bağlı olarak farklı çoğul formları vardır.

5. Intl.ListFormat ile Listeleri Biçimlendirin

Öğelerin listelerini sunarken, biçimlendirme yerel ayarlara göre değişebilir. Intl.ListFormat nesnesi, farklı bağlaçların (örneğin, "ve", "veya") ve liste ayırıcılarının (örneğin, virgüller, noktalı virgüller) kullanımı dahil olmak üzere listeleri yerel ayara özgü kurallara göre biçimlendirmenize olanak tanır.

Örnek:

const locale = 'es-ES'; // İspanyolca (İspanya)
const list = ['manzanas', 'naranjas', 'plátanos'];
const listFormat = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' });

const formattedList = listFormat.format(list); // Çıktı: "manzanas, naranjas y plátanos"
console.log(formattedList);

Bu örnek, son iki öğeyi bağlamak için "y" (ve) bağlacını kullanarak İspanyolca (İspanya) dilinde bir meyve listesini biçimlendirir.

6. Intl.RelativeTimeFormat ile Göreceli Zamanları Biçimlendirin

Göreceli zamanları görüntülemek (örneğin, "dün", "2 saat içinde") zaman bilgilerini sunmanın kullanıcı dostu bir yolunu sağlar. Intl.RelativeTimeFormat nesnesi, göreceli zamanları yerel ayara özgü kurallara göre biçimlendirmenize olanak tanır.

Örnek:

const locale = 'fr-CA'; // Fransızca (Kanada)
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });

console.log(rtf.format(-1, 'day')); // Çıktı: "hier"
console.log(rtf.format(2, 'day')); // Çıktı: "dans 2 jours"

Bu örnek, göreceli zamanları Fransızca (Kanada) dilinde biçimlendirir. Çıktı "hier" (dün) ve "dans 2 jours" (2 gün içinde) gösterir.

`numeric` seçeneği, sayıların nasıl görüntülendiğini kontrol eder. `'auto'`, göreceli kelimeler mevcut olduğunda (örneğin "dün") ve aksi takdirde sayıları görüntüler. `'always'` her zaman sayıları görüntüler.

7. Intl.Collator ile Dizeleri Sıralayın

Dize karşılaştırması yerel ayara duyarlıdır. Dizelerin sıralanma şekli dile göre değişir. Örneğin, Almanca'da "ä" karakteri genellikle "a" gibi sıralanırken, İsveççe'de "z"den sonra sıralanır. Intl.Collator nesnesi, dizeleri belirli bir yerel ayarın kurallarına göre karşılaştırmanıza olanak tanır.

Örnek:

const locale = 'de-DE';
const collator = new Intl.Collator(locale);

const strings = ['äpfel', 'birnen', 'bananen', 'aprikosen'];
strings.sort(collator.compare);

console.log(strings); // Çıktı: ["äpfel", "aprikosen", "bananen", "birnen"]

Bu örnek, Intl.Collator kullanarak bir Alman kelime dizisini sıralar. "ä" alfabede daha sonra gelmesine rağmen, "äpfel"in "aprikosen"den önce sıralandığına dikkat edin.

8. Uç Durumları ve Eksik Verileri İşleyin

Her tarayıcı veya ortam tarafından tüm yerel ayarlar desteklenmez. Bir yerel ayarın kullanılamadığı veya veri eksik olduğu uç durumları ele almak önemlidir. Aşağıdaki stratejileri göz önünde bulundurun:

9. Farklı Yerel Ayarlarla Kapsamlı Bir Şekilde Test Edin

Uluslararasılaştırılmış uygulamanızın desteklenen tüm yerel ayarlar için doğru çalıştığından emin olmak için kapsamlı testler çok önemlidir. Uygulamanızı farklı karakter kümeleri, tarih ve saat biçimleri, sayı biçimleri ve çoğul ekleme kuralları kullanan diller dahil olmak üzere çeşitli yerel ayarlarla test edin.

Uygulamanızın farklı yerel ayarlarda beklendiği gibi davrandığını doğrulamak için otomatik test araçlarını kullanmayı düşünün.

10. Performans Etkilerini Göz Önünde Bulundurun

Intl API genellikle verimli olsa da, Intl nesneleri oluşturmak nispeten pahalı olabilir. Performansı optimize etmek için aşağıdakileri göz önünde bulundurun:

Intl API'nin Ötesinde: Uluslararasılaştırma İçin Diğer Hususlar

Intl API, verileri biçimlendirmek için güçlü araçlar sağlarken, uluslararasılaştırma yalnızca biçimlendirmeden daha fazlasını içerir. Aşağıdaki ek hususları göz önünde bulundurun:

Sonuç

JavaScript Intl API, küresel bir kitleye hitap eden web uygulamaları oluşturmak için paha biçilmez bir araçtır. Bu makalede özetlenen en iyi uygulamaları izleyerek, yalnızca işlevsel değil, aynı zamanda kültürel açıdan duyarlı ve dünyanın dört bir yanındaki kullanıcılar için kullanıcı dostu olan uygulamalar oluşturabilirsiniz. Intl API'nin gücünü benimseyin ve uygulamanızın küresel sahnedeki potansiyelini açığa çıkarın. Intl API'de uzmanlaşmak, konumları veya dilleri ne olursa olsun, tüm kullanıcılarınız için daha kapsayıcı ve erişilebilir bir deneyimle sonuçlanacaktır.