在前端开发中，我们经常需要处理日期时间相关的功能，如日期格式化、日期计算、日期拼接等。然而不同浏览器对日期格式的支持有所不同，很容易造成兼容性问题。ES12 中引入了 Date.prototype.toLocaleDateString 方法来解决这个问题，本文将深入介绍其用法及相关知识点。
Date.prototype.toLocaleDateString 方法
Date.prototype.toLocaleDateString 方法是 ES12 中新增的日期格式化方法，用于将 Date 对象转换成本地格式的字符串。其语法如下：
dateObj.toLocaleDateString(locale[, options])
其中，locale 表示语言环境，即要生成的字符串所使用的语言环境，默认为当前执行上下文中的语言环境。options 表示额外的选项，可以设置以下参数：
dateStyle：表示日期格式，默认为 "short"，可选值有 "short"、"medium"、"long"、"full"。timeStyle：表示时间格式，默认为 "short"，可选值有 "short"、"medium"、"long"、"full"。
下面是一个示例代码：
const dateObj = new Date(2022, 0, 1);
console.log(dateObj.toLocaleDateString()); // "2022/1/1"
console.log(dateObj.toLocaleDateString("zh-cn", { dateStyle: "full" })); // "2022年1月1日星期六"
console.log(dateObj.toLocaleDateString("en-us", { dateStyle: "full" })); // "Saturday, January 1, 2022"兼容性问题
在早期的浏览器中，很多日期格式化的方法都不是标准化的，不同浏览器之间的表现也不一致。例如，IE9 只支持使用 / 分隔的日期格式，而不支持使用 - 分隔的格式。
const dateObj = new Date(2022, 0, 1);
console.log(dateObj.toLocaleDateString("zh-cn")); // "2022/1/1" （IE9）
console.log(dateObj.toLocaleDateString("zh-cn").replace(/\//g, "-")); // "2022-1-1" （Chrome）而使用 Date.prototype.toLocaleDateString 方法，可以在不同浏览器之间获得一致的表现，避免兼容性问题。
注意事项
- 数据源必须是 Date 对象
在使用 Date.prototype.toLocaleDateString 方法进行格式化之前，需要确保数据源是一个合法的 Date 对象。如果数据源不是 Date 对象，会抛出 TypeError 异常。
const dateStr = "2022-01-01"; console.log(dateStr.toLocaleDateString()); // TypeError: dateStr.toLocaleDateString is not a function
- 不同浏览器返回结果可能不同
虽然 Date.prototype.toLocaleDateString 方法在不同浏览器中能保证一致的表现，但是仍然可能存在某些差异。例如，不同的浏览器可能在日期格式中包含不同的分隔符。
const dateObj = new Date(2022, 0, 1);
console.log(dateObj.toLocaleDateString("zh-cn")); // "2022/1/1" （IE9）
console.log(dateObj.toLocaleDateString("zh-cn").replace(/\//g, "-")); // "2022-1-1" （Chrome）- 语言环境影响结果
Date.prototype.toLocaleDateString 方法的结果是与语言环境有关的，因此同一个日期在不同语言环境下可能返回不同的字符串。
const dateObj = new Date(2022, 0, 1);
console.log(dateObj.toLocaleDateString("zh-cn", { dateStyle: "medium" })); // "2022年1月1日"
console.log(dateObj.toLocaleDateString("en-us", { dateStyle: "medium" })); // "Jan 1, 2022"总结
Date.prototype.toLocaleDateString 方法是一个非常实用的日期格式化工具，可以避免兼容性问题，同时满足本地化的需求。在使用过程中需要注意数据源必须是 Date 对象，不同浏览器返回结果可能不同，而且语言环境会影响结果。希望通过本文的介绍能够帮助大家更好地理解及使用该方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647f0d1b48841e9894ebe026