在构建现代 Web 应用的过程中，我们经常需要处理时间的显示。尽管 24 小时制在某些地区很通用，但在用户界面设计中，12 小时制（AM/PM）往往显得更加亲切和直观。你可能会遇到这样的情况：从服务器获取的时间戳是标准的 24 小时格式，但为了在界面上更好地呈现给用户，你需要将其转换为 "02:30 PM" 这样的格式。
在 JavaScript 中处理日期和时间虽然看似简单，但如果不掌握正确的方法，很容易陷入手动计算的陷阱中。在这篇文章中，我们将深入探讨几种不同的方式来实现这一目标，从最现代、最简洁的 API 到传统的原生逻辑处理，让我们一起来探索吧。
目录
准备工作：创建日期对象
在开始转换之前，我们首先需要一个 Date 对象。在 JavaScript 中，我们可以使用以下代码来获取当前时间：
// 获取当前的日期时间对象
let now = new Date();
// 也可以指定特定时间
// let specificDate = new Date(‘2023-10-25T14:30:00‘);
好了，有了这个基础对象，让我们来看看具体有哪些方法可以帮助我们完成 12 小时制的转换。
方法 1：使用现代标准的 toLocaleString() 方法
这是目前最推荐的做法之一。INLINECODE760cb7e4 方法不仅能处理时区，还能根据特定的地区设置格式化日期。通过传入 INLINECODEe287733b 参数，我们可以精确控制时间的显示形式。
基础示例
在这个例子中，我们将利用内置的 toLocaleString() 方法将给定日期的格式转换为 AM-PM 格式。我们只需要告诉它我们需要小时和分钟，浏览器就会自动处理 AM/PM 的逻辑。
// 获取当前时间
let date = new Date();
// 使用 toLocaleString 进行格式化
// 传入空数组 [] 表示使用默认的本地设置
let timeString = date.toLocaleString([], {
hour: "2-digit",
minute: "2-digit",
});
console.log("当前时间（12小时制）:", timeString);
输出结果（示例）：
当前时间（12小时制）: 07:42 PM
进阶应用：指定地区
为了确保无论用户的浏览器设置如何，我们都能强制显示 12 小时制，最好明确指定地区（如美国英语 "en-US"）和 hour12 选项。
let date = new Date();
let options = {
hour: ‘numeric‘, // 使用数字形式
minute: ‘numeric‘,
hour12: true // 强制开启 12 小时制
};
// 明确指定为美式英语环境，确保 AM/PM 格式
let usTime = date.toLocaleTimeString(‘en-US‘, options);
console.log("美式时间格式:", usTime);
实用见解
你可能会问，为什么要传递 INLINECODE70dc8758？这是因为 AM/PM 格式主要在英语国家普及。在一些使用 24 小时制的国家（如德国或法国），如果不指定地区，直接使用 INLINECODEbf646c9f 可能会返回 24 小时格式。显式指定地区是确保全球用户看到一致格式的最佳实践。
方法 2：利用 Intl.DateTimeFormat 构造函数
如果你需要更强大的国际化支持，或者需要多次格式化不同的日期（这在处理大量数据时很常见），Intl.DateTimeFormat 对象是一个性能更好的选择。它能根据语言敏感的方式来格式化日期和时间。
代码示例
通过指定适当的选项，我们可以轻松创建一个格式化器，然后重复使用它。
let date = new Date();
// 创建一个专用的格式化器对象
let formatter = new Intl.DateTimeFormat("en-US", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit", // 我们也可以加上秒
hour12: true, // 关键配置：启用12小时制
});
// 使用格式化器
let formattedTime = formatter.format(date);
console.log("格式化后的时间:", formattedTime);
// 如果你有一组时间数据，可以循环使用同一个 formatter，性能更好
let times = [new Date(), new Date(Date.now() + 3600000), new Date(Date.now() + 7200000)];
times.forEach(t => console.log(formatter.format(t)));
输出结果：
格式化后的时间: 07:42:15 PM
08:42:15 PM
09:42:15 PM
深入理解
INLINECODE400929bd 是现代 JavaScript 处理国际化的基石。相比于 INLINECODEd865e6b0，它在处理批量数据时效率更高，因为它一次性解析了格式选项。这类似于编译型语言中的“预编译”概念。
方法 3：使用原生方法（手动计算）
有时候，我们可能处于不支持 ES6 国际化 API 的旧环境中，或者我们需要对逻辑进行极度的微调。这时候，我们需要回归基础，使用原生方法来转换日期时间格式。
实现原理
简单来说，我们会应用取模运算符 INLINECODEd8fa85ed 来计算 12 小时制下的小时数，并使用条件运算符 INLINECODE8e8754f8 来判断是应用 AM 还是 PM。以下是详细的实现步骤：
- 获取当前小时（0-23）。
- 判断小时数是否大于等于 12，以决定是 AM 还是 PM。
- 使用取模运算
hours % 12将 13-23 转换为 1-11。 - 处理特殊情况：INLINECODE1567ff29 点（午夜）在 12 小时制中应显示为 INLINECODE8a66591a。
完整代码示例
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds(); // 可选：添加秒
// 1. 检查是 AM 还是 PM
let ampm = hours >= 12 ? ‘PM‘ : ‘AM‘;
// 2. 计算 12 小时制下的当前小时
// 13 % 12 = 1 (下午1点)
// 23 % 12 = 11 (晚上11点)
hours = hours % 12;
// 3. 将小时 "0" 显示为 "12"
// 如果 hours 是 0，说明是午夜12点
hours = hours ? hours : 12;
// 4. 补零操作（可选，用于保持格式统一）
minutes = minutes < 10 ? '0' + minutes : minutes;
// seconds = seconds < 10 ? '0' + seconds : seconds;
// 5. 组合字符串
let timeStr = hours + ":" + minutes + " " + ampm;
console.log("手动计算结果:", timeStr);
输出结果：
手动计算结果: 3:15 PM
代码逻辑深度解析
这一步最容易出错的地方在于 INLINECODE390898af。因为 JavaScript 中 INLINECODEddbc34f3 是 falsy 值，当我们对 12 取模后，午夜 0 点或中午 12 点会变成 INLINECODEa3d90191。如果不做这个转换，时钟可能会显示 INLINECODE0a4760f9，这显然不符合人类阅读习惯。我们要确保 INLINECODE91a6d1f0 被正确映射为 INLINECODEc2f79776。
常见应用场景与最佳实践
在实际开发中，选择哪种方法往往取决于具体的项目需求。让我们看看几个实际场景。
场景一：全球化的电商网站
如果你正在构建一个面向全球用户的电商平台，你绝对不应该手动处理时间字符串。你应该使用 Intl.DateTimeFormat，并根据用户的个人设置动态传入地区代码。
// 模拟根据用户偏好显示时间
function displayUserTime(userLocale) {
const now = new Date();
const options = { hour: ‘numeric‘, minute: ‘numeric‘, hour12: true };
return now.toLocaleTimeString(userLocale, options);
}
console.log("美国用户看到:", displayUserTime(‘en-US‘));
console.log("英国用户看到:", displayUserTime(‘en-GB‘)); // 可能不同，但倾向于 12小时
console.log("日本用户看到:", displayUserTime(‘ja-JP‘)); // 可能仍是 24小时，取决于实现
}
场景二：高性能的实时仪表盘
如果你正在使用 Canvas 或 SVG 每秒渲染 60 次的图表，频繁调用复杂的格式化函数可能会造成性能瓶颈。这种情况下，原生方法（取模运算）虽然代码冗长，但执行速度极快，是更好的选择。
常见错误：字符串拼接陷阱
很多初学者会犯这样的错误：直接使用字符串拼接来强行插入 AM/PM，而忽略了 INLINECODEc77cfc10 点和 INLINECODEa59b0f1b 点的特殊情况。
// 错误示范
// 如果 date 是 00:20 (凌晨)，这会输出 0:20 AM，这是不对的
let badHours = date.getHours() % 12;
console.log(badHours + ":" + date.getMinutes() + " AM");
解决方案： 总是使用三元运算符或者经过验证的库来处理这个转换，不要在这个逻辑上“自作聪明”。
性能优化建议
在我们的开发实践中，性能是不容忽视的一环。这里有几个建议：
- 避免重复创建对象：如果你在循环中处理日期，请将
Intl.DateTimeFormat对象创建在循环外部，而不是内部。创建格式化器对象是有开销的。 - 缓存时间字符串：如果时间不需要精确到秒，不要每秒都重新计算。可以使用
setInterval每分钟更新一次 DOM，而不是每帧更新。 - 原生最快：在极端性能敏感的场景（如游戏循环），原生数学运算（取模）比任何 API 调用都要快，因为它不涉及对象创建和垃圾回收。
结语
在这篇文章中，我们探讨了三种在 JavaScript 中显示 12 小时 AM/PM 格式时间的主要方法。从简洁优雅的 INLINECODEa6ebf20c 到功能强大的 INLINECODEc44cb045，再到灵活可控的原生计算，每种方法都有其独特的适用场景。
作为开发者，我们不仅要让代码“跑通”，更要让代码易读、易维护且高效。大多数情况下，INLINECODEd1d65227 是你的首选；而在处理批量国际化任务时，请转向 INLINECODE09e75216；只有在老旧环境或需要极致性能时，才考虑手动计算。
希望这些技巧能帮助你在下一个项目中更自信地处理时间！当你下次面对时间格式化需求时，不妨试着选择最合适的那一种方法。