👋

This paper sorts out some practical JavaScript single line code, which is very easy to use~~

Gets the value of the browser Cookie

Find the cookie value through document.cookie

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
    
cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"

Color RGB to hex

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    
rgbToHex(0, 51, 255); 
// Result: #0033ff

copy to clipboard

With the help of navigator.clipboard.writeText, the spoken text can be easily copied to the clipboard

The specification requires that you use before writing to the clipboard Permissions API Get clipboard write permission. However, the specific requirements of different browsers are different, because this is a new API. For more information, see compatibility table and Clipboard availability in Clipboard.

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

Check whether the date is legal

Use the following code snippet to check if the given date is valid.

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
    
isDateValid("December 17, 1995 03:24:00");
// Result: true

What day of the year is the lookup date

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

English string initial capital

Javascript does not have a built-in capital function, so we can use the following code.

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
    
capitalize("follow for more")
// Result: Follow for more

Calculate the number of days between two dates

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

Clear all cookies

You can easily clear all cookies stored in a web page by accessing and clearing cookies using document.cookie.

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

Generate random hex color

You can use the Math.random and padEnd properties to generate random hexadecimal colors.

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
    
 console.log(randomHex());
// Result: #92b008

Array de duplication

You can easily delete duplicates using Set in 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 ]

Get query parameters from URL

You can easily retrieve query parameters from the url by passing window.location or the original 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 }

Or more simply:

Object.fromEntries(new URLSearchParams(window.location.search))
// Result: { search : "easy", page : 3 }

Time processing

We can record the time in hour::minutes::seconds format from a given date.

const timeFromDate = date => date.toTimeString().slice(0, 8);
    
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// Result: "17:30:00"

Is the check number odd or even

const isEven = num => num % 2 === 0;
    
console.log(isEven(2)); 
// Result: True

Average the numbers

Use the reduce method to find the average value between multiple numbers.

const average = (...args) => args.reduce((a, b) => a + b) / args.length;
    
average(1, 2, 3, 4);
// Result: 2.5

Back to the top

You can use the window.scrollTo(0, 0) method to automatically scroll to the top. Set both x and y to 0.

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

Flip string

You can easily reverse strings using the split, reverse, and join methods.

const reverse = str => str.split('').reverse().join('');
    
reverse('hello world');     
// Result: 'dlrow olleh'

Check whether the array is empty

A line of code checks whether the array is empty and returns true or false

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
    
isNotEmpty([1, 2, 3]);
// Result: true

Gets the text selected by the user

Use the built-in getSelection property to get the text selected by the user.

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

Scramble array

You can use the sort and random methods to scramble arrays

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
    
console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]

Check whether the user's device is in dark mode

Use the following code to check whether the user's device is in dark mode.

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
    
console.log(isDarkMode) 
// Result: True or False