【译】原生格式化JavaScript中的日期与时间

原文：elijahmanor.com/format-js-d…

姊妹篇：【译】原生格式化JavaScript中的数字

多年以来，我一直使用 moment.js 库来解析，操作和格式化 JavaScript 日期和时间。最近，我开始使用 date-fns 库。但是有趣的是，原生浏览器能力也可以相当不错地格式化日期与时间，且浏览器支持也不错！（见下图）

三分钟视频预览

视频

Date.prototype.toLocaleDateString()

让我们首先从 toLocaleDateString() 方法开始。也许你想要一个仅包含数字的日期，或者一个长且具体的日期，甚至以另一种语言输出的日期。此方法可能能够提供您所需要的。该方法接受一个 locale 和一个可选的 options 参数，你可以在其中传递一个或多个标志来控制输出行为。

Options

weekday - "narrow", "short", "long"
year - "numeric", "2-digit"
month - "numeric", "2-digit", "narrow", "short", "long"
day - "numeric", "2-digit"

const date = new Date();

console.log(date.toLocaleDateString('en-US'));
// 7/19/2020

const dateOptions = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
};

console.log(date.toLocaleDateString('en-US', dateOptions));
// Sunday, July 19, 2020

console.log(
  date.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
  }),
);
// Jul 19

console.log(
  date.toLocaleDateString('fr-FR', {
    month: 'long',
  }),
);
// juillet

Date.prototype.toLocaleTimeString()

有时，您只需要输出JavaScript Date对象的时间部分。幸运的是，您可以访问 toLocaleTimeString 方法。此方法不仅支持与 localeDateString 方法中类似的 locale，而且还支持 timeZone 选项！跨浏览器对此方法的支持也很不错。

Options

timeZone - List of Time Zones
hour12 - true, false
hour - "numeric", "2-digit"
minute - "numeric", "2-digit"
second - "numeric", "2-digit"

const date = new Date();

console.log(date.toLocaleTimeString('en-US'));
// 11:30:34 PM

const timeOptions = {
  hour12: true,
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit',
};

console.log(date.toLocaleTimeString('en-US', timeOptions));
// 11:30:33 PM

console.log(
  date.toLocaleTimeString('en-US', {
    timeZone: 'America/Los_Angeles',
  }),
);
// 9:30:33 PM

Date.prototype.toLocaleString()

还有一个称为 toLocaleString 的通用方法，您可以将 toLocaleDateString 和toLocaleTimeString 方法中的一个或所有选项传递给此方法。跨浏览器对此方法的支持也非常好。

const date = new Date();

console.log(date.toLocaleString('en-US', { month: 'short' }));
// Jul

console.log(date.toLocaleString('en-US', { hour: '2-digit' }));
// 11 PM

console.log(
  date.toLocaleString('en-US', { ...timeOptions, ...dateOptions }),
);
// Sunday, July 19, 2020, 11:30:33 PM
Playground

训练场

CodeSandbox

NOTE：我仍然使用 date-fns 库中的一些有用的方法。但是我更加了解本机浏览器API，并在它们何时或是否适合我的需求时尝试使用它们。