返回

JS Date 对象转 YYYYMMDD 格式字符串的5种方法

javascript

JS 日期对象转 YYYYMMDD 格式字符串的那些事儿

遇到了个挺常见的问题:要把 JavaScript 里的 Date 对象转成 YYYYMMDD 这种格式的字符串,有啥好办法?拼接 Date.getFullYear(), Date.getMonth(), 还有 Date.getDate() ? 这也太麻烦了!

为什么老是遇到这个问题?

主要还是因为不同的地方,对日期的格式要求五花八门。有的系统要 YYYY-MM-DD,有的要 MM/DD/YYYY,还有的就爱 YYYYMMDD 这种紧凑型的。做数据处理、接口对接、文件名生成… 都可能碰上。

几种常见的搞法

下面我整理了几种把 Date 对象转换成 YYYYMMDD 格式字符串的方法,从简单到复杂都有,你可以根据自己的情况挑一个顺手的。

1. 手动拼接:最 “朴实” 的办法

就像一开始说的,可以分别获取年、月、日,然后拼起来:

function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从 0 开始的,所以要 +1,还要补零!
  const day = String(date.getDate()).padStart(2, '0'); // 日也要补零!

  return year + month + day;
}

const myDate = new Date();
const formattedDate = formatDate(myDate);
console.log(formattedDate); // 输出类似于 "20231027"

原理:

  • getFullYear():直接拿到四位数的年份。
  • getMonth():拿到月份,但是!月份是从 0 开始的(0 代表 1 月,11 代表 12 月),所以要加 1。
  • getDate():拿到日期。
  • String().padStart(2, '0'):保证月和日都是两位数,不够的在前面补 0。比如,1 月会变成 "01"。

注意:

  • 月份要记得加 1!这是个很容易犯错的地方。
  • padStart() 保证月、日是两位数,这很重要。

2. 使用 toISOString() + 字符串截取:省点事儿

toISOString() 方法可以把 Date 对象转成 ISO 8601 格式的字符串 (YYYY-MM-DDTHH:mm:ss.sssZ)。我们可以从中截取出我们需要的部分。

function formatDate(date) {
  return date.toISOString().split('T')[0].replace(/-/g, '');
}

const myDate = new Date();
const formattedDate = formatDate(myDate);
console.log(formattedDate);

原理:

  • toISOString(): 直接得到一个标准格式的字符串,比如 "2023-10-27T12:34:56.789Z"。
  • split('T')[0]: 以 'T' 为分隔符,把字符串切成两部分,我们要的是日期部分,所以取第一个元素,也就是 "2023-10-27"。
  • replace(/-/g, ''): 把 "-" 全部替换成空字符串,就得到了 "20231027"。

注意:

  • toISOString() 返回的是 UTC 时间。如果你需要的是本地时间,可能得再处理一下时区问题。

3. toLocaleDateString():看当地习惯

toLocaleDateString() 可以根据本地设置(或者你指定的 locale)来格式化日期。但是,不同地区、不同浏览器的默认格式可能不一样,所以要得到 YYYYMMDD,得花点心思。

function formatDate(date) {
    const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
  return date.toLocaleDateString(undefined, options).replace(/\D/g, "");
}

const myDate = new Date();
const formattedDate = formatDate(myDate);
console.log(formattedDate);

原理:

  • toLocaleDateString(undefined, options): 第一个参数是 locale。 如果不提供, 就使用运行时的默认区域设置, 此时 options 就很有用了
  • options : 一个具有格式化选项的对象,用来精细地控制日期的格式:
    * year: 'numeric':年份用四位数表示。
    * month: '2-digit':月份用两位数表示 (如果是一位数就在前面补 0)。
    * day: '2-digit':日用两位数表示 (如果是一位数就在前面补 0)。
  • replace(/\D/g, ""): 移除非数字的字符。\D 匹配任何非数字字符, g标志用于替换所有匹配项, 而不仅仅是第一个

注意:

  • toLocaleDateString 返回的日期格式是多变的。 在使用此方式的时候, 建议固定传入options,并根据输出进行进一步处理,保证输出YYYYMMDD格式。

4. 使用 Intl.DateTimeFormat:更强大的本地化

Intl.DateTimeFormat 对象是 ECMAScript 国际化 API 的一部分,它提供了更灵活的日期和时间格式化功能。

function formatDate(date) {
  const formatter = new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  });

  return formatter.format(date).replace(/\//g, '');
}
const myDate = new Date();
const formattedDate = formatDate(myDate);
console.log(formattedDate);

或者, 更简洁一些的写法, 直接通过formatToParts获得各部分然后组合

function formatDate(date) {
  const parts = new Intl.DateTimeFormat('fr-CA',{year: 'numeric', month: '2-digit',day: '2-digit'}).formatToParts(date);
  let formatted = '';
   for (let part of parts) {
        if (part.type === 'year' || part.type === 'month' || part.type === 'day') {
            formatted += part.value;
        }
    }
    return formatted;
}

const myDate = new Date();
const formattedDate = formatDate(myDate);
console.log(formattedDate);

原理:

  • new Intl.DateTimeFormat('en-US', { ... }):创建一个日期格式化器。第一个参数是 locale(这里用的是 'en-US',你也可以换成别的),第二个参数是格式化选项。
  • formatter.format(date):用格式化器来格式化日期对象。
  • replace(/\//g, ''):把斜杠替换掉(en-US 默认格式是 MM/DD/YYYY)。
  • formatToParts:返回一个数组,包含日期的各个组成部分(年、月、日、时、分、秒等),每个部分都是一个对象,包含了类型和值。

注意:

  • 同样,为了输出稳定的YYYYMMDD格式, 需要对返回内容做处理.
  • formatToParts 是个好东西, 可以灵活组合出想要的格式.

5. 使用第三方库:Moment.js (不推荐) 和 Day.js/date-fns (推荐)

以前,Moment.js 很流行,但现在它官方都建议用别的库了。如果你真想用库,推荐 Day.js 或 date-fns,它们更轻量,功能也更现代。

Day.js 示例:

// 先安装: npm install dayjs

import dayjs from 'dayjs';

function formatDate(date) {
  return dayjs(date).format('YYYYMMDD');
}

const myDate = new Date();
const formattedDate = formatDate(myDate);
console.log(formattedDate);

date-fns 示例:

// 先安装: npm install date-fns

import { format } from 'date-fns';

function formatDate(date) {
  return format(date, 'yyyyMMdd');
}

const myDate = new Date();
const formattedDate = formatDate(myDate);
console.log(formattedDate);

原理:

  • 这些库都提供了非常方便的日期格式化函数。你只要告诉它们你想要的格式(比如 'YYYYMMDD'),它们就帮你搞定。
  • Day.js 的 API 设计和 Moment.js 很像,如果你以前用过 Moment.js,会很容易上手。
  • date-fns 的设计更函数式,它的每个函数只做一件事,你可以按需引入,这样打包出来的代码会更小。

为什么推荐 Day.js 或 date-fns:

  • 简单易用: 格式化日期就是一句话的事。
  • 功能强大: 不仅能格式化,还能做日期的计算、比较、解析等等。
  • 轻量级: 比 Moment.js 小很多。
  • 现代: 支持 tree-shaking,只打包你用到的代码。

总结

把 Date 对象转成 YYYYMMDD 格式字符串,方法有很多。小项目,手动拼接或者 toISOString() 截取一下就行。如果对日期格式有更复杂的要求,或者要处理时区、本地化之类的,推荐用 Day.js 或 date-fns。根据需要来选择,灵活应用!