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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-18

浏览次数：次

返回列表

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

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

在 J*aScript 中，当需要在网页上显示时间，并希望确保时间格式始终保持一致（例如，"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 语句来处理不同的情况，如果需要添加秒数，代码量将会显著增加。

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

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

其语法如下：

condition ? expression_if_true : expression_if_false;

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

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

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

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

在这个例子中，hr

通过将这两个条件运算符与小时和分钟值连接起来，可以确保时间始终以 "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 函数用于每秒更新时间显示。