JS显示本地时间时怎么转换为12小时制并添加AM/PM

一、快速了解：24小时制与12小时制的换算原则

在 JavaScript 中，通过 new Date() 获取的日期对象本身是一个时间戳，它本身不具备“12小时制”或“24小时制”的存储属性。当我们在终端或页面上输出时间时，调用的 getHours() 方法默认遵循 24 小时制标准，返回一个范围在 0 到 23 之间的整数。

将这一数值转换为标准的 12 小时制，并非只是单纯减去 12 那么简单。我们需要理清两个核心维度的换算：

• 时段标识（AM 与 PM）：从午夜 00:00:00 到中午 11:59:59 为上午（AM）；从中午 12:00:00 到深夜 23:59:59 为下午或晚间（PM）。因此，判断边界十分明确——小时数大于等于 12 即为 PM，小于 12 即为 AM。
• 小时数值（1 到 12）：在标准的 12 小时制钟表中，是不存在“0 点”这一概念的。深夜零点对应的不是“0:00 AM”，而是“12:00 AM”；同理，正午对应的也是“12:00 PM”，而非“0:00 PM”。

二、方案一：使用原生 API 自动格式化（推荐）

如果开发目标是快速、标准地在网页中渲染带 AM/PM 的时间文本，使用浏览器内置的国际化 API 是最稳健的方式。现代 JavaScript 运行时（包括所有现代浏览器与 Node.js 14+）均原生支持完整的国际化接口。

1. 使用 toLocaleTimeString 并指定 en-US 语言环境

许多开发者在初次尝试时直接调用 date.toLocaleTimeString()，却发现输出的是“上午 10:20:30”或者受操作系统区域语言影响产生非预期结果。如果你的需求是严格显示英文大写的“AM”或“PM”，必须在第一个参数中明确传入支持该格式的语言标签（通常使用 'en-US'）：

// 获取当前本地时间
const now = new Date();

// 转换为 12 小时制并附带 AM / PM
const formattedTime = now.toLocaleTimeString('en-US', {
  hour: 'numeric',      // 小时显示为数字（不强制补零，如 9 或 12）
  minute: '2-digit',    // 分钟强制保留两位，如 05
  second: '2-digit',    // 秒数强制保留两位，如 08
  hour12: true          // 明确启用 12 小时制
});

console.log(formattedTime); // 输出示例："2:25:08 PM" 或 "12:05:30 AM"

如果希望小时部分在个位数时也补足前导零（例如输出 "02:25:08 PM"），只需将配置项中的 hour: 'numeric' 改为 hour: '2-digit' 即可。

2. 使用 Intl.DateTimeFormat 提升高频调用性能

当你的页面需要运行一个每秒刷新一次的动态时钟，或者在长列表渲染数百条记录的时间戳时，重复调用 toLocaleTimeString() 会频繁触发内部解析。此时，预先实例化一个 Intl.DateTimeFormat 对象复用是更优的做法：

// 创建可复用的格式化器实例
const timeFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit',
  hour12: true
});

// 在定时器或循环中直接调用 format 方法
const currentTimeString = timeFormatter.format(new Date());

三、方案二：手动计算与取模转换（完全掌控输出格式）

原生 API 虽然省事，但在一些特定交互场景下往往受限——比如 UI 设计师要求格式必须是 "02-25-08 [PM]"，或者需要把时段标记放在最前方，或者希望在轻量级脚本中避免任何地区语言差异。此时，手动提取各分量进行计算是最直接可控的方案。

1. 核心数学公式：hours % 12 || 12

很多开发者在刚接触该问题时，会习惯性地写出如下代码：

// ❌ 存在逻辑漏洞的写法
const hours12 = hours % 12; // 当 hours 为 0 或 12 时，结果都会变成 0！

这种写法在上午 1 点到 11 点、以及下午 13 点到 23 点都能正常运行，但在两个最关键的时间点必然出错：

1. 午夜 00:00：0 % 12 等于 0，导致输出“0:00 AM”；
2. 正午 12:00：12 % 12 也等于 0，导致输出“0:00 PM”。

在 JavaScript 中，优雅修复这一问题的关键是利用逻辑或操作符（||）的短路求值特性：当左侧的值为 0（在布尔上下文中为 falsy 假值）时，表达式会自动计算并返回右侧的值。因此，hours % 12 || 12 能够精准在取模结果为 0 时回退为 12。

2. 封装完整的转换工具函数

结合补零方法 String.prototype.padStart()，我们可以写出一个结构严谨、无任何外部依赖的纯 JavaScript 函数：

/**
 * 将本地日期时间转换为带 AM/PM 的 12 小时制字符串
 * @param {Date} [date=new Date()] 要转换的日期对象，默认为当前本地时间
 * @param {boolean} [padZero=true] 小时数是否需要前导补零（如 02 vs 2）
 * @returns {string} 格式化后的时间字符串，形如 "02:25:08 PM"
 */
