JavaScript / TypeScript日期格式化(dateFormat)

简介: 这篇文章介绍了如何在TypeScript中创建和使用一个日期格式化函数`dateFormat`,支持多种日期格式的自定义,并提供了函数的实现代码和使用示例。

在线功能预览

①日期格式化函数dateFormat():

/**
 * 格式化日期时间字符串
 *
 * @param value 待格式化的日期时间值,支持数字、字符串和 Date 类型,默认为当前时间戳
 * @param format 格式化字符串,默认为'YYYY-MM-DD HH:mm:ss',支持格式化参数:YY:年,M:月,D:日,H:时,m:分钟,s:秒,SSS:毫秒
 * @returns 返回格式化后的日期时间字符串
 */
export function dateFormat(value: number | string | Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss'): string {
  try {
    let date: Date
    if (typeof value === 'number' || typeof value === 'string') {
      date = new Date(value)
      if (isNaN(date.getTime())) {
        throw new Error('Invalid date')
      }
    } else {
      date = value
    }
    const padZero = (value: number, len: number = 2): string => {
      // 左侧补零函数
      return String(value).padStart(len, '0')
    }
    const replacement = (match: string) => {
      switch (match) {
        case 'YYYY':
          return padZero(date.getFullYear())
        case 'YY':
          return padZero(date.getFullYear()).slice(2, 4)
        case 'MM':
          return padZero(date.getMonth() + 1)
        case 'M':
          return String(date.getMonth() + 1)
        case 'DD':
          return padZero(date.getDate())
        case 'D':
          return String(date.getDate())
        case 'HH':
          return padZero(date.getHours())
        case 'H':
          return String(date.getHours())
        case 'mm':
          return padZero(date.getMinutes())
        case 'm':
          return String(date.getMinutes())
        case 'ss':
          return padZero(date.getSeconds())
        case 's':
          return String(date.getSeconds())
        case 'SSS':
          return padZero(date.getMilliseconds(), 3)
        default:
          return match
      }
    }
    return format.replace(/(YYYY|YY|M{1,2}|D{1,2}|H{1,2}|m{1,2}|s{1,2}|SSS)/g, replacement)
  } catch (error) {
    console.error('Error formatting date:', error)
    return ''
  }
}

②使用函数:

console.log(dateFormat(1680227496788, 'YYYY-MM-DD HH:mm:ss')) // 2023-03-31 09:51:36:788
console.log(dateFormat(new Date(), 'YYYY年MM月DD日 HH时mm分ss秒SSS毫秒')) // 2023年03月31日 09时53分41秒730毫秒
相关文章
|
4月前
|
JavaScript 前端开发 安全
使用TypeScript增强JavaScript应用的类型安全性
【5月更文挑战第23天】TypeScript是微软开发的JavaScript超集,引入静态类型检查和面向对象特性,提升代码可维护性和可靠性。它在编译阶段捕获类型错误,增强代码可读性,并通过接口、类、泛型和类型断言等工具确保类型安全。使用TypeScript能有效避免复杂项目中的调试难题,尤其适合大型项目。
|
13天前
|
JSON JavaScript 前端开发
如何使用代码注释:关于JavaScript与TypeScript
TSDoc是一种标准化TypeScript代码文档注释的规范,使不同工具能无干扰地提取内容。它包括多种标记,如@alpha、@beta等发布阶段标记;@decorator、@deprecated等功能标记;@defaultValue、@eventProperty等描述标记;@example、@experimental等示例与实验性标记;@inheritDoc、@internal等引用与内部标记;@label、@link等链接标记;@override、@sealed等修饰符标记;以及@packageDocumentation、@param、
24 5
|
15天前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
35 0
|
23天前
|
JavaScript 前端开发 安全
TypeScript:解锁JavaScript的超级英雄模式!类型系统如何化身守护神,拯救你的代码免于崩溃与混乱,戏剧性变革开发体验!
【8月更文挑战第22天】TypeScript作为JavaScript的超集,引入了强大的类型系统,提升了编程的安全性和效率。本文通过案例展示TypeScript如何增强JavaScript:1) 显式类型声明确保函数参数与返回值的准确性;2) 接口和类加强类型检查,保证对象结构符合预期;3) 泛型编程提高代码复用性和灵活性。这些特性共同推动了前端开发的标准化和规模化。
44 0
|
2月前
|
JavaScript 前端开发 IDE
TypeScript取代JavaScript的优势
TypeScript取代JavaScript的优势
|
3月前
|
JavaScript 前端开发 编译器
探讨TypeScript如何帮助JavaScript开发者避免这些常见错误,从而提高代码质量和开发效率
【6月更文挑战第13天】TypeScript,JavaScript的超集,通过添加静态类型检查和面向对象特性,帮助开发者避免常见错误,提升代码质量和开发效率。它能检测类型错误,防止运行时类型转变引发的问题;使用可选链和空值合并避免引用错误;通过枚举减少逻辑错误中的魔法数字;接口和泛型等特性提高代码可维护性。学习TypeScript对提升JavaScript开发质量有显著效果。
50 4
|
3月前
|
监控 JavaScript 前端开发
如何在现有的 JavaScript 项目中渐进式地采用 TypeScript
【6月更文挑战第13天】TypeScript,JavaScript的超集,引入静态类型和更多特性,提升代码安全性和可读性。在JavaScript项目中渐进式采用TypeScript可从新模块开始,逐步转换代码,编写.d.ts文件支持第三方库,配置编译选项,并编写测试用例。通过监控和评估,改善项目质量和效率。大型项目尤其受益于TypeScript的类型安全、社区支持和工具兼容性。
49 3
|
3月前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
42 2
|
3月前
|
JavaScript 前端开发 安全
JavaScript 和 TypeScript 趋势
【6月更文挑战第1天】JavaScript 和 TypeScript 趋势
45 3
|
3月前
|
移动开发 JavaScript 前端开发
技术经验分享:JavaScript实现Date()——日期格式化的三种常用方法
技术经验分享:JavaScript实现Date()——日期格式化的三种常用方法
23 0