当前位置：首页 > 文章列表 > 文章 > 前端 > JS日期格式化方法全解析

JS日期格式化方法全解析

2025-09-08 14:30:32 0浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《JS日期格式化方法详解》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

JavaScript日期格式化首选Intl.DateTimeFormat，因其支持国际化、自定义选项丰富且性能佳；对于特殊格式需求可手动拼接，解析日期字符串时应优先使用ISO 8601标准格式以确保兼容性和时区正确性。

JS日期格式化怎么做

在JavaScript中处理日期格式化，说起来简单，但真要做到灵活且兼顾国际化，还是有不少门道的。核心思路无非两种：一是利用JS内置的Date对象和Intl API，二是借助成熟的第三方库。在我看来，对于大多数日常需求，尤其是涉及到用户界面展示和国际化时，Intl.DateTimeFormat绝对是首选，它功能强大且原生支持，能省去很多不必要的麻烦。而对于更复杂的日期计算或链式操作，才考虑引入外部库。

解决方案

要搞定JS日期格式化，我们通常有以下几种方式，从基础到高级，各有侧重：

手动拼接： 这是最原始也最直接的方法。通过Date对象提供的getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds()等方法，逐一获取日期时间组件，然后用字符串模板或者拼接符手动组合成你想要的格式。比如，要把日期格式化成"YYYY-MM-DD HH:mm:ss"，你可以这样做：

const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');

const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
console.log(formattedDate); // 输出类似 "2023-10-27 10:30:45"

这种方式胜在完全可控，但代码量稍大，且需要手动处理月份加一和数字补零的问题。

Date对象的toLocaleString()系列方法： toLocaleDateString(), toLocaleTimeString(), toLocaleString()这几个方法非常方便，它们会根据用户的浏览器设置（即本地环境）来格式化日期和时间。你可以传入locales和options参数来自定义输出。

const now = new Date();
// 默认本地格式
console.log(now.toLocaleString()); // 比如 "2023/10/27 上午10:30:45" (取决于浏览器设置)

// 指定语言和选项
console.log(now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
})); // "2023年10月27日"

console.log(now.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false // 24小时制
})); // "10:30:45"

这组方法的好处是能自动处理国际化，但自定义格式的灵活性相对有限，你只能在预设的几种样式中选择。

Intl.DateTimeFormat API： 这是ECMAScript国际化API的一部分，也是我个人最推荐的现代JS日期格式化方案。它提供了极其强大的国际化能力和高度的自定义选项，能够精确控制输出的各个部分，并且性能通常也很好。

const now = new Date();
// 基本用法
const formatter = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false // 强制24小时制
});
console.log(formatter.format(now)); // "2023/10/27 10:30:45"

// 更多自定义，例如显示星期几和时区
const formatterWithWeekday = new Intl.DateTimeFormat('en-US', {
    weekday: 'long',
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    timeZoneName: 'short', // 显示时区缩写
    timeZone: 'Asia/Shanghai' // 指定时区
});
console.log(formatterWithWeekday.format(now)); // "Friday, Oct 27, 2023, 10:30 AM CST" (示例，具体取决于当前时间)

Intl.DateTimeFormat的强大之处在于，它不仅能格式化日期，还能根据指定的locale（语言环境）智能地调整顺序、标点符号、数字系统，甚至日历系统，这对于开发面向全球用户的应用至关重要。

第三方库： 像date-fns、Luxon等现代日期库，它们提供了更简洁的API、更强大的功能（如日期计算、时区转换）和更一致的跨浏览器表现。虽然增加了项目依赖，但对于复杂或频繁的日期操作，它们能显著提升开发效率和代码可读性。例如，使用date-fns的format函数：
```
// 需要安装：npm install date-fns
import { format } from 'date-fns';
const now = new Date();
console.log(format(now, 'yyyy-MM-dd HH:mm:ss')); // "2023-10-27 10:30:45"
```
我个人倾向于在非必要时少引入外部库，但如果项目中有大量日期操作，或者对旧浏览器兼容性有较高要求，这些库确实能提供很好的解决方案。

JavaScript中如何实现自定义日期格式输出？

说真的，有时候内置的toLocaleString或者Intl.DateTimeFormat给出的格式，虽然灵活，但总有那么点不尽如人意，或者说，就是不符合产品经理“祖传”的那个特定字符串格式。这时候，我们往往就需要更“手动”的控制了。

