【持续更新】前端JS/TS字符串与日期工具封装

前端JS/TS字符串工具封装

判空

/**
 * @param val
 */
export const isBlank = (val?: string | undefined) => {
    return (val === undefined || (val.trim().length < 1));
};

/**
 * @param val
 */
export const isNotBlank = (val?: string | undefined) => {
    return !isBlank(val);
};

/***
 * isAnyBlank <br>
 * Checks if any of the vals are empty (""), undefined or whitespace only.
 * @param vals
 */
export const isAnyBlank = (vals?: (string | undefined)[]) => {
    if (vals === undefined) return true;
    if (vals.length < 1) return true;
    for (let i = 0; i < vals.length; i++) {
        if (isBlank(vals[i])) return true;
    }
    return false;
};

/***
 * isAllBlank <br>
 * Checks if all of the vals are empty (""), undefined or whitespace only.
 * @param vals
 */
export const isAllBlank = (vals: (string | undefined)[]) => {
    if (vals === undefined) return true;
    if (vals.length < 1) return true;
    for (let i = 0; i < vals.length; i++) {
        if (!isBlank(vals[i])) return false;
    }
    return true;
};

使用：

    console.log(isAnyBlank(["", "a", "A", undefined]));
    console.log(isAnyBlank(abReasons));
    console.log(isAllBlank([" ", "a", "C", undefined]));
    console.log(isAllBlank(abReasons));

比较

两个字符串比较

/**
 * <b>{ undefined === undefined } : true </b>
 * <b>{ undefined === "a" } : false </b>
 * @param val1
 * @param val2
 */
export const equalsTrimmed = (val1?: string | undefined, val2?: string | undefined) => {
    if (val1 === undefined || val2 === undefined) {
        return (val1 === undefined && val2 === undefined);
    }
    let v1 = val1.trim();
    let v2 = val2.trim();
    if (v1.length !== v2.length) return false;
    return v1 === v2;
}
/**
 * equalsIgnoreCaseTrimmed :
 *    <li> <b> undefined === undefined  =>  true <b></li>
 *    <li> <b> " " === ""  =>  true <b></li>
 *    <li> <b> "" === "q"  =>  false <b></li>
 *    <li> <b> "q" === "Q"  =>  true <b></li>
 *    <li> <b> "QQ" === "Q"  =>  fasle <b></li>
 * @param val1
 * @param val2
 */
export const equalsIgnoreCaseTrimmed = (val1?: string | undefined, val2?: string | undefined) => {
    if (val1 === undefined || val2 === undefined) {
        return (val1 === undefined && val2 === undefined);
    }
    let v1 = val1.trim();
    let v2 = val2.trim();
    if (v1.length !== v2.length)
        return false;
    return v1.toUpperCase() === v2.toUpperCase();
}

一个与多个

/**
 * equalsAnyIgnoreCase<br>
 * example:
 *      <li><b> equalsAny("aaa", ["  a", "AAAA  "]) => false </b></li>
 *      <li><b> equalsAny("ccc", ["  a", "AAA  ", "cc", "CCC"]) => true </b></li>
 *      <li><b> equalsAny(undefined, ["  a", "AAA  "]) => false </b></li>
 *      <li><b> equalsAny("ccc", undefined) => false </b></li>
 *      <li><b> equalsAny(undefined, undefined) => false </b></li>
 * @param val
 * @param tVals
 */
export const equalsAnyIgnoreCaseTrimmed = (val?: string | undefined, tVals?: Array<string | undefined>) => {
    return searchElementIgnoreCaseTrimmed(val, tVals) >= 0;
}

/** 
 * equalsAnyIgnoreCase<br>
 * example:
 *      <li><b> equalsAny("aaa", ["  a", "AAAA  "]) => false </b></li>
 *      <li><b> equalsAny("ccc", ["  a", "AAA  ", "cc", "CCC"]) => true </b></li>
 *      <li><b> equalsAny(undefined, ["  a", "AAA  "]) => false </b></li>
 *      <li><b> equalsAny("ccc", undefined) => false </b></li>
 *      <li><b> equalsAny(undefined, undefined) => false </b></li>
 * @param val
 * @param tVals
 */
export const equalsAnyIgnoreCaseTrimmed = (val?: string | undefined, tVals?: Array<string | undefined>) => {
    return searchElementIgnoreCaseTrimmed(val,tVals) >= 0;
}

使用：

    console.log(equalsAnyTrimmed(optionKey,["", "c", "A ", undefined]));
    console.log(equalsAnyIgnoreCaseTrimmed(optionKey,[" ", "A ", "C", undefined]));

查找

/**
 * searchElementTrimmed
 * @param val
 * @param tVals
 */
export const searchElementTrimmed = (val?: string | undefined, tVals?: Array<string | undefined>) => {
    if (val === undefined || val.trim().length < 1)
        return -1;

    if (tVals === undefined || tVals.length < 1)
        return -2;

    for (let i = 0; i < tVals.length; i++) {
        if (equalsTrimmed(tVals[i], val)) {
            return i;
        }
    }
    return -3;
}

/**
 * searchElementIgnoreCaseTrimmed
 * @param val
 * @param tVals
 */
export const searchElementIgnoreCaseTrimmed = (val?: string | undefined, tVals?: Array<string | undefined>) => {
    if (val === undefined || val.trim().length < 1)
        return -1;

    if (tVals === undefined || tVals.length < 1)
        return -2;

    for (let i = 0; i < tVals.length; i++) {
        if (equalsIgnoreCaseTrimmed(tVals[i], val)) {
            return i;
        }
    }
    return -3;
}

