27 важных однострочных функций JavaScript, используемых разработчиками ежедневно

1. Копирование в буфер обмена

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

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

copyToClipboard("This Sring is Copied To Clipboard.");

2. Получение случайного числа в определенном диапазоне

Важная функция JavaScript для генерации случайного числа в определенном диапазоне чисел. В качестве аргументов вы указываете минимальное и максимальное значение, а однострочная функция возвращает случайное число из заданного диапазона.

const randomNumberInRange = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min;

randomNumberInRange()
// Результат: Диапазон случайных чисел по умолчанию составляет 0–100, поэтому вы получите число от 0 до 100.
randomNumberInRange(100, 200)
// Результат: Вы получите случайное число в диапазоне от 100 до 200, где 100 — минимальное значение, а 200 — максимальное.

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

Полезная функция, которая используется для преобразования RGB в шестнадцатеричный код.

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

rgbToHex(0, 51, 255); 
// Результат: #0033ff

4. Прокрутка к верху страницы

Еще одна полезная функция JavaScript, которая используется для автоматической прокрутки к верху веб-страницы.

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

goToTop();

5. Нахождение количества промежуточных дней между двумя датами

Следующая функция очень полезна при работе с календарем/датами в JavaScript. Найдите количество промежуточных дней между двумя заданными датами, используя следующий код:

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

dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// Результат: 366

6. Генерация случайных шестнадцатеричных кодов цветов

С помощью этой функции можно генерировать случайные шестнадцатеричные коды цветов, что очень пригодится при работе над фронтенд-проектами.

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

console.log(randomHex());
// Результат: #92b008

7. Проверка того, является ли указанный день будним

С помощью этой функции вы можете проверить, является ли дата, которую вы передаете в качестве аргумента, будним или выходным днем.

const isWeekday = (date) => date.getDay() % 6 !== 0;

console.log(isWeekday(new Date(2021, 0, 11)));
// Результат: true(понедельник)
console.log(isWeekday(new Date(2021, 0, 10)));
// Результат: false(воскресенье)

8. Преобразование значений температуры по Фаренгейту / Цельсию

Если в вашем проекте указывается температура, эти две функции JavaScript здорово вам пригодятся. Они помогут преобразовать значение по Фаренгейту в значение по Цельсию и наоборот.

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

// Примеры:
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4

fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

9. Проверка наличия у пользователя устройства от Apple

Во многих проектах нам необходимо реализовывать функции на базе определенных устройств. Вы можете применить эту функцию, чтобы узнать, оперирует ли пользователь устройством от Apple или нет.

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);
// Результат: возвращает true, если у пользователя устройство от Apple

10. Получение времени из даты

Вы можете использовать метод .toTimeString() и, разделив строку в нужном месте, получить время из даты, которую предоставляете, или текущее время.

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

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// Результат: "17:30:00"
console.log(timeFromDate(new Date()));
// Результат: залоггит текущее время

11. Извлечение HTML из текста

Очень удобная однострочная функция JavaScript, которая важна еще и по соображениям безопасности. Пользователи могут вводить значения на основе тегов. При приеме пользовательского ввода вы можете извлекать любые HTML-элементы из текста, введенного пользователем, с помощью DOMParser.

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';

stripHtml('<h1>Hello <strong>World</strong>!!!</h1>');
// Результат: Hello World!!!

12. Переключение “показать/скрыть элемент”

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

const toggleElementDisplay = element => element.style.display = (element.style.display === "none" ? "block" : "none");

toggleElementDisplay(document.body)
// // Результат: если тело страницы присутствовало ранее, оно должно быть невидимым, и при повторном выполнении команды его следует переключить.

13. Разворот строки

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

const stringReverse = str => str.split("").reverse().join("");

stringReverse('elcitra ym ekil uoy epoh i');
// Результат: i hope you like my article

14. Выделение строки заглавной буквой

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

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

capitalize("i hope you like my article.");
// I hope you like my article.

15. Округление десятичных дробей до определенного числа знаков после запятой

Когда вы имеете дело с суммами, очень важно правильно проводить вычисления с десятичными дробями. Использование метода округления десятичных дробей до фиксированного числа десятичных знаков — непростая задача в JavaScript. Встроенный в JavaScript метод toFixed() может легко справиться с такой задачей, но в некоторых случаях он выдает странные результаты из-за особенностей арифметики с плавающей запятой.

