格式化时间显示：使用三元运算符优化 JavaScript 代码

本文旨在提供一种更简洁高效的方法，利用 JavaScript 中的三元条件运算符来格式化时间显示，避免冗长的 `if` 语句，使代码更易于阅读和维护。我们将探讨如何使用三元运算符来处理小时、分钟和秒的格式化，确保始终以 `HH:MM:SS` 的形式显示时间。

在 Web 开发中，经常需要将时间信息以特定的格式显示在页面上。例如，为了保证时间显示的统一性，我们通常希望将小时、分钟和秒都显示为两位数，即使它们的值小于 10。传统的做法是使用 if 语句来判断是否需要在数字前面补 0，但这种方法在处理多个时间单位时会变得冗长且难以维护。

使用三元运算符进行时间格式化

三元运算符 condition ? exprIfTrue : exprIfFalse 提供了一种更简洁的方式来实现条件判断。我们可以利用它来判断时间单位是否小于 10，如果小于 10，则在前面补 0，否则直接使用该时间单位的值。

以下代码展示了如何使用三元运算符来格式化小时和分钟：

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

let hr = 9;
let min = 7;
let timer = document.getElementById("timer"); // 假设HTML中有一个id为"timer"的元素
timer.innerHTML = (hr < 10 ? '0' : '') + hr + ':' + (min < 10 ? '0' : '') + min;

这段代码首先定义了 hr 和 min 变量，分别表示小时和分钟。然后，它使用三元运算符来判断 hr 和 min 是否小于 10。如果 hr 小于 10，则添加 ‘0’，否则添加空字符串 ”。同样的操作也应用于 min。最后，将格式化后的时间和分钟连接起来，并将其设置为 timer 元素的 innerHTML。

扩展到秒

我们可以很容易地将这种方法扩展到秒。假设我们有一个 sec 变量表示秒，我们可以使用以下代码来格式化时间：

let hr = 9;
let min = 7;
let sec = 3;
let timer = document.getElementById("timer");
timer.innerHTML = (hr < 10 ? '0' : '') + hr + ':' + (min < 10 ? '0' : '') + min + ':' + (sec < 10 ? '0' : '') + sec;

这段代码与前面的例子类似，只是增加了一个对 sec 的格式化。

封装成函数

为了提高代码的可重用性，我们可以将时间格式化的逻辑封装成一个函数：

function formatTime(hr, min, sec) {
let formattedHr = (hr < 10 ? '0' : '') + hr;
let formattedMin = (min < 10 ? '0' : '') + min;
let formattedSec = (sec < 10 ? '0' : '') + sec;
return formattedHr + ':' + formattedMin + ':' + formattedSec;
}
let hr = 9;
let min = 7;
let sec = 3;
let timer = document.getElementById("timer");
timer.innerHTML = formatTime(hr, min, sec);

这个 formatTime 函数接收小时、分钟和秒作为参数，并返回格式化后的时间字符串。

总结与注意事项

使用三元运算符可以显著简化时间格式化的代码，使其更易于阅读和维护。与使用多个 if 语句相比，这种方法更加简洁高效。

注意事项：

• 确保理解三元运算符的语法和语义。
• 根据实际需求选择合适的格式化方式。
• 在处理复杂的时间格式时，可以考虑使用专门的时间格式化库，例如 Moment.js 或 date-fns。

通过本文的介绍，相信你已经掌握了使用三元运算符来格式化时间的技巧。在实际开发中，灵活运用这些技巧可以提高代码的质量和效率。