ES2021 中的 Date.prototype.toLocaleDateString 方法的优秀应用

介绍

在 ES2020 中，JavaScript 添加了一个新方法 .toLocaleString，它可以将一个日期对象转化为本地语言环境下的字符串格式。而在 ES2021 中则进一步添加了 .toLocaleDateString 方法，该方法可以以更加灵活和具体化的方式控制日期格式。

.toLocaleDateString 方法既可以使用默认选项将日期对象转成简短、易懂的本地化日期字符串，也可以在此基础上通过指定参数来自定义日期输出格式，如："yyyy-MM-dd" 或者 "MMM d, yyyy"。

特点

多种显示格式

在 .toLocaleDateString 的选项中，我们可以设置多个参数以调整输出日期的格式。列举以下几个常见的示例：

• date.toLocaleDateString('zh-CN') 返回 "2022/4/17"
• date.toLocaleDateString('en-US') 返回 "4/17/2022"
• date.toLocaleDateString('en-GB') 返回 "17/04/2022"
• date.toLocaleDateString('fr-FR') 返回 "17/04/2022"

支持自定义格式

使用 .toLocaleDateString 方法可以非常方便的支持自定义日期格式。想要自定义日期格式，在 .toLocaleDateString 中传入第一个参数为地区时，就可以在第二个参数中传入格式字符串了。

const date = new Date();
console.log(date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
}));

这将返回："2022/04/17"

时区转换

.toLocaleDateString 方法也支持在显示日期时进行时区转换。你可以传递一个选项参数 timeZon，从而解决跨越多个时区的日期问题。

const date = new Date('2022-04-17T00:00:00z');
console.log(date.toLocaleDateString('zh-CN', {
    timeZone: 'America/New_York'
}));

输出结果是："2022/4/16"

学习和指导意义

在现代 Web 应用程序的前端中，处理日期的需求很常见。 .toLocaleDateString 方法提供了简单、易用和可定制的解决方案，并使得本地化和语言环境适配变得更加容易。尤其是多语言场景下，对于在不同的地区以不同的语言展示时间的需求可以说是十分必要的。

另外，在 JavaScript 中可以使用 Moment.js、day.js 和 Luxon.js 这些库来格式化日期，但是它们在很多情况下比起原生 API 更加缓慢且会增加代码体积。因此，学会如何在原生 API 中优雅的处理日期是我们每个 JS 开发人员都应该掌握的技能之一。

结论

总之，ES2021 中添加的 .toLocaleDateString 方法为前端开发人员处理本地化和多语种应用程序的日期需求提供了一个简单且更灵活的解决方案。该方法支持各种自定义选项，以便开发人员能够非常容易地满足各种不同的项目需求。因此，我们强烈建议前端开发人员掌握和使用这个优秀的 API！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672857462e7021665e1fdf41