JavaScript日期格式化文档及方法汇总

技术背景

在JavaScript开发中，日期格式化是一个常见的需求。然而，JavaScript本身在日期格式化方面的支持并不直观，不同浏览器对日期格式的处理也存在差异。因此，了解如何格式化日期以及获取相关文档非常重要。

实现步骤

原生方法实现日期格式化

可以使用Date对象的内置方法，如getDate()、getMonth()和getFullYear()来手动拼接日期字符串。

var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; // Months are zero based
var curr_year = d.getFullYear();
console.log(curr_date + "-" + curr_month + "-" + curr_year);

使用标准ECMAScript格式化函数

ECMAScript为Date类提供了一些特定的格式化函数，例如：

// toDateString：实现依赖，仅显示日期
new Date().toDateString(); // e.g. "Fri Nov 11 2016"

// toISOString：显示ISO 8601日期和时间
new Date().toISOString(); // e.g. "2016-11-21T08:00:00.000Z"

// toJSON：用于JSON的字符串化
new Date().toJSON(); // e.g. "2016-11-21T08:00:00.000Z"

// toLocaleDateString：实现依赖，以本地化格式显示日期
new Date().toLocaleDateString(); // e.g. "21/11/2016"

// toLocaleString：实现依赖，以本地化格式显示日期和时间
new Date().toLocaleString(); // e.g. "21/11/2016, 08:00:00 AM"

// toLocaleTimeString：实现依赖，以本地化格式显示时间
new Date().toLocaleTimeString(); // e.g. "08:00:00 AM"

// toString：Date对象的通用toString方法
new Date().toString(); // e.g. "Fri Nov 11 2016 08:00:00 GMT+0100 (W. Europe Standard Time)"

使用第三方库实现日期格式化

Moment.js

Moment.js是一个轻量级的JavaScript日期库，用于解析、操作和格式化日期。

1
2
3

var a = moment([2010, 1, 14, 15, 25, 50, 125]);
a.format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"
a.format("ddd, hA"); // "Sun, 3PM"

date-fns

date-fns是一个现代的日期处理库，具有模块化、不可变、国际化等优点。

1 2	`import { format } from 'date-fns'; format(new Date(), "'Today is a' eeee"); // => "Today is a Tuesday"`

自定义格式化函数

可以通过扩展Date对象的原型来实现自定义的日期格式化方法。

Date.prototype.format = function(format) {
    format = format || 'YYYY-MM-DD hh:mm';

    var zeropad = function(number, length) {
        number = number.toString();
        length = length || 2;
        while (number.length < length)
            number = '0' + number;
        return number;
    },
    formats = {
        "YYYY": this.getFullYear(),
        "MM": zeropad(this.getMonth() + 1),
        "DD": zeropad(this.getDate()),
        "hh": zeropad(this.getHours()),
        "mm": zeropad(this.getMinutes())
    },
    pattern = '(' + Object.keys(formats).join(')|(') + ')';

    return format.replace(new RegExp(pattern, 'g'), function(match) {
        return formats[match];
    });
};

var now = new Date();
console.log(now.format());
// outputs: 2015-02-09 11:47
var yesterday = new Date('2015-02-08');
console.log(yesterday.format('hh:mm YYYY/MM/DD'));
// outputs: 00:00 2015/02/08

核心代码

以下是一个完整的自定义日期格式化函数示例：

function DateFmt(fstr) {
    this.formatString = fstr;

    var mthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    var zeroPad = function(number) {
        return ("0" + number).substr(-2, 2);
    };

    var dateMarkers = {
        d: ['getDate', function(v) { return zeroPad(v); }],
        m: ['getMonth', function(v) { return zeroPad(v + 1); }],
        n: ['getMonth', function(v) { return mthNames[v]; }],
        w: ['getDay', function(v) { return dayNames[v]; }],
        y: ['getFullYear'],
        H: ['getHours', function(v) { return zeroPad(v); }],
        M: ['getMinutes', function(v) { return zeroPad(v); }],
        S: ['getSeconds', function(v) { return zeroPad(v); }],
        i: ['toISOString']
    };

    this.format = function(date) {
        var dateTxt = this.formatString.replace(/%(.)/g, function(m, p) {
            var rv = date[(dateMarkers[p])[0]]();

            if (dateMarkers[p][1] != null) rv = dateMarkers[p][1](rv);

            return rv;
        });

        return dateTxt;
    };
}

fmt = new DateFmt("%w %d:%n:%y - %H:%M:%S  %i");
v = fmt.format(new Date());

最佳实践

使用第三方库：对于复杂的日期处理需求，建议使用成熟的第三方库，如Moment.js、date-fns等，它们提供了丰富的功能和良好的跨浏览器兼容性。
避免扩展原生对象：虽然可以通过扩展Date对象的原型来实现自定义格式化方法，但这可能会导致命名冲突和代码可维护性问题。如果需要自定义格式化，建议使用独立的函数。
考虑性能：在处理大量日期时，要注意性能问题。避免使用过于复杂的正则表达式或嵌套循环。