工具函数🐠

本篇主要记录工作中一些实用的工具函数

1，根据身份证判断性别

getSex(idCard){
    if((parseInt(idCard.substr(16，1)) % 2 == 1)){
        return "1"; //男
    }else{
        return "2"; //女
    }
}

2，金额格式化

Fmoney(val) {
    val = val.toString().replace(/\$|\,/g, '');
    if (isNaN(val)) val = '0';
    const sign = (val == (val = Math.abs(val)));
    val = Math.floor(val * 100 + 0.50000000001);
    let cents = val % 100;
    val = Math.floor(val / 100).toString();
    if (cents < 10) cents = '0' + cents;
    for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
        val = val.substring(0, val.length - (4 * i + 3)) + ',' + val.substring(val.length - (4 * i + 3));
    };
    return (((sign) ? '' : '-') + val + '.' + cents);
}
console.log(Fmoney(10000)); //10,000.00

3，打招呼/随机问候语

//打招呼
timeFix () {
  const time = new Date();
  const hour = time.getHours();
  return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好';
}
console.log(timeFix()) //下午好
//随机问候语
welcome () {
  const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 LOL', '我猜你可能累了'];
  const index = Math.floor(Math.random() * arr.length);
  return arr[index];
}
console.log(welcome()) //我猜你可能累了

4，将 url 请求参数转为 json 格式

/**
 * @description 将url请求参数转为json格式
 * @param url
 * @returns {{}|any}
 */
urlParam2Json(url) {
  const search = url.split('?')[1];
  if (!search) return {};
  return JSON.parse(
    '{"' +
      decodeURIComponent(search)
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"')
        .replace(/\+/g, ' ') +
      '"}'
  )
}
console.log(paramObj("https://localhost:1102/detail?name=vue&id=1")) //{ "name": "vue", "id": "1" }

5，时间戳转换

/**
 * @description 10位时间戳转换
 * @param time
 * @returns {string}
 */
tenBitTimestamp(time) {
  const date = new Date(time * 1000)
  const y = date.getFullYear()
  let m = date.getMonth() + 1
  m = m < 10 ? '' + m : m
  let d = date.getDate()
  d = d < 10 ? '' + d : d
  let h = date.getHours()
  h = h < 10 ? '0' + h : h
  let minute = date.getMinutes()
  let second = date.getSeconds()
  minute = minute < 10 ? '0' + minute : minute
  second = second < 10 ? '0' + second : second
  return y + '年' + m + '月' + d + '日 ' + h + ':' + minute + ':' + second //组合
}
console.log(tenBitTimestamp(1303608600));//2011年4月24日 09:30:00
/**
 * @description 13位时间戳转换
 * @param time
 * @returns {string}
 */
thirteenBitTimestamp(time) {
  const date = new Date(time / 1)
  const y = date.getFullYear()
  let m = date.getMonth() + 1
  m = m < 10 ? '' + m : m
  let d = date.getDate()
  d = d < 10 ? '' + d : d
  let h = date.getHours()
  h = h < 10 ? '0' + h : h
  let minute = date.getMinutes()
  let second = date.getSeconds()
  minute = minute < 10 ? '0' + minute : minute
  second = second < 10 ? '0' + second : second
  return y + '年' + m + '月' + d + '日 ' + h + ':' + minute + ':' + second //组合
}
console.log(thirteenBitTimestamp(130360800600));//1974年2月18日 03:20:00

6，m 到 n 的随机数/随机颜色

/**
 * @description m到n的随机数
 * @param m
 * @param n
 * @returns {number}
 */
random(m, n) {
  return Math.floor(Math.random() * (m - n) + n)
}
console.log(random(1,10));//8(数字1到10之间的整数)

// 随机生成颜色
randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
},

7，随机 id

/**
 * @description 获取随机id
 * @param length
 * @returns {string}
 */
uuid(length = 32) {
  const num = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
  let str = ''
  for (let i = 0; i < length; i++) {
    str += num.charAt(Math.floor(Math.random() * num.length))
  }
  return str
}
console.log(uuid());//12lwEZ7NShWOoZc8XiE6I3yEXXmpGHzq

8，打乱数组

/**
 * @description 数组打乱
 * @param array 需要打乱的数组
 * @returns {*}
 */
shuffle(array) {
  let m = array.length, t, i
  while (m) {
    i = Math.floor(Math.random() * m--)
    t = array[m]
    array[m] = array[i]
    array[i] = t
  }
  return array
}
console.log(shuffle([1,2,3,4,5]));//[2, 3, 1, 4, 5]

9，防抖与节流

// 防抖
debounce (callback,delay) {
  var t = null;
  return function () {
    clearTimeout(t);
    t = setTimeout(callback,delay);
  }
}
window.onscroll = debounce(function(){
  console.log("调用了一次");
},500)

//节流
throttle (callback,duration){
  var lastTime = new Date().getTime();
  return function () {
    var now = new Date().getTime();
    if(now - lastTime > duration){
      callback();
      lastTime = now;
    }
  }
}
window.onscroll = throttle(function(){
  console.log("调用了一次");
},500)

10，字符串对象转换为对象

