使用条件运算符优化时间显示格式：JavaScript 教程-html教程-PHP中文网

使用条件运算符优化时间显示格式：JavaScript 教程

霞舞

发布： 2025-10-18 08:23:01

原创

542人浏览过

使用条件运算符优化时间显示格式：javascript 教程

本文旨在提供一种更简洁高效的方法，利用 JavaScript 的条件运算符（三元运算符）来格式化时间显示，避免使用大量 `if` 语句，确保时间始终以 "09:07" 格式呈现，即使小时、分钟或秒数小于 10。通过本文，你将学会如何使用三元运算符优化代码，提高可读性和维护性。

在 JavaScript 中，当需要在网页上显示时间，并希望确保时间格式始终保持一致（例如，"09:07" 而不是 "9:7"）时，通常需要对小时、分钟和秒数进行格式化。一种常见的做法是使用 if 语句来判断数字是否小于 10，并在前面添加 "0"。然而，当需要处理多个时间单位时，这种方法可能会导致代码冗长且难以维护。

例如，以下代码使用 if 语句来格式化小时和分钟：

let timer = document.getElementById('timer'); // 假设 timer 是一个 <p> 标签
let hr = 9;
let min = 7;

if (hr < 10) {
    timer.innerHTML = "0" + hr + ":" + min;
}
if (min < 10) {
    timer.innerHTML = hr + ":" + "0" + min;
}

登录后复制

上述代码存在的问题是，它需要多个 if 语句来处理不同的情况，如果需要添加秒数，代码量将会显著增加。

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

使用条件运算符 (三元运算符)

一种更简洁、更高效的方法是使用条件运算符（也称为三元运算符）。条件运算符允许你在一行代码中编写简单的 if-else 语句。

其语法如下：

condition ? expression_if_true : expression_if_false;

登录后复制

例如，以下代码使用条件运算符来格式化小时和分钟：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

let timer = document.getElementById('timer'); // 假设 timer 是一个 <p> 标签
let hr = 9;
let min = 7;

timer.innerHTML = (hr < 10 ? '0' : '') + hr + ':' + (min < 10 ? '0' : '') + min;

登录后复制

在这个例子中，hr < 10 ? '0' : '' 的含义是：如果 hr 小于 10，则返回字符串 "0"，否则返回空字符串 ""。同样，min < 10 ? '0' : '' 的含义是：如果 min 小于 10，则返回字符串 "0"，否则返回空字符串 ""。

通过将这两个条件运算符与小时和分钟值连接起来，可以确保时间始终以 "09:07" 格式显示。

完整示例

以下是一个完整的示例，包括小时、分钟和秒数的格式化：

let timer = document.getElementById('timer'); // 假设 timer 是一个 <p> 标签

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;

    timer.innerHTML = formattedTime;
}

// 每秒更新时间
setInterval(updateTime, 1000);

登录后复制

这段代码首先获取当前时间的小时、分钟和秒数。然后，它使用条件运算符来格式化这些值，确保它们始终以两位数显示。最后，它将格式化的时间字符串设置到 timer 元素的 innerHTML 属性中。 setInterval 函数用于每秒更新时间显示。