很长一段时间以来，每当我需要在 JavaScript 中格式化日期时，我都会使用像 Date-fns 这样的库。但是每当我在需要 JavaScript 默认提供的简单日期格式的小项目中执行此操作时，它就会变得非常奇怪。

我发现大多数开发人员经常这样做。我认为这是最好的方法，直到我最近发现我们并不总是需要使用库来格式化 JavaScript 中的日期。

如果你想试试这个，这里是代码：

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"}) 
// "Friday, Jul 2, 2021"

在你自己的代码中尝试此方法并看到它运行成功后，让我们了解它为什么有效，并学习仅用一行代码在 JavaScript 中格式化日期的其他方法。

如何在 JS 中格式化日期

在 JavaScript 中获取日期通常不是问题，但对初学者来说，在项目中格式化日期可能很麻烦。因此，大多数人最终都会使用库。

在 JavaScript 中最常用的获取日期的方法是 new Date() 对象。

默认情况下，当你在终端中运行 new Date() 时，它使用浏览器的时区，并将日期显示为完整的文本字符串，例如 Fri Jul 02 2021 12:44:45 GMT+0100（英国夏令时）。

但是，在你的网页或应用程序中包含这样的内容并不专业，且不易阅读。因此，这迫使你寻找更好的方法来格式化日期。

我们来看看一些操作日期对象的方法。

JavaScript 中的日期方法

有很多方法可以应用于日期对象。你可以使用这些方法从日期对象中获取信息。这里是其中的一些：

  • getFullYear() – 以四位数字形式获取年份（yyyy）
  • getMonth() – 以数字形式获取月份（0-11）
  • getDate() – 以数字形式获取日期（1-31）
  • getHours() – 获取小时（0-23）

还有更多……

不幸的是，这些方法中的大多数仍然需要大量代码来将日期转换为我们想要的格式。

例如，new Date().getMonth() 将输出 6，代表七月。为了在我的项目中使用七月，我需要有像这样的长代码，这真的很麻烦：

const currentMonth = new Date();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
console.log(months[currentMonth.getMonth()]);

让我们来看看两种格式化日期的最佳方法，你可以将它们用于你的项目。

JavaScript 中的 toDateString() 方法

JavaScript toDateString() 方法使用以下格式以字符串的形式返回日期对象的日期部分：

  • 星期名称的前三个字母
  • 月份名称的前三个字母
  • 两位数的日期，如有必要，在左侧填充零
  • 四位数的年份（至少），必要时在左侧填充零
new Date().toDateString();
//"Fri Jul 02 2021"

这种方法的一个主要缺点是我们无法按照想要的方式操作日期输出。

例如，它不能让我们根据我们的语言显示日期。让我们来看看另一种好办法。

JavaScript 中的 toLocaleDateString() 方法

这个方法使用本地约定将日期对象作为字符串返回。它还接受选项作为参数，让你/你的应用程序自定义函数的行为。

语法：

toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)

让我们来看看一些示例及其输出：

const currentDate = new Date();

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

console.log(currentDate.toLocaleDateString('de-DE', options));
//Freitag, 2. Juli 2021

console.log(currentDate.toLocaleDateString('ar-EG', options))
// الجمعة، ٢ يوليو ٢٠٢١

console.log(currentDate.toLocaleDateString('en-us', options));
//Friday, Jul 2, 2021


你还可以决定不使用语言环境或选项：

new Date().toLocaleDateString()
// "7/2/2021"

你也可以决定只使用语言环境。这将根据我的浏览器的时区输出与之前相同的信息。

new Date().toLocaleDateString('en-US')
"7/2/2021"

你还可以根据需要决定使用选项。有 4 个基本选项，它们是：

  • weekday - 根据你需要的显示方式（短或长）输出一周中的哪一天
  • year – 将年份输出为数字
  • month - 这将根据你需要的显示方式（短或长）输出一年中的月份
  • day – 最后，这会将日期输出为数字
new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short"}) // "Jul 2021 Friday"

new Date().toLocaleDateString('en-us', { year:"numeric", month:"short"})
// "Jul 2021"

总结

日期对象有大约七种格式化方法。这些方法中的每一个都为你提供了特定的值

  1. toString() - Fri Jul 02 2021 14:03:54 GMT+0100（英国夏令时）
  2. toDateString() - Fri Jul 02 2021
  3. toLocaleString() - 7/2/2021, 2:05:07 PM
  4. toLocaleDateString() - 7/2/2021
  5. toGMTString()  - Fri, 02 Jul 2021 13:06:02 GMT
  6. toUTCString() - Fri, 02 Jul 2021 13:06:28 GMT
  7. toISOString()  - 2021-07-02T13:06:53.422Z

如果你正在寻找更高级的日期格式，那么你需要自己创建自定义格式。查看以下资源以了解如何创建自定义日期格式。

有用的资源

原文：How to Format Dates in JavaScript with One Line of Code，作者：Joel Olawanle