JavaScript Academy · 课时

格式化日期和时间

Q: 「格式化日期和时间」这节课中我会学到什么？

使用 Intl.DateTimeFormat 显示日期。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Intl.DateTimeFormat 显示日期。

格式化日期和时间 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

Intl.DateTimeFormat

Intl.DateTimeFormat 会根据区域设置格式化 Date 对象，避免手动拼接字符串时容易出错。

const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"

区域设置差异

日期顺序因地区而异：US 使用月/日/年，欧洲大部分地区使用日/月/年。

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026

日期样式预设

dateStyle 提供 "full"、"long"、"medium" 和 "short" 预设，可快速生成易读的输出。

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"

时间样式

timeStyle 对时间部分的工作方式相同，并且可以与 dateStyle 结合使用。

const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"

自定义组件选项

如果需要精细控制，可以分别指定 year、month、day 和 weekday 等组件。

const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"

月份格式

month 接受 "numeric"、"2-digit"、"short"、"long" 和 "narrow"。

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d));  // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"

12 小时制与 24 小时制

hour12: true/false 会覆盖区域设置的默认时钟格式。

const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"

时区

传入一个时区的 IANA 名称，即可在任意时区中显示日期，不受运行环境本地时区的影响。

const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));

formatToParts

formatToParts 会返回由不同类型标记组成的数组，让您可以单独设置或重新排列各个部分的样式。

const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));

格式化日期范围

formatRange(start, end) 会以紧凑的方式显示日期范围，并合并相同的组件。

const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"

非公历日历

calendar 选项支持 "islamic"、"hebrew" 或 "japanese" 等日历系统。

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));

快速检查

测试日期格式化。

回顾：日期与时间

您使用 Intl.DateTimeFormat 格式化了日期和时间，使用了 dateStyle/timeStyle 预设和细粒度的组件选项，处理了时区、12/24 小时制时钟、formatToParts、日期范围和其他日历。接下来学习：相对时间与复数形式。

常见问题解答

「格式化日期和时间」课时是免费的吗？

是的 — 「格式化日期和时间」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「格式化日期和时间」这节课中我会学到什么？

使用 Intl.DateTimeFormat 显示日期。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「格式化日期和时间」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy