JavaScript Academy · 课时

格式化日期

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

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

使用 toLocaleDateString 选项显示日期。

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

格式化日期

JavaScript 提供了多种内置方法，可以将日期转换为可读文本，从根据区域设置生成的输出到标准化的 ISO 字符串。

const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString())

toISOString

toISOString 会返回 UTC 时间下的标准化字符串，非常适合存储和数据交换，因为它不会产生歧义。

const d = new Date(Date.UTC(2024, 0, 15, 10, 30, 0))
console.log(d.toISOString())

截取 ISO 字符串

ISO 字符串会将日期放在最前面，因此您可以截取前十个字符，仅获取日历日期。

const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))

toLocaleDateString

toLocaleDateString 会根据区域设置格式化日期部分，生成符合相应地区习惯的输出。

const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { timeZone: "UTC" })
console.log(typeof text)

区域设置参数

第一个参数是类似 en-US 或 de-DE 的区域设置标签，它会改变格式化日期的顺序和分隔符。

const d = new Date(Date.UTC(2024, 0, 15))
const us = d.toLocaleDateString("en-US", { timeZone: "UTC" })
const iso = d.toISOString().slice(0, 10)
console.log(typeof us, iso)

格式化选项

选项对象允许您选择每个部分的显示方式，例如使用完整月份名称或数字年份。

const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", timeZone: "UTC" })
console.log(typeof text)

toLocaleTimeString

toLocaleTimeString 只格式化时间部分，同样会遵循您提供的区域设置和选项。

const d = new Date(Date.UTC(2024, 0, 15, 14, 5, 0))
const text = d.toLocaleTimeString("en-US", { timeZone: "UTC" })
console.log(typeof text)

toLocaleString

toLocaleString 会将日期和时间组合成一个本地化字符串。

const d = new Date(Date.UTC(2024, 0, 15, 9, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)

toDateString

toDateString 会提供固定格式、易于阅读的英文日期，不支持区域设置选项，适合快速记录日志。

const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof d.toDateString())

Intl.DateTimeFormat

对于重复格式化，Intl.DateTimeFormat 会创建一个可复用的格式化器对象，比多次调用区域设置方法更高效。

const fmt = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", dateStyle: "medium" })
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof fmt.format(d))

选择格式

请使用 ISO 字符串进行存储和接口通信，并使用区域设置方法向用户显示符合其所在地区习惯的内容。请将这两类关注点分开。

const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))

快速检查

测试您对格式化的了解。

回顾

回顾：请根据任务选择合适的格式化方法。

使用 toISOString 进行存储和接口通信
使用 toLocaleDateString 及相关方法向用户显示内容
选项可以控制月份名称和数字样式
重复格式化时，Intl.DateTimeFormat 更高效

const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))

常见问题解答

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

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

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

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

学习 JavaScript Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy