JavaScript怎么判断当前时间并输出“早上”等中文时段

一、获取当前系统小时数：Date 与 getHours()

JavaScript 内置的 Date 对象提供了丰富的日期与时间操作方法。判断中文时段通常只需关注“小时”这一维度，因此核心 API 是 Date.prototype.getHours()。

// 实例化当前时间并取得本地小时数
const now = new Date();
const currentHour = now.getHours();

console.log('当前小时数（0~23）：', currentHour);

在实际使用中，需要明确以下两个关键特征：

• 返回值范围为 0 到 23 的整数：午夜 00:00 至 00:59 返回 0，深夜 23:00 至 23:59 返回 23。它不会返回 24。
• 基于客户端本地时区：getHours() 依据运行环境（用户的操作系统或浏览器）设置的时区进行解析。如果用户身处东八区，返回的就是北京时间对应的小时；若需要跨地域统一计算，则应考虑 getUTCHours() 或服务端统一时间戳。

二、合理划分中文时段与确定区间边界

日常生活中的时间段划分并没有绝对单一的强制规范，但在软件界面设计中，通常遵循人们普遍的生活与作息作息习惯。中文环境下最常见的时段标准包含六个阶段：凌晨、早上、上午、中午、下午与晚上。

三、基础实现：使用多分支条件（if...else if）

掌握区间定义后，最直观的编程实现是编写一个纯函数，接收一个 Date 对象或默认使用当前时间，然后通过 if...else if 阶梯结构完成匹配。

1. 完整封装函数

利用条件分支自上而下执行的短路特性，若前一个 hour < 6 不成立，进入下一分支时必然已经满足 hour >= 6。因此后续条件只需判断右边界，无需重复书写 hour >= 6 && hour < 9，代码更加清晰紧凑。

/**
 * 根据指定时间或当前系统时间返回中文时段
 * @param {Date} [date=new Date()] 可选的日期对象，默认为当前时间
 * @returns {string} 中文时段名称（例如："早上"）
 */
function getTimePeriod(date = new Date()) {
  const hour = date.getHours();

  if (hour < 6) {
    return '凌晨';
  } else if (hour < 9) {
    return '早上';
  } else if (hour < 12) {
    return '上午';
  } else if (hour < 14) {
    return '中午';
  } else if (hour < 18) {
    return '下午';
  } else {
    return '晚上';
  }
}

// 运行测试
console.log('当前时段：', getTimePeriod());

2. 结合界面 DOM 输出问候语

在实际网页中，获取到中文时段文本后，可以拼接用户名或问候后缀，直接渲染到网页的指定元素中。

// 假设 HTML 中存在 <h2 id="greeting"></h2>
function renderGreeting(username = '访客') {
  const period = getTimePeriod();
  const greetingElement = document.getElementById('greeting');
  
  if (greetingElement) {
    greetingElement.textContent = `${username}，${period}好！`;
  }
}

// 页面加载完成后触发渲染
window.addEventListener('DOMContentLoaded', () => {
  renderGreeting('张三');
});

四、进阶方案：使用规则数组查表（数据驱动）

在大型前端项目或需要支持后台动态配置时段的系统中，硬编码多层 if...else 分支会增加后期的修改与测试成本。采用“数据驱动”的思想，将时段阈值和名称抽离为配置数组，通过 Array.prototype.find() 匹配，是更为优雅的做法。

// 定义时段映射规则表（从小到大排列）
const TIME_PERIOD_RULES = [
  { maxHour: 6, label: '凌晨' },
  { maxHour: 9, label: '早上' },
  { maxHour: 12, label: '上午' },
  { maxHour: 14, label: '中午' },
  { maxHour: 18, label: '下午' },
  { maxHour: 24, label: '晚上' }
];

/**
 * 查表法获取时段
 * @param {Date} [date=new Date()]
 * @returns {string}
 */
function getTimePeriodByTable(date = new Date()) {
  const hour = date.getHours();
  // 查找第一个满足 hour < maxHour 的规则项
  const match = TIME_PERIOD_RULES.find(rule => hour < rule.maxHour);
  return match ? match.label : '晚上';
}

// 示例调用
console.log(getTimePeriodByTable());

这种模式的优势在于数据与逻辑解耦：若产品需求调整，要求在 17:00 到 19:00 新增一个“傍晚”时段，只需在配置数组中插入 { maxHour: 19, label: '傍晚' }，无需修改核心检索逻辑。

五、工程实践中的注意事项与常见细节

在真实业务场景中，除了正确的逻辑判断外，还需要注意以下几个容易被忽略的技术细节：

1. 单页应用（SPA）长驻不刷新的时效问题：
   如果用户在上午 11:50 打开页面并常驻后台，到下午 14:00 时界面若不重新渲染，仍会显示“上午好”。针对此类场景，应配合 setInterval 定时器（例如每分钟检测一次）或利用 setTimeout 精确计算距离下一个时段临界点的剩余毫秒数，动态触发问候语的重绘更新。
2. 客户端本地时间的准确性：
   new Date() 取自用户本机的操作系统时钟。如果用户的电脑系统时间被手动调错，计算出的时段将与现实不符。对于严谨的企业内网应用或交易系统，推荐在页面初始化时从服务端响应头（Date 头）或 API 获取标准服务器时间戳，并在本地通过时钟差值换算真实时间。
3. 多语言与国际化（i18n）支持：
   如果项目需要面向多语言用户，不建议将“早上”、“中午”等中文直接混写在业务函数内。可让函数返回状态键名（如 'morning'、'afternoon'），再由多语言插件（如 i18next）翻译为目标语种文案。

总结

利用 JavaScript 判断当前时间并输出中文时段的核心在于：使用 new Date().getHours() 获取 0 到 23 的整型小时数，并依据“左闭右开”的边界原则进行分段。小型轻量脚本可直接采用 if...else if 短路判断；中大型或配置敏感型系统则推荐采用规则数组查表法，以保持代码的高内聚、低耦合与易维护性。