JS日期格式化怎么做-js教程-PHP中文网

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
```
登录后复制
，用于选择最佳匹配的格式算法。

国际化实践中的几个点：

Veed Video Background Remover

Veed推出的视频背景移除工具

查看详情

明确指定

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日期格式化怎么做的详细内容，更多请关注php中文网其它相关文章！