20 крутых однострочников на JavaScript ☝️

27 проектов на GitHub, которые должны быть в закладках у программистов

17.01.2022

Не используйте If-Else и Switch в JavaScript, используйте литералы объектов

18.01.2022

Сегодня поделимся с вами 20-ю первоклассными лайнерами на JavaScript, которые сделают вашу жизнь проще. 🚀

Получить значение куки-файла браузера

Получите значение файла cookie, обратившись к document.cookie

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

cookie('_ga');

// Result: "GA1.2.1929736587.1601974046"

Сегодня поделимся с вами 20-ю первоклассными лайнерами на JavaScript, которые сделают вашу жизнь проще. 🚀

Преобразование RGB в шестнадцатеричный

const rgbToHex = (r, g, b) =>

"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(0, 51, 255);

// Result: #0033ff

Скопировать в буфер обмена

Легко копируйте любой текст в буфер обмена с помощью navigator.clipboard.writeText.

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

copyToClipboard("Hello World");

Проверьте, действительна ли дата

Используйте следующий фрагмент, чтобы проверить, является ли данная дата действительной или нет.

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

isDateValid("December 17, 1995 03:24:00");

// Result: true

Найдите день года

Найти, какой день по заданной дате.

const dayOfYear = (date) =>

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

dayOfYear(new Date());

// Result: 272

Сделать строку заглавной

Javascript не имеет встроенной функции капитализации, поэтому мы можем использовать для этой цели следующий код.

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

capitalize("follow for more")

// Result: Follow for more

Найдите количество дней между двумя днями

Найдите дни между двумя заданными днями, используя следующий фрагмент.

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

dayDif(new Date("2020-10-21"), new Date("2021-10-22"))

// Result: 366

Вы можете легко удалить все файлы cookie, хранящиеся на веб-странице, открыв файл cookie document.cookie и очистив его.

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

Создать случайный шестнадцатеричный код

Вы можете генерировать случайные шестнадцатеричные цвета с помощью свойств Math.random и .padEnd

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

console.log(randomHex());

// Result: #92b008

Удалить дубликаты из массива

Вы можете легко удалить дубликаты с помощью Set JavaScript. Это спасает жизнь.

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

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

// Result: [ 1, 2, 3, 4, 5, 6 ]

Получить параметры запроса из URL

Вы можете легко получить параметры запроса из URL-адреса либо путем передачи, window.location либо необработанного URL-адреса. goole.com?search=easy&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)

// Result: { search : "easy", page : 3 }

Записывать время с даты

Мы можем регистрировать время в формате hour::minutes::seconds с заданной даты.

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

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));

// Result: "17:30:00"

Проверить, является ли число четным или нечетным

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

console.log(isEven(2));

// Result: True

Найти среднее число чисел

Найдите среднее между несколькими числами, используя reduce метод.

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

average(1, 2, 3, 4);

// Result: 2.5

Пролистать наверх

Вы можете использовать window.scrollTo(0, 0)метод для автоматической прокрутки вверх. Установите оба x и yкак 0.

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

goToTop();

Перевернуть строку

Вы можете легко изменить строку, используя методы split, reverseи .join

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

reverse('hello world');

// Result: 'dlrow olleh'

Проверить, пуст ли массив

Простой один лайнер, чтобы проверить, пуст ли массив, вернет trueили false.

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

isNotEmpty([1, 2, 3]);

// Result: true

Получить выбранный текст

Получите текст, который пользователь выбрал, используя встроенное getSelection свойство.

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

getSelectedText();

Перемешать массив

Перетасовка массива очень проста с помощью методов sort и .random

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

console.log(shuffleArray([1, 2, 3, 4]));

// Result: [ 1, 4, 3, 2 ]

Обнаружить темный режим

Проверьте, находится ли устройство пользователя в темном режиме, с помощью следующего кода.

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

console.log(isDarkMode) // Result: True or False

Хотите протестировать свой проект?

Попробуйте LambdaTest , протестируйте свои браузеры в более чем 3000 таких браузерах с изображением вашего веб-сайта.

Надеемся, что данная статья станет полезной для вас. Пробуйте и все скодится!

Источник статьи: https://dev.to/