JavaScript 中高效格式化时间显示：告别繁琐的 if 语句-html教程-PHP中文网

JavaScript 中高效格式化时间显示：告别繁琐的 if 语句

心靈之曲

发布： 2025-10-18 10:44:26

原创

401人浏览过

javascript 中高效格式化时间显示：告别繁琐的 if 语句

本文旨在提供一种更简洁、高效的方法，用于在 JavaScript 中格式化时间显示，避免使用大量的 if 语句。通过使用三元条件运算符，可以优雅地处理小时、分钟和秒的补零问题，使时间显示始终保持统一的格式，例如 "09:07" 而不是 "9:7"。

在 JavaScript 中，经常需要将时间信息显示在网页上。为了保证时间的显示格式统一，例如始终显示两位数的小时、分钟和秒，通常需要对个位数的小时、分钟和秒进行补零操作。传统的方法是使用大量的 if 语句来判断是否需要补零，但这会使代码变得冗长且难以维护。本文将介绍一种使用三元条件运算符的更简洁、高效的方法。

使用三元条件运算符进行补零

三元条件运算符（condition ? expr1 : expr2）提供了一种简洁的表达条件逻辑的方式。当 condition 为真时，返回 expr1 的值；否则，返回 expr2 的值。我们可以利用这个特性来判断小时、分钟和秒是否小于 10，如果小于 10，则在前面补零。

假设我们有小时 hr、分钟 min 和秒 sec 三个变量，并且想要将它们格式化为 HH:MM:SS 的形式。可以使用以下代码：

立即学习“Java免费学习笔记（深入）”；

MagicStudio

图片处理必备效率神器！为你的图片提供神奇魔法

102

查看详情

let hr = 9;
let min = 7;
let sec = 3;

let formattedTime = (hr < 10 ? '0' : '') + hr + ':' + (min < 10 ? '0' : '') + min + ':' + (sec < 10 ? '0' : '') + sec;

console.log(formattedTime); // 输出 "09:07:03"

// 如果要更新HTML中的段落元素，可以这样：
let timer = document.getElementById('timer'); // 假设HTML中有一个id为"timer"的元素
timer.innerHTML = formattedTime;

登录后复制

这段代码首先定义了小时、分钟和秒三个变量。然后，使用三元条件运算符来判断每个变量是否小于 10。如果小于 10，则在变量前面添加一个 "0"；否则，添加一个空字符串。最后，将格式化后的字符串拼接起来，得到最终的时间字符串。

代码解析

(hr < 10 ? '0' : '')：如果 hr 小于 10，则返回 "0"，否则返回 "" (空字符串)。
+ hr：将小时的值连接到前面的字符串。
:：添加冒号作为分隔符。
(min < 10 ? '0' : '')：如果 min 小于 10，则返回 "0"，否则返回 "" (空字符串)。
+ min：将分钟的值连接到前面的字符串。
:：添加冒号作为分隔符。
(sec < 10 ? '0' : '')：如果 sec 小于 10，则返回 "0"，否则返回 "" (空字符串)。
+ sec：将秒的值连接到前面的字符串。

示例

以下是一个完整的示例，展示了如何使用三元条件运算符来格式化时间并将其显示在网页上：

<!DOCTYPE html>
<html>
<head>
  <title>时间格式化示例</title>
</head>
<body>
  <p id="timer"></p>

  <script>
    function updateTime() {
      let now = new Date();
      let hr = now.getHours();
      let min = now.getMinutes();
      let sec = now.getSeconds();

      let formattedTime = (hr < 10 ? '0' : '') + hr + ':' + (min < 10 ? '0' : '') + min + ':' + (sec < 10 ? '0' : '') + sec;

      let timer = document.getElementById('timer');
      timer.innerHTML = formattedTime;
    }

    // 每秒更新一次时间
    setInterval(updateTime, 1000);
  </script>
</body>
</html>

登录后复制

在这个示例中，updateTime 函数获取当前时间，并使用三元条件运算符将其格式化为 HH:MM:SS 的形式。然后，将格式化后的时间字符串更新到 id 为 "timer" 的段落元素中。setInterval 函数每秒调用一次 updateTime 函数，从而实现实时更新时间显示。