ES12 中的 Intl.datetimeFormat-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，日期时间格式化是一项非常常见的任务。在 ES12 中，新增了 Intl.datetimeFormat，这是一个用于格式化日期时间的 API。本文将详细介绍 Intl.datetimeFormat 的使用方法和一些实用的技巧。

使用方法

Intl.datetimeFormat 的基本语法如下：

const formatter = new Intl.DateTimeFormat(locale, options);

其中，locale 表示区域设置，options 是一个对象，用于指定格式化的方式。可以根据需要设置以下属性：

dateStyle：表示日期格式，可以取值为 "full"、"long"、"medium"、"short" 或自定义字符串。
timeStyle：表示时间格式，可以取值为 "full"、"long"、"medium"、"short" 或自定义字符串。
weekday：表示是否显示星期几，可以取值为 "narrow"、"short" 或 "long"。
year：表示年份的显示方式，可以取值为 "numeric"、"2-digit" 或自定义字符串。
month：表示月份的显示方式，可以取值为 "numeric"、"2-digit"、"narrow"、"short" 或 "long"。
day：表示日期的显示方式，可以取值为 "numeric" 或 "2-digit"。
hour：表示小时的显示方式，可以取值为 "numeric" 或 "2-digit"。
minute：表示分钟的显示方式，可以取值为 "numeric" 或 "2-digit"。
second：表示秒数的显示方式，可以取值为 "numeric" 或 "2-digit"。

例如，以下代码将创建一个日期时间格式化器，格式为 "2022年1月1日星期六下午3:30"：

const formatter = new Intl.DateTimeFormat("zh-CN", {
  dateStyle: "long",
  timeStyle: "short",
  weekday: "long",
});

自定义格式

除了使用预定义的格式之外，Intl.datetimeFormat 还支持自定义格式。可以使用以下占位符：

yyyy：表示四位数年份。
yy：表示两位数年份。
M：表示月份，不带前导零。
MM：表示月份，带前导零。
MMM：表示月份的缩写，例如 "Jan"。
MMMM：表示月份的全称，例如 "January"。
d：表示日期，不带前导零。
dd：表示日期，带前导零。
E：表示星期几的缩写，例如 "Mon"。
EEE：表示星期几的短名称，例如 "Mon"。
EEEE：表示星期几的全称，例如 "Monday"。
a：表示上午或下午，例如 "AM" 或 "PM"。
h：表示小时，使用 12 小时制，不带前导零。
hh：表示小时，使用 12 小时制，带前导零。
H：表示小时，使用 24 小时制，不带前导零。
HH：表示小时，使用 24 小时制，带前导零。
m：表示分钟，不带前导零。
mm：表示分钟，带前导零。
s：表示秒数，不带前导零。
ss：表示秒数，带前导零。

例如，以下代码将创建一个日期时间格式化器，格式为 "2022年1月1日下午3:30"：

const formatter = new Intl.DateTimeFormat("zh-CN", {
  pattern: "yyyy年M月d日 ahh:mm",
});

实用技巧

下面介绍一些实用的技巧，帮助你更好地使用 Intl.datetimeFormat。

本地化时间格式

在某些场景下，我们需要将本地时间格式化为字符串。这时，我们可以使用 toLocaleString 方法，它会自动根据用户的语言和地区设置进行本地化：

const date = new Date();
const formatted = date.toLocaleString(); // "2022/1/1 上午10:30:00"

格式化 UTC 时间

如果你需要将 UTC 时间格式化为字符串，可以使用 Intl.datetimeFormat 的 timeZone 选项：

const formatter = new Intl.DateTimeFormat("zh-CN", {
  dateStyle: "long",
  timeStyle: "short",
  timeZone: "UTC",
});
const date = new Date(Date.UTC(2022, 0, 1, 3, 30));
const formatted = formatter.format(date); // "2022年1月1日 上午3:30"

格式化相对时间

在某些场景下，我们需要将相对时间格式化为字符串，例如 "1 小时前"、"2 天后" 等。这时，我们可以使用 Intl.RelativeTimeFormat API，它可以根据语言和地区设置，自动将时间转换为相对时间：

const formatter = new Intl.RelativeTimeFormat("zh-CN", {
  numeric: "auto",
});
const date1 = new Date(Date.now() - 60 * 1000); // 1 分钟前
const date2 = new Date(Date.now() + 2 * 24 * 60 * 60 * 1000); // 2 天后
const formatted1 = formatter.format(Math.round((date1 - Date.now()) / 1000), "minute");
const formatted2 = formatter.format(Math.round((date2 - Date.now()) / 1000), "day");

总结

Intl.datetimeFormat 是一个非常实用的 API，可以帮助我们在前端开发中更轻松地处理日期时间格式化。本文介绍了它的使用方法和一些实用的技巧，希望能对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65bd9bd2add4f0e0ff74cafb