JavaScript Intl.NumberFormat Nesnesi

Bazı durumlarda elimizdeki mevcut para değerini yani numeric değeri formatlayıp ülkeye ve dile uygun hale getirmek gerekiyor. Bunu javascript tarafında yaparken eskiden eklenti vs. kullanırdım. Ancak artık javascript’te Intl.NumberFormat nesnesi hayatımızı kurtarıyor.

Önce örneklendirerek konuyu anlayalım, sonra kodlara dökeriz.

1200 değeri bizim para değerimiz olsun. bu formatı TL cinsinden türkiye’de göstermek isteseydim şöyle olması gerekirdi;

₺1.200,00

Eğer bunu $ cinsinden türkiye’de göstermek için formatlamak gerekseydi oda şöyle olacaktı;

$1.200,00

Tabi bu eğer türkçe olarak görmek istersek bu şekilde, atıyorum amerikalılar için formatlamak gerekseydi şöyle gözükecekti;

$1,200.00

Arada bazı noktalama işareti farklılıkları ve bazende currency simgesinin sağda ya da solda olması gibi durumlar oluyor. Tabi bu kuralları biz tek tek bakıp ona göre yapmak yerine javascript’te Intl.NumberFormat nesnesini kullanacağız. Şimdi yukarıdaki örneklerimiz kodlara dökelim.

let moneyFormat = (locale, currency) => {
return new Intl.NumberFormat(locale,
{
style: 'currency',
currency: currency
}
);
};

Burada bir fonksiyon haline getirdim daha kolay kullanalım diye. Şimdi sırasıyla 1200₺ türkiye için, 1200₺ türkiye için ve 1200$ amerika için para formatlarını ayarlayalım.

console.log(moneyFormat('tr-TR', 'TRY').format(1200)); // ₺1.200,00
console.log(moneyFormat('tr-TR', 'USD').format(1200)); // $1.200,00
console.log(moneyFormat('en-US', 'USD').format(1200)); // $1,200.00

Eğer currency gözükmesin isterseniz fonksiyondaki style: ‘currency’ kısmını kaldırabilirsiniz. Bu kadar 🙂 Herkese iyi kodlamalar.

Daha fazla detay için;
https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

Gulp ile İşlerinizi Kolaylaştırın

Merhaba arkadaşlar, front-end çalışmalarında gulp kullandığım şu dönemde bilmeyenler için bir makale yazmaya karar verdim. Öncelikle ne nedir bundan başlayalım ve neden kullanmamız gerek anlayalım.

Gulp nedir?

Gulp, geliştirme yaparken iş akışımızı yavaşlatan işlemleri otomatik yapmamızı sağlayan bir araçtır.

Gulp hangi durumlarda kullanılır?

CSS, HTML, JavaScript ya da Resim dosyalarınızla ilgili işlemler için kullanılabilir.

Ben kısaca CSS’de SASS ve LESS dosyalarımı çalıştırdım, minify ettim, tek dosya haline getirdim. Görselleri sıkıştırarak daha küçük boyut haline getirdim. HTML’leri herhangi bir template engine sisteminde otomatik çıkarttım. Javascript’te minify edip tüm js dosyalarını tek bir js dosyasına çevirdim. Ve bunları yaparken gulp dosyamı ayarladıktann sonra hiçbir şey yapmadım 🙂 Okumaya devam et “Gulp ile İşlerinizi Kolaylaştırın”

JavaScript localeCompare()

Merhaba, bu yazıda sizlere JavaScript’te bulunan localeCompare() metotundan bahsedeceğim. Öncelikle neden ihtiyaç duyup kullandım;

Bir objemi isme göre sıralamak istedim. Bu obje içerisinde türkçe karakterlerde vardı ve sıralama düzgün şekilde gerçekleşmiyordu. Hemen bir örnek verelim;

var data = [
  {
    'id': 1,
    'name': 'İstanbul'
  },
  {
    'id': 2,
    'name': 'Çanakkale'
  },
  {
    'id': 4,
    'name': 'Ümraniye'
  },
  {
    'id': 3,
    'name': 'Ankara'
  },
  {
    'id': 5,
    'name': 'Van'
  }
];

