本文旨在提供一种更简洁高效的方法，利用 JavaScript 的条件运算符（三元运算符）来格式化时间显示，避免使用大量 `if` 语句，确保时间始终以 "09:07" 格式呈现，即使小时、分钟或秒数小于 10。通过本文，你将学会如何使用三元运算符优化代码，提高可读性和维护性。
在 JavaScript 中，当需要在网页上显示时间，并希望确保时间格式始终保持一致（例如，"09:07" 而不是 "9:7"）时，通常需要对小时、分钟和秒数进行格式化。一种常见的做法是使用 if 语句来判断数字是否小于 10，并在前面添加 "0"。然而，当需要处理多个时间单位时，这种方法可能会导致代码冗长且难以维护。
例如，以下代码使用 if 语句来格式化小时和分钟：
let timer = document.getElementById('timer'); // 假设 timer 是一个 标签
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 是一个 标签
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 是一个 标签
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 函数用于每秒更新时间显示。
总结
使用条件运算符可以有效地简化时间格式化的代码，使其更具可读性和可维护性。相比于使用多个 if 语句，条件运算符提供了一种更简洁、更优雅的解决方案。在处理需要格式化多个值的类似情况时，条件运算符是一个非常有用的工具。
注意事项:
- 确保你理解条件运算符的语法和工作原理。
- 在复杂的逻辑中使用条件运算符时，要小心避免代码过于复杂而难以理解。
- 考虑使用更具描述性的变量名，以提高代码的可读性。
