通常，要将日期以特定格式呈现，人们会立即想到一些JavaScript库，比如moment.js，以及更近的date-fns。尽管这些库仍然能够满足一些非常特殊用例的需求，但对于简单的日期格式化来说，它们已不再是必需的。
自2016年以来，Intl API得到了广泛支持，目前全球覆盖率大约为96%，它能够以高度精细的格式呈现日期。最重要的是，所有这些都不会给你的应用增加哪怕1Kb的负担。
为了展示Intl API中DateTimeFormat构造函数的简单性，请注意以下它与上述库的比较：
import moment from 'moment';
import { format } from 'date-fns';
const date = new Date(2024, 3, 29, 0);
moment(date).format('M/D/YYYY');
// → 4/29/2024
format(date, 'M/d/yyyy');
// → 4/29/2024
Intl.DateTimeFormat('en-US').format(date);
// → 4/29/2024
仅通过这个例子，许多优势已经显而易见，但Intl.DateTimeFormat的强大之处才刚刚开始。注意DateTimeFormat接收的第一个参数是您打算格式化日期的区域设置。如果未指定区域设置，则将使用浏览器设置的默认区域。此外，构造函数的签名还接收另一个参数。这个额外的参数是一个包含各种选项的对象。让我们先检查它们中的每一个。
长格式
如果您需要一个包含文本而不仅仅是数字的日期格式，看看month选项提供的可能性。
const date = new Date(2024, 3, 29, 0);
const opts = { day: 'numeric', year: 'numeric' };
Intl.DateTimeFormat('en-US', { ...opts, month: 'long' }).format(date);
// → 2024年4月29日
Intl.DateTimeFormat('en-US', { ...opts, month: 'short' }).format(date);
// → 2024年4月29日
Intl.DateTimeFormat('en-US', { ...opts, month: 'narrow' }).format(date);
// → 2024年4月29日
星期几
如果您需要包括不仅仅是月份中的一天，还有一周中的一天，只需使用weekday选项。
const date = new Date(2024, 3, 29, 0);
const opts = { day: '2-digit', month: '2-digit', year: '2-digit' };
Intl.DateTimeFormat('en-US', { ...opts, weekday: 'long' }).format(date);
// → 2024年4月29日 星期一
Intl.DateTimeFormat('en-US', { ...opts, weekday: 'short' }).format(date);
// → 2024年4月29日 周一
Intl.DateTimeFormat('en-US', { ...opts, weekday: 'narrow' }).format(date);
// → 2024年4月29日 M
小时、分钟和秒
除了天、月和年之外，日期也可以包含时间。在这种情况下，您可以使用hour、minute和second选项来确定要显示的位数（numeric或2-digit）。
const date = new Date(2024, 3, 29, 5, 30, 20);
const opts = { minute: '2-digit', second: '2-digit' };
Intl.DateTimeFormat('en-US', { ...opts, hour: 'numeric' }).format(date);
// → 上午5:30:20
Intl.DateTimeFormat('en-US', { ...opts, hour: '2-digit' }).format(date);
// → 上午05:30:20
时区
如果您需要在格式中包含时区，可以使用timeZoneName选项。以下是提供的两种可能性。
const date = new Date(2024, 3, 29, 5, 30, 20);
const opts = { hour: '2-digit', minute: '2-digit', second: '2-digit' };
Intl.DateTimeFormat('en-US', { ...opts, timeZoneName: 'long' }).format(date);
// → 上午05:30:20 太平洋夏令时
Intl.DateTimeFormat('en-US', { ...opts, timeZoneName: 'short' }).format(date);
// → 上午05:30:20 PDT
仍然处理时间问题，可以使用不同于本地时间的时区来呈现日期。执行此转换的选项称为timeZone。以下是上面示例中使用相同的日期和时间，但是格式化为巴西东部时区。
const date = new Date(2024, 3, 29, 5, 30, 20);
const opts = { hour: '2-digit', minute: '2-digit', second: '2-digit' };
Intl.DateTimeFormat('en-US', { ...opts, timeZone: 'Brazil/East' }).format(date);
// → 上午09:30:20
提示： 在维基百科上，您可以查看所有的时区标识符。
结合应用特定时区的可能性和显示时区名称的可能性，我们可以得到以下结果。
const date = new Date(2024, 3, 29, 5, 30, 20);
const opts = { hour: '2-digit', minute: '2-digit', second: '2-digit' };
Intl.DateTimeFormat('en-US', {
...opts,
timeZone: 'Brazil/East',
timeZoneName: 'long'
}).format(date);
// → 上午09:30:20 巴西利亚标准时间
12小时制与24小时制
最后，如果您需要从12小时制切换到24小时制或反之，您可以使用hour12选项来强制进行这种改变。
const date = new Date(2024, 3, 29, 15, 30, 20);
const opts = { hour: '2-digit', minute: '2-digit', second: '2-digit' };
Intl.DateTimeFormat('en-US', { ...opts, hour12: false }).format(date);
// → 15:30:20
Intl.DateTimeFormat('pt-BR', { ...opts, hour12: true }).format(date);
// → 下午03:30:20
对于日期的计算、比较以及更高级的用例，您可能仍然需要安装一个库。但如果您需要的仅仅是以特定格式呈现一个日期，Intl API有很大机会满足您的需求。如果您想学习更多关于这个API的信息，请访问Mozilla开发者网络上提供的文档。
88