最直接的方法就是利用Date对象提供的各种get方法，然后自己把它们拼起来。这听起来有点原始，但它给了你100%的控制权。比如，你想要一个"YYYY年MM月DD日星期X"的格式，而Intl.DateTimeFormat可能不会直接给你一个"星期X"这种中文的组合。

function formatCustomDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    const weekday = weekdays[date.getDay()]; // getDay() 返回0-6，对应星期日到星期六

    return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekday}`;
}

const myDate = new Date();
console.log(formatCustomDate(myDate)); // 示例输出: "2023年10月27日 10:30:45 星期五"

这种方法虽然需要写更多的代码来处理补零和数组映射（比如星期几），但它的好处是显而易见的：你完全掌控了输出的每一个字符。当你面对一些特别奇葩的日期格式需求时，比如"2023/10/27 (周五) 上午10点半"，用Intl.DateTimeFormat去凑可能比自己手写正则替换或者条件判断还麻烦。当然，这也不是没有缺点，比如你得自己处理时区问题（getUTC...系列方法）或者国际化（比如把“星期五”变成“Friday”）。所以，这通常是当你对性能要求不高，或者格式过于特殊，且不涉及复杂国际化时的一个兜底方案。

JS日期格式化：Intl.DateTimeFormat的进阶用法与国际化实践

当我第一次接触Intl.DateTimeFormat时，说实话，我有点被它那一大堆options参数给唬住了。但深入了解后，我发现这玩意儿简直是宝藏。它不仅仅是格式化日期，更是在处理国际化的日期展示问题。

Intl.DateTimeFormat的核心在于它的第二个参数options，这里面可以配置的属性非常多，而且很多都是针对国际化场景的：

weekday: long (e.g., "Monday"), short (e.g., "Mon"), narrow (e.g., "M").
year: numeric (e.g., "2023"), 2-digit (e.g., "23").
month: numeric (e.g., "10"), 2-digit (e.g., "10"), long (e.g., "October"), short (e.g., "Oct"), narrow (e.g., "O").
day: numeric, 2-digit.
hour: numeric, 2-digit.
minute: numeric, 2-digit.
second: numeric, 2-digit.
timeZoneName: long (e.g., "Central European Standard Time"), short (e.g., "CET"). 这对于显示事件发生地的时间非常有用。
timeZone: 明确指定一个时区，比如'America/New_York', 'Asia/Shanghai'。这太重要了，因为默认是用户的本地时区，而很多时候我们需要显示一个特定事件在特定时区的时间。
hour12: true或false，用于控制是否使用12小时制（带AM/PM）。
hourCycle: h11 (1-11, AM/PM), h12 (1-12, AM/PM), h23 (0-23), h24 (1-24)。更精细地控制小时的显示方式。
formatMatcher: basic或best fit，用于选择最佳匹配的格式算法。

国际化实践中的几个点：

明确指定locale： 这是第一步也是最重要的一步。如果你不指定，它会使用运行环境的默认locale，这在开发和测试时可能没问题，但到了用户那里就可能出问题了。比如，在中国用户界面，我们通常用'zh-CN'；在美国用'en-US'。

const eventTime = new Date('2024-01-01T14:30:00Z'); // UTC时间

// 为中国用户显示
const chinaFormatter = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    timeZone: 'Asia/Shanghai', // 指定上海时区
    hour12: false
});
console.log(`中国时间: ${chinaFormatter.format(eventTime)}`); // 示例: 中国时间: 2024年1月1日 下午10:30 (因为UTC+8)

// 为美国纽约用户显示
const nyFormatter = new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    timeZone: 'America/New_York', // 指定纽约时区
    hour12: true
});
console.log(`纽约时间: ${nyFormatter.format(eventTime)}`); // 示例: 纽约时间: Jan 1, 2024, 9:30 AM (因为UTC-5)

这个例子清楚地展示了timeZone的威力。同一个UTC时间点，在不同时区和不同语言环境下，能正确地显示为当地的日期和时间格式。这在构建全球化应用时简直是神来之笔。

formatToParts()： 有时候你可能不想要一个完整的字符串，而是想获取日期时间组件的各个部分（比如，年、月、日、分隔符等），然后自己进行一些特殊的渲染。Intl.DateTimeFormat也考虑到了这一点，提供了formatToParts()方法。
```
const parts = new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
}).formatToParts(new Date());