Чтобы избежать этой проблемы, можете подать числа в экспоненциальном представлении и использовать Math.round() для получения десятичной дроби, округленной до заданного количества знаков после запятой.

// Поведение функции по умолчанию toFixed в Javascript:
Number((1.005).toFixed(2)) //outputs 1 instead of 1.01
Number((1.555).toFixed(2)) //outputs 1.55 instead of 1.56

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d);

round(1.005, 2) //1.01
round(1.555, 2) //1.56

16. Перемешивание массива

Вы можете использовать нижеуказанный код для перемешивания массива. В нем используются методы sort и random.

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

console.log(shuffleArray([1, 2, 3, 4]));
// Результат: [ 1, 4, 3, 2 ]

17. Определение темного режима

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

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

console.log(isDarkMode) // Результат: True или False

18. Получение параметров запроса из URL

Очень полезная функция для тех, кто имеет дело с url и параметрами запроса. Вы можете легко получить параметры запроса из url, передав url в качестве аргумента функции.

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

getParameters("https://www.google.de/search?q=cars&start=40");
// Результат: { q: 'cars', start: '40' }

19. Получение среднего значения массива чисел

JavaScript reducer позволяет вычислить среднее значение нескольких массивов в одном ряду. Метод Reduce весьма полезен при написании однострочных решений ряда задач, таких как нахождение суммы или максимума в массиве чисел.

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

average([21, 56, 23, 122, 67])
//57.8

20. Проверка поддержки у текущего пользователя событий касания

const touchSupported = () => {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}

console.log(touchSupported());
// Результат: возвращает true, если события касания поддерживаются, false — если нет.

21. Определение порядкового номера дня в году

Еще одна очень полезная функция JavaScript, относящаяся к работе с датами/календарями. По сути, она позволяет узнать порядковый номер дня в году. Например, 6 февраля — 37-й день по счету из 365 дней в году.

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

dayOfYear(new Date());
// Результат: 272

22. Получение значения файла cookie браузера

Полезная короткая функция JavaScript, предназначенная для получения значения cookie браузера.

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

cookie('_ga');
// Результат: "GA1.2.1929736587.1601974046"

23. Очистить все файлы cookie браузера

Нужно очистить все cookie, хранящиеся на веб-странице? Получите доступ к cookie с помощью document.cookieи очистите их.

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

24. Получение случайного булева значения (true/false)

Эта функция вернет булево значение (true или false) с помощью метода Math.random(). Math.randomсоздаст случайное число между 0 и 1, после чего мы проверяем, больше или меньше оно 0,5. Это означает, что вероятность получить true или false составляет 50/50.

const randomBoolean = () => Math.random() >= 0.5;

console.log(randomBoolean());
// Результат: 50/50 при возврате true или false.

25. Удаление дубликатов в массиве

Sets в JavaScript хранят только уникальные элементы. Мы можем использовать такое поведение для удаления дубликатов из массива. Однако этот прием работает только с массивами, хранящими примитивные данные. Поэтому вам придется написать многострочное решение для удаления дубликатов в массивах, хранящих объекты. Но, тем не менее, это вполне действенный метод удаления дубликатов в простых сценариях.

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

removeDuplicates([31, 56, 12, 31, 45, 12, 31]);
//[ 31, 56, 12, 45 ]

26. Проверка правильности даты

Проверьте правильность введенной пользователем даты с помощью этой Js-функции.

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

isDateValid("December 17, 1995 03:24:00");
// Результат: true

27. Получение случайного элемента из массива

Эта однострочная функция возвращает случайный элемент из входного массива, который вы передаете в качестве аргумента функции.

const randomArrayItem = (arr) => arr[Math.floor(Math.random() * arr.length)];

randomArrayItem(['lol', 'a', 2, 'foo', 52, 'Jhon', 'hello', 57]);
// Результат: случайный элемент из массива.

Заключение

Если у вас есть идеи по продолжению этого списка, напишите мне об этом в комментариях. Я буду рад пополнить перечень полезных функций JavaScript вашими предложениями. Если вам понравилась статья и вы хотите видеть больше моих материалов в будущем, подписывайтесь на мой аккаунт на Medium. Удачного кодинга!

Читайте также:

• 5 практик JavaScript под пристальным взглядом профи
• Основы JavaScript: управление DOM элементами
• Изучаем замыкания в JavaScript

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Sayyed Hammad Ali, 27 Essential One-Line JavaScript Functions Used By Developers Daily