👋
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