超实用的js常用函数合集

生成预定义的日期范围

在vue项目中经常会用到生成包含预定义日期范围的数组，以便在日期选择器等场景中提供给用户方便的选择选项。使用这种”组合式函数“得用户能够轻松选择常见的时间段，避免自己再去拼接。

export function useDateRange() {
    const presets = ref([
        { label: '今天', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
        { label: '昨天', value: [dayjs().add(-1, 'day').startOf('day'), dayjs().add(-1, 'day').endOf('day')] },
        { label: '本周', value: [dayjs().startOf('week').add(1, 'day'), dayjs().endOf('week').add(1, 'day')] },
        { label: '上周', value: [dayjs().add(-1, 'week').startOf('week').add(1, 'day'), dayjs().add(-1, 'week').endOf('week').add(1, 'day')] },
        { label: '最近7天', value: [dayjs().startOf('day').add(-7, 'day'), dayjs().endOf('day')] },
        { label: '最近30天', value: [dayjs().startOf('day').add(-30, 'day'), dayjs().endOf('day')] },
        { label: '本月', value: [dayjs().startOf('month'), dayjs().endOf('month')] },
        { label: '上月', value: [dayjs().add(-1, 'month').startOf('month'), dayjs().add(-1, 'month').endOf('month')] },
        { label: '近三月', value: [dayjs().add(-2, 'month').startOf('month'), dayjs().endOf('month')] },
        { label: '本季度', value: [dayjs().startOf('quarter'), dayjs().endOf('quarter')] },
        { label: '本年', value: [dayjs().startOf('year'), dayjs().endOf('year')] },
    ])

    return presets
}

// 使用示例
import { useDateRange } from "@/composables/common.js";
const dateRanges = useDateRange();
// 输出预定义日期范围数组
console.log(dateRanges);

 友好时间差函数 

 函数用于计算给定时间与当前时间的时间差，并以友好的方式返回表示该时间差的字符串。该函数通常用于处理时间戳或日期对象，以便在界面上显示相对时间。

在网上找了几个写的麻烦，还报错，自己撸一个简单的。

export function GetTime(time) {

	// params: time 毫秒时间戳或正确日期格式 
    const ori_stamp = new Date(time).getTime();
    const cur_stamp = new Date().getTime();
    const delay = cur_stamp - ori_stamp;

    if (delay < 1000 * 60 * 1)
        return `${Math.floor(delay / 1000)}秒前`;
    if (delay < 1000 * 60 * 60)
        return `${Math.floor(delay / (1000 * 60))}分钟前`;
    if (delay < 1000 * 60 * 60 * 24)
        return `${Math.floor(delay / (1000 * 60 * 60))}小时前`;
    return `${Math.floor(delay / (1000 * 60 * 60 * 24))}天前`;
}

 模板替换函数

用于替换字符串中的占位符，生成一个新的字符串。可以通过传递一个键值映射表，将占位符替换为相应的值。在一些复杂的场景非常有用。

function format(str, key_map, pattern){
	pattern = pattern || /##(.*?)##/g
	res = str.replace(pattern, (match, group)=>{return key_map[group]||match});
	return res
}
const URL = 'https://www.abc.com/order/index?filter={"type":0,"user":"","create_time":"##create_time##","item_title":"","status":"0","adzone_id":"","time":"2","media_id":""}&sort=id&order=asc&offset=##offset##&limit=##limit##'
// 第一次进行替换
let url = format(URL, {create_time: "2024-01-01 00:00:00 - 2024-01-01 23:59:59"})
console.log(url)
// 'https://www.abc.com/order/index?filter={"type":0,"user":"","create_time":"2024-01-01 00:00:00 - 2024-01-01 23:59:59","item_title":"","status":"0","adzone_id":"","time":"2","media_id":""}&sort=id&order=asc&offset=##offset##&limit=##limit##'
# 第二次进行替换
let paginates = {"offset": "0", "limit": "100"}
let url = format(url, paginates)
console.log(url)
# 'https://www.abc.com/order/index?filter={"type":0,"user":"","create_time":"2024-01-01 00:00:00 - 2024-01-01 23:59:59","item_title":"","status":"0","adzone_id":"","time":"2","media_id":""}&sort=id&order=asc&offset=0&limit=100'

随机字符串生成函数 

生成一个指定长度的随机字符串，随然简单，但是自己写还浪费时间，直接copy不是更爽。

function randomString(length) {
  const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let result = '';
  
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * charset.length);
    result += charset.charAt(randomIndex);
  }

  return result;
}

  查看原文：你一定会用得上的超实用的js函数合集

 关注公众号 "字节航海家" 及时获取最新内容