20 Killer JavaScript one liner

Merhaba Millet 👋

Burası wolkanca. Ülkemizde hergün önceki güne göre daha fakir olmamız web geliştiricisi olarak üretmeye ve paylaşmaya engel değil.

Bugün hayatınızı kolaylaştırmak için 20 Killer JavaScript one liner’ı paylaşmak istiyorum. Hadi başlayalım 🚀

Bir tarayıcı çerezinin değerini alın

document.cookie erişerek bir çerezin değerini alın.

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();

cookie('_ga');
// Sonuç: "GA1.2.1929736587.1601974046"

RGB’yi Hex’e dönüştür

const rgbToHex = (r, g, b) =>
  "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(0, 51, 255); 
// Sonuç: #0033ff

Panoya kopyala

navigator.clipboard.writeText kullanarak herhangi bir metni panoya kolayca kopyalayın.

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");

Tarihin geçerli olup olmadığını kontrol edin

Belirli bir tarihin geçerli olup olmadığını kontrol etmek için aşağıdaki parçacığı kullanın.

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");
// Sonuç: true

Yılın gününü bulun

Belirli bir tarihe göre hangi gün olduğunu bulun.

const dayOfYear = (date) =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());
// Sonuç: 272

Bir dizede ilk harf büyük yap

Javascript’te yerleşik bir büyük harf işlevi yoktur, bu nedenle aşağıdaki kodu bu amaçla kullanabiliriz. wolkanca.com.tr/turkce-karakter-destekli-ucwords-php/

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("follow for more")
// Sonuç: Follow for more

İki gün arasındaki gün sayısını bulun

Aşağıdaki snippet’i kullanarak verilen 2 gün arasındaki günleri bulun.

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)

dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// Sonuç: 366

Tüm çerezleri temizle

Bir web sayfasında saklanan tüm çerezleri, çerezi kullanarak document.cookie ve temizleyerek erişerek kolayca temizleyebilirsiniz. wolkanca.com.tr/cerezler-nedir/

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

Rastgele Hex oluştur

Math.random ve padEnd özellikleri ile rastgele altıgen renkler oluşturabilirsiniz. wolkanca.com.tr/rastgele-renk-javascript/

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

console.log(randomHex());
// Sonuç: #92b008

Yinelenenleri diziden kaldır

JavaScript Set ile kopyaları kolayca kaldırabilirsiniz. O bir hayat kurtarıcısı.

const removeDuplicates = (arr) => [...new Set(arr)];

console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Sonuç: [ 1, 2, 3, 4, 5, 6 ]

URL’den sorgu paramlarını slın

window.location‘dan veya ham URL’yi kullanarak bir url’den sorgu paragraflarını kolayca alabilirsiniz. wolkanca.com.tr?q=worpdress&page=3

const getParameters = (URL) => {
  URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
  return JSON.stringify(URL);
};

getParameters(window.location)
// Sonuç: { search : "wordpress", page : 3 }

Tarihten itibaren günlük zaman

Zamanı belirli bir tarihten itibaren hour::minutes::seconds formatta kaydedebiliriz. wolkanca.com.tr/tarih-formati-javascript/ wolkanca.com.tr/javascript-date-gun-sonra-ayarlamak/

const timeFromDate = date => date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// Sonuç: "17:30:00"

Bir sayının çift mi yoksa tek mi olduğunu kontrol edin

const isEven = num => num % 2 === 0;

console.log(isEven(2)); 
// Sonuç: True

Sayıların ortalamasını bul

reduce yöntemi kullanarak birden çok sayı arasındaki ortalamayı bulun.

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4);
// Sonuç: 2.5

Yukarı kaydır

window.scrollTo(0, 0) Otomatik olarak yukarı kaydırma yöntemini kullanabilirsiniz. Her ikisini de x ve y 0 olarak ayarlayın.

const goToTop = () => window.scrollTo(0, 0);

goToTop();

Bir dizeyi tersine çevir

split, reverseve join yöntemlerini kullanarak bir dizeyi kolayca tersine çevirebilirsiniz.

const reverse = str => str.split('').reverse().join('');

reverse('merhaba dünya');     
// Sonuç: 'aynüd abahrem'

Dizinin boş olup olmadığını kontrol edin

Bir dizinin boş olup olmadığını kontrol etmek için basit bir şey, true veya false. wolkanca.com.tr/bir-elemanin-bos-olup-olmadigini-kontrol-etmek-jquery/

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]);
// Sonuç: true

Seçili metni al

Kullanıcının yerleşik getSelection özelliği kullanarak seçtiği metni alın.

const getSelectedText = () => window.getSelection().toString();

getSelectedText();

Bir diziyi karıştır

Bir diziyi karıştırmak sort ve random yöntemleri ile çok kolaydır.

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());

console.log(shuffleArray([1, 2, 3, 4]));
// Sonuç: [ 1, 4, 3, 2 ]

Dark modu algıla

Aşağıdaki kodla bir kullanıcının cihazının karanlık modda olup olmadığını kontrol edin. wolkanca.com.tr/javascript-ile-dark-mode-sorgulamak/

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode) // Sonuç: True or False

Bazı JavaScript hackleri

Bazı JavaScript hackleri: Her JavaScript geliştiricisinin bilmesi gereken 20 özellik.

👀 Toparlama

Evet, bu bir wrap. Umarım makaleyi beğenmişsinizdir. Geri bildiriminizi paylaşmaktan çekinmeyin. Twitter’dayım @wolkanca. Takip edin!