前端JS/TS日期工具封装

• 对项目中用到的工具进行封装，主要涉及的数据类型：
  • Date 类型
  • moment 类型
  • string 类型
• 主要涉及的需求
  • 零点问题
  • string与Date、moment之间的转换
  • 时间的加减、比较

导包

import {isAnyBlank, isBlank, isNotBlank} from "@/utils/string-utils";
import moment from "moment";

其中：string-utils

构建传入日期的零点

/**
 * buildCurDayZero
 * @param date
 */
export const buildCurDayZero = (date: Date | undefined) => {
  if (date) {
    var t = new Date(date?.getTime());
    t.setHours(0);
    t.setMinutes(0);
    t.setSeconds(0);
    t.setMilliseconds(0);
    return t;
  }
  return undefined;
};

/**
 * buildCurDayZeroStr
 * @param dateStr
 * @param pattern
 */
export const buildCurDayZeroStr = (dateStr: string | undefined, pattern: string) => {
  if (!isAnyBlank([dateStr, pattern])) {
    var t = transStrToDate(dateStr, pattern);
    t?.setHours(0);
    t?.setMinutes(0);
    t?.setSeconds(0);
    t?.setMilliseconds(0);
    return transDateToStr(t,pattern);
  }
  return undefined;
};

构建之后一天的零点

/**
 * buildNextDayZero <br>
 * @param date
 */
export const dateZeroOfNextDay = (date: Date | undefined) => {
  if (date) {
    var t = new Date(86400_000 + date?.getTime());
    t.setHours(0);
    t.setMinutes(0);
    t.setSeconds(0);
    t.setMilliseconds(0);
    return t;
  }
  return undefined;
};

/**
 * buildNextDayZero <br>
 * @param date
 */
export const momentZeroOfNextDay = () => {
    var t = moment().add(1, "days");
    t.setHours(0);
    t.setMinutes(0);
    t.setSeconds(0);
    t.setMilliseconds(0);
    return t; 
};

/**
 * buildNextDayZeroStr
 * @param dateStr
 * @param pattern
 */
export const buildNextDayZeroStr = (dateStr: string | undefined, pattern: string) => {
  if (!isAnyBlank([dateStr, pattern])) {
    return transDateToStr(buildNextDayZero(transStrToDate(dateStr, pattern)), pattern);
  }
  return undefined;
};

加天数

/**
 * plusDays
 * @param date
 * @param days
 */
export const plusDays = (date: Date | undefined, days: number) => {
  if (date) {
    return new Date(86400_000 * days + date?.getTime());
  }
  return undefined;
};

字符串/日期互转

/**
 * transDateToStr
 * @param date
 * @param pattern
 */
export const transDateToStr = (date: Date | undefined, pattern: string | undefined) => {
  if (isBlank(pattern) || !date) {
    return undefined;
  }
  return moment(date).format(pattern);
};

/**
 * transStrToDate
 * @param dateStr
 * @param pattern
 */
export const transStrToDate = (dateStr: string | undefined, pattern: string | undefined) => {
  if (isAnyBlank(dateStr, pattern)) return undefined;
  return moment(dateStr, pattern).toDate();
};

日期比较

• diff当作compare使用

/**
 * example:<br>
 * <li><b>compareDateStr("2022-02-07", "2022-02-06", "yyyy/MM/DD") ====> 86400000 </b><\li>
 * <li><b>compareDateStr("2022-02-06", "2022-02-07", "yyyy/MM/DD") ====> -86400000 </b><\li>
 * <li><b>compareDateStr("2022-02-06", "2022-02-06", "yyyy/MM/DD") ====> 0 </b><\li>
 *
 * @param dateStr1
 * @param dateStr2
 * @param pattern
 * @return [millisecond]: (dateStr1 - dateStr2)
 *
 * <li> >0: dateStr1 is after dateStr2  <\li>
 * <li> =0: dateStr1 and dateStr2 are same time. <\li>
 * <li> <0: dateStr1 is after dateStr2.  <\li>
 */
export const compareDateStr = (dateStr1: string | undefined, dateStr2: string | undefined, pattern: string) =>{
  if (isAnyBlank([dateStr1, dateStr2, pattern])){
    return undefined;
  }
  var moment1 = moment(dateStr1, pattern);
  return moment1.diff(moment(dateStr2, pattern));
}

构建当月一号零点

/**
 * momentZeroOfCurMonth
 */
export const momentZeroOfCurMonth = () => {
  return moment(dateZeroOfCurMonth());
}
/**
 * dateZeroOfCurMonth
 */
export const dateZeroOfCurMonth = () => {
  var date = new Date();
  date.setDate(1);
  date.setHours(0);
  date.setMinutes(0);
  date.setSeconds(0);
  date.setMilliseconds(0);
  return date;
}

构建下月一号零点

/**
 * momentZeroOfNextMonth
 */
export const momentZeroOfNextMonth = () => {
  return moment(dateZeroOfCurMonth()).add(1, "months");
}
/**
 * dateZeroOfNextMonth
 */
export const dateZeroOfNextMonth = () => {
  var date = moment().add(1, "months").toDate();
  date.setDate(1);
  date.setHours(0);
  date.setMinutes(0);
  date.setSeconds(0);
  date.setMilliseconds(0);
  return date;
}

持续更新…