const strParse = (str) =>
  JSON.parse(
    str.replace(/(\w+)\s*:/g, (_, p1) => `"${p1}":`).replace(/\'/g, '"')
  );

11，数字操作

//1，当你需要将小数点后的某些数字截断而不取四舍五入
const toFixed = (n, fixed) =>
  `${n}`.match(new RegExp(`^-?\\d+(?:\\.\\d{0,${fixed}})?`))[0];
toFixed(10.255, 2); // 10.25

//2，当你需要将小数点后的某些数字截断，并取四舍五入
const round = (n, decimals = 0) =>
  Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);
round(10.255, 2); // 10.26

12，补 0

//当你需要在一个数字num不足len位数的时候前面补零操作
const replenishZero = (num, len, zero = 0) =>
  num.toString().padStart(len, zero);
replenishZero(8, 2); // 08

13，常用正则

1，校验手机号码：/^1[3-9]\d{9}$/
2，校验邮箱地址：/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
3，校验身份证号码：/^\d{17}[\dXx]$/
4，校验密码强度：/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
5，校验URL地址：/^((https?|ftp):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([\/\w.-]*)*\/?$/
6，校验日期格式：/^\d{4}-\d{2}-\d{2}$/
7，校验IP地址：/^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/
8，校验开头，结尾空格：/^\S(.*\S)?$/i

14，纯前端验证码

<template>
  <div style="width: 100px; cursor: pointer">
    <canvas id="canvas" width="100%" height="36"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    var show_num = [];
    this.draw(show_num);
  },
  methods: {
    // 验证码
    draw(show_num) {
      var pageCode = "";
      var canvas_width = document.querySelector("#canvas").width;
      var canvas_height = document.querySelector("#canvas").height;
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode =
        "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
      var aCode = sCode.split(",");
      var aLength = aCode.length; //获取到数组的长度
      for (var i = 0; i < 4; i++) {
        var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        var deg = Math.random() - 0.5; //产生一个随机弧度
        var txt = aCode[j]; //得到随机的一个内容
        pageCode = pageCode + txt;
        show_num[i] = txt.toLowerCase();
        var x = 10 + i * 20; //文字在canvas上的x坐标
        var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";
        context.translate(x, y);
        context.rotate(deg);
        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);
        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (var i = 0; i <= 5; i++) {
        //验证码上显示线条
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      for (var i = 0; i <= 30; i++) {
        //验证码上显示小点
        context.strokeStyle = this.randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
    },
  }
}
<script>

15，深拷贝

deepClone(obj, hash = new WeakMap()) {
  if (obj instanceof RegExp) return new RegExp(obj);
  if (obj instanceof Date) return new Date(obj);
  if (obj === null || typeof obj !== "object") return obj;

  if (hash.has(obj)) return hash.get(obj);

  let t = new obj.constructor();
  hash.set(obj, t);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      t[key] = this.deepClone(obj[key], hash);
    }
  }

  return t;
},

16，获得本周日期

function getThisWeekDates() {
  const today = new Date(); // 当前日期
  const dayOfWeek = today.getDay(); // 当前日期是周几，0 表示周日
  const oneDay = 1000 * 60 * 60 * 24; // 一天的毫秒数

  // 计算本周周一的日期
  const startOfWeek = new Date(
    today.getTime() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1) * oneDay
  );
  // 计算本周周日的日期
  const endOfWeek = new Date(startOfWeek.getTime() + 6 * oneDay);

  // 格式化日期
  const formatDateString = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，所以需要 +1
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}年${month}月${day}日`;
  };

  return `${formatDateString(startOfWeek)}—${formatDateString(endOfWeek)}`;
}
console.log(getThisWeekDates()); //2025年03月03日—2025年03月09日

17，根据输入判断密码强度

<script>
export default {
  watch: {
    password: {
      handler(newVal, oldVal) {
        // 1. 初步校验：长度不足 6 位直接判定为弱
        if (newVal.length < 6) {
          this.strengthLevel = "弱";
          return;
        }
        // 2. 检查字符类型
        const hasLower = /[a-z]/.test(newVal); // 小写字母
        const hasUpper = /[A-Z]/.test(newVal); // 大写字母
        const hasNumber = /\d/.test(newVal); // 数字
        const typeCount = [hasLower, hasUpper, hasNumber].filter(
          Boolean
        ).length;

        // 3. 根据类型数量判断强度
        if (typeCount === 3) {
          this.strengthLevel = "强"; // 包含小写字母、大写字母和数字
        } else if (typeCount === 2) {
          this.strengthLevel = "中"; // 包含小写字母，大写字母，数字其中两个
        } else {
          this.strengthLevel = "弱"; // 仅包含小写字母或大写字母或数字
        }
      },
    },
  },
};
</script>

18，复制到剪切板

/**
 * 复制到剪切板
 * @param {*} value 值
 * @param {*} cb 回调函数
 */
function copyClipboard(value, cb) {
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(value).then(() => {});
  } else {
    let textarea = document.createElement("textarea");
    textarea.readOnly = "readonly";
    textarea.style.position = "absolute";
    textarea.style.left = "-9999px";
    textarea.value = value;
    document.body.appendChild(textarea);
    textarea.select();
    textarea.setSelectionRange(0, textarea.value.length);
    document.execCommand("Copy");
    document.body.removeChild(textarea);
  }

  if (cb && Object.prototype.toString.call(cb) === "[object Function]") {
    cb();
  }
}