Intl API ile içeriğinizi herhangi bir dile veya yerel ayara göre uyarlayarak daha geniş bir kitleye ulaşın.

Intl API, uluslararasılaştırılmış metin, sayılar, tarihler ve para birimlerinin biçimlendirilmesini ve değiştirilmesini basitleştirir. Yerel ayarlara göre çeşitli veri biçimlerini işlemenizi sağlar.

Bu API, verileri farklı kültürler ve diller için biçimlendirme zorluğunu çözer. Sayıları uygun para birimi simgesiyle veya belirli bir bölge için uygun tarih biçimini kullanarak tarihleri ​​biçimlendirmeyi kolaylaştırır.

Intl API'yi kullanarak, farklı bölgelerden ve kültürlerden izleyiciler için erişilebilir ve kullanımı kolay web uygulamaları oluşturabilirsiniz.

Bir Kullanıcının Yerel Ayarını Alma

bu JavaScript oluşturucuları Intl API tarafından sağlanan, tarih, metin, sayı vb. biçimlendirmek için kullanacakları yerel ayarı tanıdık bir modele göre tanımlar. Her yapıcı bir yerel ayar ve bir seçenekler argüman olarak nesne. Yapıcı, bu bağımsız değişkenleri kullanarak, istenen yerel ayar(lar)ı o anda destekledikleri yerel ayarlarla eşleştirir.

instagram viewer

Bir kullanıcının yerel ayarını almak için şunu kullanabilirsiniz: gezgin.dil mülk. Bu özellik, tarayıcının dil sürümünü temsil eden bir dize döndürür.

değeri gezgin.dil özelliği, bir dil kodu ve isteğe bağlı olarak bir bölge kodu ve diğer alt etiketlerden oluşan bir BCP 47 dil etiketidir. Örneğin, "en-US", Amerika Birleşik Devletleri'nde konuşulduğu şekliyle İngilizce'yi temsil eder.

Şunu da kullanabilirsiniz: gezgin.dilleri önceliğe göre sıralanmış, kullanıcının tercih ettiği dillerin bir dizisini almak için özellik. Dizideki ilk öğe, kullanıcının birincil dil tercihini temsil eder.

Kullanıcının yerel ayarını edindikten sonra, uygulamanızın tarih, saat, sayı ve para birimi görünümünü özelleştirebilirsiniz. Uluslararası API.

basit oluşturabilirsiniz JavaScript işlevi bir kullanıcının yerel ayarını almanıza yardımcı olmak için. İşte size yardımcı olabilecek bir kod parçacığı:

sabit getUserLocale = () => {
eğer (navigator.languages ​​&& navigator.languages.length) {
geri dönmek gezgin.diller[0];
 }
geri dönmek gezgin.dil;
};
konsol.log (getUserLocale());

Bu getUserLocale işlev, varsa navigator.languages ​​özelliğinin ilk öğesini döndürür. Aksi takdirde, eski tarayıcılarda kullanıcının tercih ettiği dili temsil eden navigator.language özelliğine geri döner.

Farklı Yerel Ayarlar için Tarihleri ​​Biçimlendirme

kullanarak tarihleri ​​biçimlendirmek için Uluslararası API'yi kullanabilirsiniz Uluslararası DateTimeFormat() yapıcı Bu yapıcı iki bağımsız değişken alır: bir yerel dize ve bir seçenekler nesnesi.

options nesnesi, tarihin biçimlendirmesini kontrol eden özellikler içerebilir.

Yaygın olarak kullanılan seçeneklerden bazıları şunlardır:

  • Hafta içi: Bu seçenek, haftanın gününün biçimini belirtir. herhangi birine ayarlayabilirsiniz uzun (Cuma), kısa (Cuma) veya dar (F).
  • yıl: Bu seçenek, yılın biçimini belirtir. herhangi birine ayarlayabilirsiniz sayısal (2023) veya 2 haneli (23).
  • ay: Bu seçenek, ayın biçimini belirtir. herhangi birine ayarlayabilirsiniz sayısal (3), 2 haneli (03), uzun (Mart), kısa (Mart) veya dar (M).
  • gün: Bu seçenek günün biçimini belirtir. herhangi birine ayarlayabilirsiniz sayısal (2) veya 2 haneli (02).

Burada, bir tarihin nasıl biçimlendirileceğini gösteren bir örnek verilmiştir. Uluslararası DateTimeFormat() yapıcı:

sabit tarih = Tarih.Şimdi()
sabit yerel ayar = getUserLocale();
sabit seçenekler = {
 Hafta içi: "uzun",
 yıl: "sayısal",
 ay: "uzun",
 gün: "sayısal",
};


sabit biçimlendirici = yeniUluslararası.DateTimeFormat (yerel ayar, seçenekler);
// hafta içi gün, ay tarih, yıl (24 Mart 2023 Cuma)
konsol.log (formatter.format (tarih));

Bu kod, kullanıcının yerel ayarını ileterek bir biçimlendirici nesnesi kurar. Uluslararası DateTimeFormat(), bir dizi seçenekle birlikte. Ardından, geçerli tarihi bir dizeye dönüştürmek için biçimlendiriciyi kullanır. bu seçenekler nesne, tarihin biçimlendirmesini kontrol eden özellikler içerir.

Farklı Sayı Türlerini Biçimlendirme

