JavaScript日期格式化首选Intl.DateTimeFormat，因其支持国际化、自定义选项丰富且性能佳；对于特殊格式需求可手动拼接，解析日期字符串时应优先使用ISO 8601标准格式以确保兼容性和时区正确性。
在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开始，所以要加1const 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-fnsimport { 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日期格式化怎么做的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517732.html
微信扫一扫 
支付宝扫一扫 
