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/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/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/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?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/tarih-formati-javascript/ wolkanca.com/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
, reverse
ve 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/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/javascript-ile-dark-mode-sorgulamak/
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode) // Sonuç: True or False
👀 Toparlama
Evet, bu bir wrap. Umarım makaleyi beğenmişsinizdir. Geri bildiriminizi paylaşmaktan çekinmeyin. Twitter’dayım @wolkanca. Takip edin!