JavaScript中日期格式化的方法

技术背景

在前端开发中，日期格式化是一个常见的需求。JavaScript 提供了多种方式来格式化日期，以满足不同场景下的需求。不同的格式化方法适用于不同的情况，有的简单直接，有的则支持更复杂的定制和国际化。

实现步骤

使用 toLocaleDateString 方法

该方法可以创建标准的特定区域设置的日期表示形式。可以通过 locale 和 options 参数指定语言和一些渲染定制。

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

自定义分隔符的日期格式

可以从 DateTimeFormat 对象中提取日期（或时间）组件，然后手动创建带有所需分隔符的字符串。

function join(date, options, separator) {
    function format(option) {
        let formatter = new Intl.DateTimeFormat('en', option);
        return formatter.format(date);
    }
    return options.map(format).join(separator);
}

let options = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
let joined = join(new Date, options, '-');
console.log(joined);

简单的日期格式化

使用 getDate、getMonth + 1、getFullYear、getHours 和 getMinutes 等方法进行简单的日期格式化。

var d = new Date();

var datestring = d.getDate()  + "-" + (d.getMonth()+1) + "-" + d.getFullYear() + " " +
d.getHours() + ":" + d.getMinutes();

// 16-5-2015 9:50

// 补零格式化
var datestring = ("0" + d.getDate()).slice(-2) + "-" + ("0"+(d.getMonth()+1)).slice(-2) + "-" +
    d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);

// 16-05-2015 09:50

使用库进行日期格式化

可以使用 luxon 或 date-fns 等库进行更强大的日期格式化。

// luxon 示例
const { DateTime } = require('luxon');
console.log(DateTime.fromISO('2010-08-10').toFormat('yyyy-LLL-dd')); // 10-Aug-2010

自定义格式化函数

可以编写自定义的格式化函数来满足特定的需求。

function dateToYMD(date) {
    var d = date.getDate();
    var m = date.getMonth() + 1; //Month from 0 to 11
    var y = date.getFullYear();
    return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
}

console.log(dateToYMD(new Date(2017,10,5))); // Nov 5

最佳实践

• 使用标准方法：优先使用 JavaScript 内置的标准日期格式化方法，如 toLocaleDateString，以确保兼容性和性能。
• 考虑国际化：如果应用需要支持多语言和不同地区的日期格式，使用 toLocaleDateString 并指定合适的 locale 参数。
• 使用库：对于复杂的日期处理和格式化需求，使用成熟的库如 luxon 或 date-fns，可以减少开发成本和错误。

常见问题

• 浏览器兼容性问题：某些日期格式化方法在旧版本浏览器中可能不支持，需要进行兼容性检查或使用 polyfill。
• 时区问题：在处理日期时，需要考虑时区的影响，避免出现日期显示错误。可以使用 toJSONLocal 等方法来处理时区问题。

function toJSONLocal (date) {
    var local = new Date(date);
    local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
    return local.toJSON().slice(0, 10);
}

• 正则表达式的局限性：使用正则表达式进行日期格式化时，需要注意 Date.prototype.toString() 的输出是依赖于实现的，可能在不同的 JavaScript 引擎中有所不同。在国际化或非浏览器实现中，需要测试输出以确保正确性。