function format12HourTime(date = new Date(), padZero = true) {
  // 1. 提取本地 24 小时制基准分量
  const hours24 = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  // 2. 判定时段：12 及以上为 PM，12 以下为 AM
  const period = hours24 >= 12 ? 'PM' : 'AM';

  // 3. 计算 12 小时制数值并修正 0 点
  const rawHours12 = hours24 % 12 || 12;

  // 4. 补零对齐（分钟和秒必须保持两位）
  const displayHours = padZero ? String(rawHours12).padStart(2, '0') : String(rawHours12);
  const displayMinutes = String(minutes).padStart(2, '0');
  const displaySeconds = String(seconds).padStart(2, '0');

  // 5. 组合并返回最终字符串
  return `${displayHours}:${displayMinutes}:${displaySeconds} ${period}`;
}

// 验证测试
console.log(format12HourTime(new Date())); 
// 输出示例："02:25:08 PM"

四、容易混淆的说法与认知辨析

在处理时间制式转换时，社区中常存在一些看似合理但容易引发 Bug 的经验说法。我们针对其中最典型的三个认知进行具体分析：

1. “正午 12 点到底是 12:00 AM 还是 12:00 PM？”

辨析：正午 12 点是 12:00 PM。 AM 是拉丁语 Ante Meridiem（正午之前）的缩写，PM 是 Post Meridiem（正午之后）的缩写。虽然字面上“正午瞬间”既不在正午之前也不在正午之后，但国际公认的标准计时约定将中午 12 点定义为下午的起始点，即 12:00 PM；而半夜 12 点（新一天的开始）被定义为 12:00 AM。在代码逻辑中，hours24 >= 12 ? 'PM' : 'AM' 正是严格契合该国际标准的。

2. “用 toLocaleTimeString() 不传语言参数也可以正常显示 AM/PM？”

辨析：这在英语操作系统下能够成立，但在生产环境中是一个典型隐患。 如果不传递第一个 locales 参数，JavaScript 将默认读取宿主操作系统的默认语言环境。在中国大陆的 Windows 或 macOS 设备上，运行 new Date().toLocaleTimeString(undefined, { hour12: true }) 很可能会输出类似于“下午2:25:08”的中文文本。如果你在业务中依赖字符串里包含“AM”或“PM”标识，必须固定传入 'en-US'。

3. “时制转换会受到夏令时或时区漂移影响吗？”

辨析：只要你使用的是本地时间方法（如 getHours() 或 toLocaleTimeString()），浏览器底层已经依据系统当前时区和夏令时规则计算出了当下的本地小时数值。转换逻辑只关注“如何把当下的 0~23 数值映射到 1~12 和 AM/PM”，不会二次引入时区偏差。

五、实战应用：在网页中构建动态更新的 12 小时制时钟

为了验证上述逻辑在实际 DOM 交互中的表现，下面提供一个可以直接嵌入网页的完整动态时钟示例。包含页面初始化防白屏与定时器更新：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>本地12小时制动态时钟</title>
  <style>
    .clock-display {
      font-family: 'Courier New', monospace;
      font-size: 28px;
      font-weight: bold;
      color: #333;
      padding: 12px 20px;
      background: #f4f4f4;
      border-radius: 8px;
      display: inline-block;
    }
    .clock-period {
      color: #6d785d;
      margin-left: 6px;
      font-size: 20px;
    }
  </style>
</head>
<body>

  <div id="clock" class="clock-display">加载中...</div>

  <script>
    function updateClock() {
      const now = new Date();
      const hours24 = now.getHours();
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');

      const period = hours24 >= 12 ? 'PM' : 'AM';
      const hours12 = String(hours24 % 12 || 12).padStart(2, '0');

      const clockEl = document.getElementById('clock');
      if (clockEl) {
        clockEl.innerHTML = `${hours12}:${minutes}:${seconds}<span class="clock-period">${period}</span>`;
      }
    }

    // 立即执行一次防止页面初次加载时出现短暂空白或占位符
    updateClock();

    // 启动每秒更新定时器
    setInterval(updateClock, 1000);
  </script>
</body>
</html>

六、选型建议与总结

在面对“显示本地时间并转换为 12 小时制加 AM/PM”这一任务时，开发者可根据项目的实际定位快速确定选型：

• 推荐使用 toLocaleTimeString('en-US', { ... }) 的场景：普通管理后台、常规业务展示、不需要额外特殊分隔符、追求代码行数最少。
• 推荐使用手动计算函数（format12HourTime）的场景：需要将时钟渲染为特殊 HTML 结构（例如时钟数字与 AM/PM 标签采用不同字号/颜色）、要求无论在什么系统环境中字符输出都 100% 绝对一致、或者在高性能高频刷新的 Canvas / WebGL 界面中。