kullanabilirsiniz Uluslararası kullanarak sayıları biçimlendirmek için API Uluslararası SayıBiçimi() yapıcı Beğenmek Uluslararası DateTimeFormat(), bu yapıcı bağımsız değişken olarak bir yerel ayar dizesi ve bir options nesnesi alır.

options nesnesi, sayının biçimlendirmesini kontrol eden özellikler içerir. Bu özellikler belirtilen özelliklere bağlı olarak değişir. stil numaranın.

Ondalık Sayıları ve Yüzdeleri Biçimlendirme

Kullanarak sayıları ondalık ve yüzde olarak biçimlendirebilirsiniz. Uluslararası SayıBiçimi() style özelliğini ayarlayarak yapıcı ondalık ondalık sayılar için ve yüzde yüzdeler için.

İşte bir ondalık sayının nasıl biçimlendirileceğini gösteren bir örnek:

sabit sayı = 123456;
sabit yerel ayar = getUserLocale(); // tr-US
sabit seçenekler = {
 stil: "ondalık",
 minimumFractionDigits: 2,
 maximumFractionDigits: 2,
 gruplama kullan: doğru,
};


sabit biçimlendirici = yeniUluslararası.NumberFormat (yerel ayar, seçenekler);
konsol.log (formatter.format (sayı)); // 123,456.00

Yukarıdaki kod bloğu, 123.456'yı grup ayırıcılarla (,) ve iki ondalık basamak.

Yüzdenin nasıl biçimlendirileceğini gösteren bir örnek:

sabit sayı = 123456;
sabit yerel ayar = getUserLocale();
sabit seçenekler = {
 stil: "yüzde",
 gruplama kullan: doğru,
};


sabit biçimlendirici = yeniUluslararası.NumberFormat (yerel ayar, seçenekler);
konsol.log (formatter.format (sayı)); // 12,345,600%

Yukarıdaki kod bloğu 123.456'yı grup ayırıcılarla yüzde olarak ifade etmektedir.

Para Birimlerini Biçimlendirme

style özelliğini şu şekilde ayarlayarak sayıları para birimi olarak biçimlendirebilirsiniz: para birimi. Yanında başka seçenekler de belirlemelisiniz, örneğin:

  • para birimi: Biçimlendirme için kullanılacak ISO 4217 para birimi kodunu ("USD", "EUR" veya "JPY" gibi) temsil eden bir dize. Bu seçeneği sağlamazsanız, biçimlendirici kullanıcının yerel ayarına göre bir para birimi kodu seçecektir.
  • para birimiGörüntü: Bu özellik, tarayıcının para birimini nasıl göstermesi gerektiğini belirtir. olabilir sembol (75 ABD Doları), kod (75 ABD Doları) veya isim (75 ABD doları).

Para birimini nasıl biçimlendirebileceğinizi gösteren bir örnek:

sabit sayı = 123456;
sabit yerel ayar = getUserLocale(); // tr-US
sabit seçenekler = {
 stil: "para birimi",
 para birimi: "AMERİKAN DOLARI",
 para birimi Ekranı: "kod",
};


sabit biçimlendirici = yeniUluslararası.NumberFormat (yerel ayar, seçenekler);
konsol.log (formatter.format (sayı)); // USD 123.456,00

Yukarıdaki kod bloğu 123.456'yı para birimi (USD) olarak biçimlendirir.

Biçimlendirme Birimleri

kullanabilirsiniz Uluslararası SayıBiçimi() sayıları uzunluk, hacim ve kütle gibi birimlerle biçimlendirmek için yapıcı. ayarlayarak bunu yapabilirsiniz. stil ile birim. Stili birim olarak ayarladığınızda, şu seçenekleri belirtmeniz gerekir:

  • birim: Bu özellik, "metre", "kilogram", "litre", "saniye" gibi biçimlendirme için kullanılacak birimi belirtir.
  • birim Ekran: Bu özellik, tarayıcının birimi nasıl görüntülemesi gerektiğini belirtir. herhangi birine ayarlayabilirsiniz uzun (10 litre), kısa (10 L) veya dar (10l).

Birimleri nasıl formatlayabileceğinizi gösteren bir örnek:

sabit sayı = 123456;
sabit yerel ayar = getUserLocale();
sabit seçenekler = {
 stil: "birim",
 birim: "litre",
 birimGörüntü: "uzun",
};


sabit biçimlendirici = yeniUluslararası.NumberFormat (yerel ayar, seçenekler);
konsol.log (formatter.format (sayı)); //123.456 litre

Yukarıdaki kod bloğu 123.456 sayısını litre cinsinden bir birim olarak biçimlendirir.

Intl API'ye Alternatifler

Intl API, JavaScript uygulamalarında tarihleri, sayıları, para birimlerini ve birimleri biçimlendirmek için güçlü ve esnek bir araç seti sağlar. Birçok yerel ayarı destekler ve verileri farklı kültürler ve diller arasında biçimlendirmek için tutarlı bir yol sağlar.

Intl için sınırlı tarayıcı desteği nedeniyle Luxon veya Day.js gibi alternatif bir kitaplık kullanmak isteyebilirsiniz. Sonuç olarak, Uluslararası API veya bir alternatif arasında karar vermek, projenizin özel gereksinimlerine ve kısıtlamalarına bağlıdır.