格式化时间显示：使用三元运算符优化 JavaScript 代码-html教程-PHP中文网

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

霞舞

发布： 2025-10-17 10:38:01

原创

189人浏览过

格式化时间显示：使用三元运算符优化 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 变量表示秒，我们可以使用以下代码来格式化时间：

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

查看详情

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 函数接收小时、分钟和秒作为参数，并返回格式化后的时间字符串。