前端js如何格式化日期
最新回答
毒药
2021-05-31 20:57:41
在前端 JavaScript 中，格式化日期可以通过多种内置方法实现，以下是具体方案及示例：
1. 使用内置方法快速格式化toLocaleDateString()仅格式化日期部分（年-月-日），输出格式依赖浏览器语言设置：
const date = new Date();const formattedDate = date.toLocaleDateString(); // 默认格式，如 "2023-03-08"toLocaleTimeString()仅格式化时间部分（时:分:秒）：
const formattedTime = date.toLocaleTimeString(); // 如 "10:34:25"toLocaleString()同时格式化日期和时间：
const formattedString = date.toLocaleString(); // 如 "2023-03-08 10:34:25"2. 使用 Intl.DateTimeFormat API（灵活控制格式）通过配置选项自定义输出格式（如月份缩写、12/24小时制等）：
const formatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', // 或 'long'（March）、'narrow'（M） day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true // 默认true（12小时制），false为24小时制});const formattedDate = formatter.format(date); // 如 "Mar 8, 2023, 10:34:25 AM"3. 自定义格式（手动拼接）若需完全控制格式（如 YYYY-MM-DD HH:mm:ss），可提取日期各部分后拼接：
const padZero = num => num.toString().padStart(2, '0');const year = date.getFullYear();const month = padZero(date.getMonth() + 1); // 月份从0开始const day = padZero(date.getDate());const hours = padZero(date.getHours());const minutes = padZero(date.getMinutes());const seconds = padZero(date.getSeconds());const customFormat = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;// 输出：2023-03-08 10:34:254. 第三方库（推荐复杂场景）对于复杂需求（如时区处理、国际化），可使用库如：
- Moment.js（已停止维护，但存量项目常用）moment(date).format('YYYY-MM-DD HH:mm:ss');
- date-fns（现代轻量级方案）import { format } from 'date-fns';format(date, 'yyyy-MM-dd HH:mm:ss');
- 本地化差异：toLocale* 方法结果受用户浏览器语言/地区设置影响（如中文环境可能输出 2023/3/8）。
- 性能：频繁格式化时，复用 Intl.DateTimeFormat 实例比多次调用 toLocale* 更高效。
- 时区：上述方法默认使用用户本地时区，如需UTC时间，用 getUTC*() 方法（如 date.getUTCHours()）。
- 简单需求：直接使用 toLocaleString() 系列方法。
- 灵活格式：Intl.DateTimeFormat 配置选项。
- 精确控制：手动拼接或第三方库（如 date-fns）。
根据项目需求选择合适方案即可。
热门标签