console.log(parts);
// 示例输出:
// [
//   { type: 'month', value: '10' },
//   { type: 'literal', value: '/' },
//   { type: 'day', value: '27' },
//   { type: 'literal', value: '/' },
//   { type: 'year', value: '2023' }
// ]
```
通过这个方法，你可以拿到一个包含日期时间各部分类型和值的数组，这为更高级的自定义渲染提供了可能性，比如在UI中高亮显示某个部分。

总之，Intl.DateTimeFormat是现代Web开发中处理日期国际化的利器。它避免了手动维护各种语言的日期格式规则的噩梦，让开发者能更专注于业务逻辑。

JS日期格式化：从字符串解析到Date对象的常见问题与解决方案

在实际开发中，我们经常会遇到这样的场景：从后端API获取到一个日期字符串，或者用户在输入框里填了一个日期，然后我们需要把这个字符串转换成JavaScript的Date对象，才能进行后续的格式化或计算。这个过程听起来简单，但里面坑可不少。

最常见的转换方式是直接使用new Date(dateString)或者Date.parse(dateString)。

const dateString1 = "2023-10-27T10:30:00Z"; // ISO 8601 格式，带时区信息
const date1 = new Date(dateString1);
console.log(date1); // 正常解析，得到一个Date对象

const dateString2 = "2023-10-27 10:30:00"; // 常见但非标准格式
const date2 = new Date(dateString2);
console.log(date2); // 某些浏览器可能解析失败或解析结果不一致

常见问题：

浏览器兼容性问题： 这是最让人头疼的一点。new Date(string)对日期字符串的解析是高度依赖浏览器实现的。尤其是一些非标准的日期字符串，比如"YYYY-MM-DD"、"MM/DD/YYYY"、"YYYY/MM/DD HH:mm:ss"等等，在不同的浏览器（甚至同一浏览器的不同版本）中，解析结果可能完全不同，甚至直接返回Invalid Date。例如，"2023-10-27"在大多数现代浏览器中会被解析为UTC时间，但在某些旧版本IE或Safari中可能被解析为本地时间。而"2023/10/27"则可能被解析为本地时间。这种不确定性简直是噩梦。
时区问题： 如果日期字符串不包含时区信息（例如"2023-10-27 10:30:00"），new Date()会默认将其解析为当前运行环境的本地时间。这在跨时区协作时，很容易导致时间偏差。比如，一个后端返回的字符串是服务器本地时间，但前端在另一个时区解析，就会出现问题。

解决方案：

始终使用ISO 8601格式： 这是处理日期字符串解析的黄金法则。ISO 8601格式（如"YYYY-MM-DDTHH:mm:ss.sssZ"或"YYYY-MM-DDTHH:mm:ss.sss±HH:MM"）是国际标准，被所有现代浏览器和JavaScript引擎良好支持。后端API在返回日期时间时，强烈建议统一采用这种格式。
```
const isoString = "2023-10-27T10:30:00.000Z"; // UTC时间
const dateFromIso = new Date(isoString);
console.log(dateFromIso); // 总是能正确解析为UTC时间

const isoStringLocal = "2023-10-27T10:30:00"; // 不带Z，会被解析为本地时间
const dateFromIsoLocal = new Date(isoStringLocal);
console.log(dateFromIsoLocal); // 解析为本地时间
```
如果字符串带有Z，表示UTC时间；如果没有，则会被认为是本地时间。这是需要注意的关键点。

手动解析非标准格式： 如果你无法控制日期字符串的来源（比如从用户输入或遗留系统），并且它不是ISO 8601格式，那么最稳妥的办法就是手动解析它。这意味着你需要自己编写代码来根据已知的格式规则，从字符串中提取年、月、日、时、分、秒等信息，然后使用new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)这种构造函数来创建Date对象。

function parseCustomDateString(dateString) {
    // 假设格式是 "YYYY/MM/DD HH:mm:ss"
    const parts = dateString.match(/(\d{4})\/(\d{2})\/(\d{2}) (\d{2}):(\d{2}):(\d{2})/);
    if (parts) {
        // 注意：月份在Date构造函数中是0-11
        return new Date(
            parseInt(parts[1]), // 年
            parseInt(parts[2]) - 1, // 月 (减1)
            parseInt(parts[3]), // 日
            parseInt(parts[4]), // 时
            parseInt

到这里，我们也就讲完了《JS日期格式化方法全解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！