大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

处理日期和时间一直是 JavaScript 的弱点之一， 原生 Date 对象在底层只是一个带有一些实用方法的 unix 时间戳。幸运的是，不乏像 moment.js、luxon、date-fns 和 day.js 这样的库来填补这一空白。

1.什么是 Moment.js

Moment.js 是 JavaScript 生态上个时代的产物。 多年来，Moment.js 虽然也在不断更新，但它的设计与 2011 年创建时基本相同，没有明显的变化。考虑到众多项目依赖，目前 Moment.js 已处于维护阶段，不再集成新的功能。

moment().format('MMMM Do YYYY, h:mm:ss a'); // February 18th 2024, 9:03:09 am
moment().format('dddd');                    // Sunday
moment().format("MMM Do YY");               // Feb 18th 24
moment().format('YYYY [escaped] YYYY');     // 2024 escaped 2024
moment().format();

也就是说，Moment.js 已经完成了自己的使命。下面是来自 Moment.js 团队的官方声明：

• 不会添加新功能、特性
• 不会重新为 Moment.js 的 API 添加 immutable 特性
• 不会为 Moment.js 项目添加 tree shaking 或 bundle size 优化等能力
• 不会发布 V3 版本，即下一个重大版本更新
• 可能会选择不修复错误、怪癖行为，尤其是长期存在的已知问题

2.什么是 Tempo

Tempo 是一个新的 JavaScript 库，继承了 JavaScript 日期和时间库的光荣传统。 受到 Moment.js、day.js 和 date-fns 等工具的启发，Tempo 从头开始构建，尽可能小且易于使用，同时包括对时区操作的一流支持。

Parse, format, manipulate, and internationalize dates and times in JavaScript and TypeScript.

Tempo 可以被认为是用于处理本机 Date 对象的实用程序集合，这是与其他提供自定义日期基元的库（Custom date Primitives）的重要区别。 在底层，Tempo 挖掘 JavaScript 的 Intl.DateTimeFormat 来提取复杂的数据，例如：时区偏移和区域设置感知日期格式，为开发者提供一个简单的 API 来格式化、解析和操作日期。

目前 Tempo 在 Github 通过 MIT 协议开源，有超过 1k 的 star、是一个值得长期关注的前端开源项目。

3.如何使用 Tempo

3.1 安装 Tempo

为了使其更容易使用，只需要使用软件包管理器安装即可:

pnpm add @formkit/tempo
// pnpm
npm install @formkit/tempo
// npm
yarn add @formkit/tempo
// yarn
bun install @formkit/tempo
// bun

由于 tempo 只是函数的集合，因此开发者可以通过从 @formkit/tempo 项目导入来使用，非常适合 Tree Shaking。

import {format, parse} from "@formkit/tempo"

const readable = format(new Date(), "full")

parse(readable, "full")

输出内容如下：

2024 年 2 月 18 日星期日
Date: 2024-02-17T16:00:00.000Z

3.2 Tempo 的 format 函数

format 的函数签名如下：

function format(
date: Date | string,
// strings must be ISO 8601
format: string | object,
locale?: string): string
// or
function format(
options: FormatOptions): string

Tempo 的 format() 函数以两种方式输出日期：

• 格式样式：了解如何向国际受众显示日期是很困难的。 幸运的是，Intl.DateTimeFormat 非常清楚用户根据其区域设置（或指定的区域设置）所期望的内容。
• 格式标记 ： 如果已经知道需要显示的格式， Tempo 的格式标记以已经熟悉的方式提供这种能力。

值得注意的是，格式函数始终在本地时区运行。例如，2013-01-01T00:00:00Z 在美国东部时区的格式将为 12/31/2012 7:00 PM。

3.3 格式样式（format style）

最好使用用户熟悉的格式显示日期，Tempo 使用 Intl.DateTimeFormat 的语言敏感的日期和时间格式来简化此操作。 通过使用日期或时间 “样式”，开发者可以指示想要向最终用户显示日期的具体级别，但没有更多详细信息。 然后由 Intl.DateTimeFormat 决定如何最合适地显示日期。

使用 format() 函数时，第二个参数可以是以下任何日期样式，或具有日期属性的对象（例如：format(new Date(), { date: 'long' })）

• full：例如：2024 年 2 月 18 日星期日
• long：例如：2024 年 2 月 18 日
• medium：例如：2024 年 2 月 18 日
• short：例如：2024/2/18

import {format} from "@formkit/tempo"

const date = new Date()
// These are the same:
format(date, "full")
format(date, { date: "full"})
format(date, "long")
format(date, "medium")
format(date, "short")
// With an explicit locale:
format(date, "full", "it")

3.4 Tempo 的日期修改

日常开发中经常使用到的功能就是日期更改，这要是Moment.js等日期库大放异彩的地方。

Tempo 包含许多（tree-shakable）实用函数来帮助开发者满足日期修改需求。这些函数都接受 ISO 8601 字符串或 Date 对象并返回新的 Date 对象，而且不会更改日期参数。

比如常见的 addDay:

import {addDay} from "@formkit/tempo"

// Add 1 day
addDay("2013-03-15")

// Add 5 days
addDay("2013-03-15", 5)

// Subtract 3 days
addDay("2013-03-15", -3)

甚至 addHour、addMinute、addMonth、addSecond、addYear 等等：

function addMonth(
date: string | Date,
amount: number,
dateOverflow: boolean): Date

更多关于 Tempo 的用法可以参考文末参考资料，本文不再过多展开。

4.本文总结

本文主要和大家介绍 Tempo ，其是一个新的 JavaScript 库，继承了 JavaScript 日期和时间库的光荣传统。 受到 Moment.js、day.js 和 date-fns 等工具的启发，Tempo 从头开始构建，尽可能小且易于使用，同时包括对时区操作的一流支持。因为篇幅问题，关于 Tempo 只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/formkit/tempo

https://tempo.formkit.com/#introduction

https://github.com/moment/moment

https://dev.to/apijay/moment-js-is-done-43jn

https://www.youtube.com/watch?app=desktop&v=Vt0fNp96NMw