文章目录
- 一、前言
- 二、生成随机字符串
- 三、转义`HTML`特殊字符
- 四、单词首字母大写
- 五、将字符串转换为小驼峰
- 六、删除数组中的重复值
- 七、移除数组中的假值
- 八、获取两个数字之间的随机数
- 九、将数字截断到固定的小数点
- 十、日期
- 10.1、计算两个日期之间天数
- 10.2、从日期中获取是一年中的哪一天
- 十一、将`RGB`颜色转换为十六进制颜色值
- 十二、检测黑暗模式
- 十三、、最后
一、前言
本专题主要是分享JavaScript实用小技巧，希望能提高大家的工作效率。
二、生成随机字符串
当我们需要一个唯一id时，通过Math.random创建一个随机字符串
const randomString = () => Math.random().toString(36).slice(2)
console.log(randomString()) // ugvy2k3eiqq
console.log(randomString()) // f4s72hycpfr
console.log(randomString()) //1xg2nsbsfnb
三、转义HTML特殊字符
解决XSS方法之一就是转义HTML。
const escape = (str) => str.replace(/[&<>"']/g, (m) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[m]))
console.log(escape('<div class="medium">Hi Medium.</div>'))
// <div class="medium">Hi Medium.</div>
四、单词首字母大写
const uppercaseWords = (str) => str.replace(/^(.)|\s+(.)/g, (c) => c.toUpperCase())
console.log(uppercaseWords('hello world')) // 'Hello World'
五、将字符串转换为小驼峰
const toCamelCase = (str) => str.trim().replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''));
console.log(toCamelCase('background-color')); // backgroundColor
console.log(toCamelCase('-webkit-scrollbar-thumb')); // WebkitScrollbarThumb
console.log(toCamelCase('_hello_world')); // HelloWorld
console.log(toCamelCase('hello_world')); // helloWorld
六、删除数组中的重复值
得益于ES6，使用Set数据类型来对数组去重太方便了。
const removeDuplicates = (arr) => [...new Set(arr)]
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]))
// [1, 2, 3, 4, 5, 6]
七、移除数组中的假值
const removeFalsy = (arr) => arr.filter(Boolean)
console.log(removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false]))
// ['a string', true, 5, 'another string']
八、获取两个数字之间的随机数
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
console.log(random(1, 50)) // 48
console.log(random(1, 50)) // 6
九、将数字截断到固定的小数点
const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
console.log(round(1.005, 2)) // 1.01
console.log(round(1.555, 2)) // 1.56
十、日期
10.1、计算两个日期之间天数
const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));
console.log(diffDays(new Date("2021-11-3"), new Date("2022-2-1"))) // 90
10.2、从日期中获取是一年中的哪一天
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
console.log(dayOfYear(new Date())) // 344
十一、将RGB颜色转换为十六进制颜色值
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
console.log(rgbToHex(255, 255, 255)) // '#ffffff'
十二、检测黑暗模式
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)
十三、、最后
本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注✨，一起加油☕