data = data.sort(function(a,b){
  if(a.name < b.name) return -1;
  if(a.name > b.name) return 1;
  return 0;
});

data.forEach(function(key){
  var node = document.createElement("LI"),
      textnode = document.createTextNode(key.name);
  node.appendChild(textnode);
  document.getElementById('test').appendChild(node);
});

Bu kodların çıktısı şu şekilde oluyordu;

See the Pen JavaScript Array Sort -1 by Tayfun Erbilen (@tayfunerbilen) on CodePen.

Yukarıdaki kodlarımda, sort fonksiyonu içerisindeki kodumu şu şekilde değiştirirsem;

return a.name.localeCompare(b.name);

O zaman sorunumuz çözülüyor ve aşağıdaki gibi başarılı bir sıralama oluşuyor 🙂

See the Pen JavaScript Array Sort -2 by Tayfun Erbilen (@tayfunerbilen) on CodePen.

ARtık birgün bir yerde işinize yararsa ne ala, benim bugün ihtiyacım oldu yarında sizin olabilir 🙂

Zincirleme (Chain) Metodu

Bir çoğunuz yazılmış sınıfları incelediğinizde şu şekilde bir yazım tarzıyla karşılaşmış olabilirsiniz.

$text = new Text();
echo $text->write('Tayfun Erbilen')->color('red')->fontSize('20px')->show();

Bu örneğe ait sınıfımızı oluşturalım hemen.

class Text {
    
    private $text;
    private $style;

    public function write($text)
    {
        $this->text = $text;
    }

    public function color($color)
    {
        $this->style .= 'color: ' . $color . ';';
    }

    public function fontSize($size)
    {
        $this->style .= 'font-size: ' . $size . ';';
    }

    public function show()
    {
        return '<div style="' . $this->style . '">' . $this->text . '</div>';
    }

}

Ancak bu örnek hata verecektir. Çünkü bu şekilde bir yazım tarzı için yapmanız gereken $this objenizi geriye döndürmek. Yani sınıfımızı şu şekilde düzenlersek eğer;

class Text {
    
    private $text;
    private $style;

    public function write($text)
    {
        $this->text = $text;
        return $this;
    }

    public function color($color)
    {
        $this->style .= 'color: ' . $color . ';';
        return $this;
    }

    public function fontSize($size)
    {
        $this->style .= 'font-size: ' . $size . ';';
        return $this;
    }

    public function show()
    {
        return '<div style="' . $this->style . '">' . $this->text . '</div>';
    }

}

Artık bu şekilde bir kullanımı yapmaya hazırız.

Chain (zincirleme) metodu aynı zamanda jQuery içinde aynı mantıkta çalışır. Muhtemelen her dil için bu mantıktadır. Örneğin jQuery’de bir örnek vermem gerekirse, basit bir eklenti hazırlayalım.

$.fn.Text = function(text){
  $(this).html(text);
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

Bu şekilde bir zincirleme kullanımda çalışmayacaktır. Çünkü bir this objesi döndürmedik eklentimizde geriye. Eğer geriye this’i döndürürsek geriye kalan jQuery metodlarını da zincirleme olarak kullanabilirsiniz. O halde buna göre düzelttiğimizde son kod parçamız şöyle olacak;

$.fn.Text = function(text){
  $(this).html(text);
  return this;
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

JavaScript Object Length Kullanımı

Bir dizinin boyutunu öğrenmek için length özelliğini kullanabilirsiniz. Örneğin;

var arr= ['Tayfun', 'Murat'];

alert(arr.length); // Output: 2

Ancak bunu bir object için yapmak istediğimizde biraz daha farklı şekilde kullanıyoruz;

var obj = new Object();
obj['name'] = 'Tayfun';
obj['surname'] = 'Erbilen';

alert(Object.keys(obj).length); // Output: 2

Kaynak: http://stackoverflow.com/a/6700