Anasayfa » Kodlama » Uluslararası Siteler İçin Tarihleri ​​Biçimlendirmenin Kesin Bir Yolu

    Uluslararası Siteler İçin Tarihleri ​​Biçimlendirmenin Kesin Bir Yolu

    Tarih biçimleri bölgeye ve dile göre değişir; bu nedenle, tarihleri ​​dillere ve bölgelere özgü olarak kullanıcılara göstermenin bir yolunu bulabilirsek her zaman yardımcı olur..

    Aralık 2012'de ECMA, JavaScript için Uluslararasılaşma API'sinin özelliklerini açıkladı. Uluslararasılaştırma API'si, belirli verileri dil ve dil bilgisi özelliklerine göre görüntülememize yardımcı olur. İçin kullanılabilir para birimlerini, zaman dilimlerini tanımlamak ve dahası.

    Bu yazıda içine bakıyor olacağız tarih biçimlendirme bu API'yi kullanarak.

    Kullanıcının yerel ayarını bilin

    Tarihi kullanıcının tercih ettiği yerel ayarlara göre göstermek için önce tercih edilen yerel ayarın ne olduğunu bilmemiz gerekir. Şu anda bunu bilmek için kusursuz yoldan kullanıcıya sormak; kullanıcıların web sayfasında tercih ettikleri dil ve bölge ayarlarını seçmelerine izin ver.

    Ancak, bu bir seçenek değilse, yorumlayabilirsiniz Accept-Language Başlık istemek veya okumak navigator.language(Chrome ve Firefox için) veya navigator.browserLanguage(IE için) değerler.

    Lütfen bu seçeneklerin tamamının tarayıcı kullanıcı arayüzünde tercih edilen dili döndürmediğini unutmayın..

     var language_tag = window.navigator.browserLanguage || window.navigator.language || "Tr"; // 'en-GB' gibi dil etiketlerini döndürür 

    Uluslararasılaşma API'sini kontrol edin

    Tarayıcının Uluslararasılaşma API'sini destekleyip desteklemediğini bilmek için global nesnenin varlığını kontrol edebiliriz Intl.

     if (window.hasOwnPropertyâ €‹("Intl") && typeof Intl === "object") // Uluslararasılaşma API'si var, onu kullanalım 

    Intl nesne

    Intl Uluslararasılaştırma API'sini kullanmak için global bir nesnedir. Üç nesne için yapıcı olan üç özelliğe sahiptir: Harmanlama, NumberFormat, ve DateTimeFormat.

    Kullanacağımız nesne DateTimeFormat farklı dillere göre tarih saatini biçimlendirmemize yardımcı olacak.

    DateTimeFormat nesne

    DateTimeFormat yapıcı iki isteğe bağlı argüman alır;

    • yerel ayarlar - dil etiketlerini temsil eden bir dize veya dize dizisi; örneğin; “de” almanca için, “tr-TR” İngiltere'de kullanılan İngilizce için. Bir dil etiketinden bahsedilmezse, varsayılan yerel ayar çalışma zamanınınki olur.
    • seçenekleri - biçimlendiriciyi özelleştirmek için özellikleri kullanılan bir nesne. Aşağıdaki özelliklere sahiptir:
    özellik Açıklama Olası değerler
    gün Ayın günü “2 basamaklı”, “sayısal”
    çağ Tarih düşüyor dönemi, Ör: BC “dar”, “kısa”, “uzun”
    formatMatcher Format eşleşmesi için kullanılan algoritma “temel”, “en uygun”[Varsayılan]
    saat Zamandaki saatleri temsil eder “2 basamaklı”, “sayısal”
    hour12 12 saatlik formatı gösterir (doğru) veya 24 saat formatı (yanlış) doğru, yanlış
    localeMatcher Yerel eşleştirme için kullanılan algoritma “yukarı Bak”, “en uygun”[Varsayılan]
    dakika Zamanda dakika “2 basamaklı”, “sayısal”
    ay Bir yıldaki ay “2 basamaklı”, “sayısal”, “dar”, “kısa”, “uzun”
    ikinci Zamanda saniye “2 basamaklı”, “sayısal”
    saat dilimi Uygulanacak saat dilimi “UTC”, varsayılan çalışma zamanı saat dilimidir
    timeZoneName Tarihin saat dilimi “kısa”, “uzun”
    iş günü Haftanın günü “dar”, “kısa”, “uzun”
    yıl Tarihin yılı “2 basamaklı”, “sayısal”

    Örnek:

     var formatter = new Intl.DateTimeFormat ('en-GB'); / *, İngiltere'deki İngilizce tarih biçiminde bir tarihi formatlayabilen bir formatlayıcı döndürür * / 
     var options = hafta içi: 'kısa'; var formatter = new Intl.DateTimeFormat ('en-TR', seçenekler); / *, İngiltere İngiliz tarih biçiminde bir tarihi * hafta içi ile birlikte Perşembe günkü 'Thu' gibi kısa gösterimde * biçimlendiren bir biçimlendirici döndürür * / 

    biçim fonksiyon

    Örneği DateTimeFormat Nesne, bir özellik erişimcisi (alıcı) adlı biçim hangi biçimlendiren bir işlevi döndürür tarih göre yerel ayarlar ve seçenekleri içinde bulundu DateTimeFormat örnek.

    İşlev bir tarih nesne veya Tanımsız isteğe bağlı bir argüman olarak sicim istenen tarih biçiminde.

    Not: Eğer argüman ya Tanımsız veya sağlanmadıysa, değerini döndürür. Date.now () istenen tarih biçiminde.

    İşte sözdizimi:

     Yeni Intl.DateTimeFormat (). format () // geçerli tarihi çalışma zamanı biçiminde döndürür 

    Şimdi basit bir tarih formatı kodlayalım.

    Dili değiştirelim ve çıktıyı görelim.

    Şimdi, seçeneklere bakmak zamanı.

    toLocaleDateString yöntem

    Yukarıdaki örneklerde gösterildiği gibi bir formatlayıcı kullanmak yerine, aynı zamanda Date.prototype.toLocaleString aynı şekilde yerel ayarlar ve seçenekleri bağımsız değişkenler benzer, ancak kullanılması önerilir. DateTimeFormat Başvurunuzda çok fazla tarihle uğraşırken nesne.

     var mydate = yeni Tarih ('2015/04/22'); var options = hafta içi: "kısa", yıl: "sayısal", ay: "uzun", gün: "sayısal"; console.log (mydate.toLocaleDateString ( 'tr-TR', seçenekler)); // "Çar, 22 Nisan 2015" i gönderir 

    Eğer test yerel ayarlar Desteklenmektedir

    Desteklenenleri kontrol etmek için yerel ayarlar, yöntemi kullanabiliriz supportedLocalesOf arasında DateTimeFormat nesne. Desteklenen yerel ayarların bir dizisini veya yerel ayarlardan hiçbiri desteklenmiyorsa boş bir dizi döndürür.

    Test için sahte bir yerel ayar ekleyelim “bla” kontrol edilecek yerler listesinde.

     console.log (Intl.DateTimeFormat.supportedLocalesOf (["zh", "fiil", "fa-pes"])); // Array ["zh", "fa-pes"] döndürür 

    Tarayıcı Desteği

    Nisan 2015 sonunda, büyük tarayıcılar Uluslararasılaşma API'sini destekliyor.

    Referanslar

    • ECMA Uluslararası: ECMAScript Uluslararasılaşma API Şartnamesi
    • IANA: Dil Alt Etiket Kayıt Defteri
    • Norbert's Corner: ECMAScript Uluslararasılaşma API'si