Javascript İle Biçimlendirilmiş Zaman Dizisi

Bu eğitimde, javascript ile biçimlendirilmiş zaman dizisini hakkında bahsedeceğim. Bildiğiniz gibi zaman işlemleri için bir çok kütüphane yada fonksiyonlar kullanılmaktadır. İhtiyaç duyulmasının en temel nedeni de, çıktının Türkçe alınamamasıdır. Bu sorunu bir nebze de olsa farklı dillerde çıktının nasıl alınacağından bahsetmeye çalışacağım.

Biçimlendirilmiş zaman dizisi değerlerini Intl.RelativeTimeFormat nesnesini kullanacağız. Bu nesne ile birlikte yapacağımız tanımlamalarla istediğiniz dillerde çıktı alabileceksiniz. Böyle bir özelliğin javascriptte yer alıyor olması mükemmel bir şey!

Zaman Dizisi Oluşturma

Zaman dizisi oluşturmak için Intl.RelativeTimeFormat nesnesini kullanıyoruz. Bu nesne ile birlikte dil tanımlamasının yanında; numaric, style gibi değerler almaktadır. Bu değerleri örnekler üzerinde daha iyi anlayacağınızı düşünüyorum.

Zaman Dizisinin Yapısı

Zaman dizisi iki parametre almaktadır. Bu parametreler ile alacağı çıktı da şekillenmektedir.

relativeTimeFormat.format(deger, birim)

Kullanım yapısı yukarıdaki gibidir.

Parametrelere gelecek değerler ve açıklamasına yukarıdaki tablodan ulaşabilirsiniz. Şimdi de bu nesnenin nasıl kullanıldığına ve alınacak çıktının nasıl olduğuna bakalım.

<script>
// Yerel ayarınızda göreceli bir zaman biçimlendirici oluşturalım.
const zaman = new Intl.RelativeTimeFormat("tr", {
    localeMatcher: "lookup", // diğer değer: "lookup"
    numeric: "always", // diğer değer: "auto"
    style: "long", // diğer değer: "short" or "narrow"
});
// -1 ile ve day anahtarı ile dün değerini alıyoruz.
console.log(zaman.format(-1, "day"));
// çıktısı : 1 gün önce

// 1 ile ve day anahtarı ile yarın değerini alıyoruz.
console.log(zaman.format(1, "day"));
// çıktısı : 1 gün sonra
</script>

Yukarıda yer alan kod bloğunda ilk olarak tr tanımlaması yapıyoruz. Bu tanımlama ile Türkçe dilinde çıktı almış olacağız. Sonraki adımda ise localeMatcher, numeric ve style tanımlaması yer almaktadır. Bu tanımlamalardan numeric bölümü farkçı çıktı sonuçları elde etmenizi sağlayacaktır. Örneğin, always değeri ile x gün önce gibi bir çıktı alırsınız. Bu değer aynı tanımlama için auto olsaydı sonuç dün olacaktı. Nesneyi çağırdıktan sonra format metodu ile biçimlendirme yapıyoruz. Örneğin; format(-1, “day”) ile 1 gün önce çıktısına ulaşabilirsiniz. Biçimlendirme ile bulunulan zaman doğrultusunda hesapama yapılıp size çıktı olarak sunulacaktır.

Numeric (Always) Değeri İle Çıktı Alma

Biçimlendirmede çıktının nasıl olacağını belirtmek için numeric değerini değiştirmek yeterli olacaktır. Bu değer always yada auto olabilir. Bu bölümde numeric ile alınacak sonuçları inceleyeceğiz.

<script>
var zaman = new Intl.RelativeTimeFormat("tr", { numeric: "always" });

console.log(zaman.format(1, "day")); // 1 gün sonra
console.log(zaman.format(-1, "day")); // 1 gün önce
console.log(zaman.format(7, "day")); // 7 gün sonra
console.log(zaman.format(100, "day")); // 100 gün sonra
console.log(zaman.format(0, "day")); // 0 gün sonra
console.log(zaman.format(0, "year")); // 0 yıl sonra
console.log(zaman.format(-20, "second")); // 20 saniye önce
</script>

Bu örnekte de bir takım çıktıların alınacağı biçimlendirmeler yer almaktadır. Çıktı için numeric değeri always olarak ayarlanmıştır. Çıktı olarak sayısal değer ve önce sonra gibi zaman takısı ile çıktı alınmış olunacaktır.

Numeric (Auto) Değeri İle Çıktı Alma

Bu değerde diğer çıktıya göre daha yazısal çıktılar vermektedir. Aynı örnek üzerinden inceleme gerçekleştirelim.

<script>
var zaman = new Intl.RelativeTimeFormat("tr", { numeric: "always" });

console.log(zaman.format(1, "day")); // yarın
console.log(zaman.format(-1, "day")); // dün
console.log(zaman.format(7, "day")); // 7 gün sonra
console.log(zaman.format(100, "day")); // 100 gün sonra
console.log(zaman.format(0, "day")); // bugün
console.log(zaman.format(0, "year")); // bu yıl
console.log(zaman.format(-20, "second")); // 20 saniye önce
</script>

Aynı örneği kullanarak hazırladığımız çıktıdan da anlaşılacağı gibi o güne ait değerler için 0 (sıfır) ifadesi kullanılmak yerine bugün gibi string bir değer döndürülmektedir. Aynı zamanda x gün önce yada sonra yerine dün yada bugün gibi değerler üretilmektedir. İstediğiniz çıktıya göre sonuca ulaşmak için format() metodu üzerinde oynama yapabilirsiniz. Aynı zamanda tr değerini değiştirip, farklı dillerde çıktı alabilirsiniz.