Learn how to Evaluate Time Strings in HH:MM:SS Format with JavaScript

Introduction

Time is woven into each a part of our lives, each figuratively and actually. Due to this, we now have to cope with it in programming usually. It may tackle many codecs, one of the vital widespread being HH:MM:SS. This Byte will assist us firgure out how one can examine time strings in JavaScript, offering you with a sensible understanding of how it may be accomplished.

String-Formatted Time

Time is commonly represented as a string within the HH:MM:SS format since that is how we see it in the actual world as this format is pretty common and simple to know. As an illustration, “13:45:30” represents 1:45:30 PM in 24-hour format. It is price noting, nonetheless, that JavaScript would not inherently perceive this format. To the language, it is only a string like every other. So, how can we make JavaScript perceive and examine these time strings? Let’s discover this.

Why Evaluate Time Strings?

There are quite a few eventualities the place evaluating time in string format might be helpful. Possibly you are constructing a time monitoring software, or maybe you are engaged on a scheduling system that should examine occasions to find out the order of occasions. Evaluating time strings in JavaScript is a standard and mandatory activity in lots of programming initiatives.

Learn how to Evaluate Time Strings

There are a number of methods to match time strings in JavaScript. The 2 commonest strategies contain utilizing the Date object or string comparability strategies. Let’s delve into each these strategies.

Utilizing the Date Object for Comparability

The Date object in JavaScript is a built-in object that gives strategies for working with dates and occasions. You should use it to create a Date object from a time string after which examine these objects.

This is an instance:

let time1 = new Date(`1970-01-01T${"13:45:30"}Z`);
let time2 = new Date(`1970-01-01T${"14:45:30"}Z`);

if (time1 > time2) {
    console.log("Time1 is later");
} else if (time1 < time2) {
    console.log("Time2 is later");
} else {
    console.log("Each occasions are equal");
}

On this instance, we’re creating Date objects from our time strings. We’re utilizing a hard and fast date (January 1, 1970) and appending our time strings to it. The precise date used would not actually matter, so long as they’re the identical, since we actually solely care concerning the time.

The ‘Z’ on the finish specifies that that is UTC. Then we merely examine the Date objects utilizing JavaScript’s comparability operators.

Observe: When evaluating Date objects, JavaScript converts the dates to their numeric illustration (the variety of milliseconds since January 1, 1970) and compares these numbers.

This methodology works properly for many use instances. Nonetheless, it could be overkill when you’re simply evaluating occasions on the identical day and needn’t account for dates or time zones. In that case, you would possibly wish to think about using string comparability strategies, which we’ll cowl within the subsequent part of this Byte.

Evaluating Time Strings utilizing String Strategies

In JavaScript, one other solution to examine time strings is by utilizing string strategies. This strategy includes splitting the time string into hours, minutes, and seconds, after which evaluating these elements. Let’s examine how we will do that.

let time1 = "10:30:00";
let time2 = "11:30:00";

let time1Parts = time1.break up(":");
let time2Parts = time2.break up(":");

if (time1Parts[0] > time2Parts[0]) {
    console.log(time1 + " is larger than " + time2);
} else if (time1Parts[0] < time2Parts[0]) {
    console.log(time1 + " is lower than " + time2);
} else {
    // Hours are equal, examine minutes
    if (time1Parts[1] > time2Parts[1]) {
        console.log(time1 + " is larger than " + time2);
    } else if (time1Parts[1] < time2Parts[1]) {
        console.log(time1 + " is lower than " + time2);
    } else {
        // Minutes are equal, examine seconds
        console.log(time1Parts[2] > time2Parts[2] ? time1 + " is larger than " + time2 : time1 + " is lower than " + time2);
    }
}

Within the instance above, the time strings are break up into arrays utilizing the break up methodology. Then, every a part of the time (hours, minutes, and seconds) is in contrast.

However do we actually want all of those if statements? Really, no. We will use primary string comparability on the total time string. It’s because the string comparisons abide by the order of the numbers, and thus (utilizing the identical instance as above) the string “11:30:00” is “better than” the opposite string, “10:30:00”:

let time1 = "10:30:00";
let time2 = "11:30:00";

if (time1 > time2) {
    console.log(time1 + " is larger than " + time2);
} else {
    console.log(time1 + " is lower than " + time2);
}

Potential Issues

Simply be awaare that these strategies aren’t with out their potential issues. Think about you probably have time strings that aren’t within the appropriate format or in the event that they comprise invalid values (like “25” for hours), the comparability will give incorrect outcomes.

This additionally methodology would not deal with the comparability of time strings in numerous codecs. Evaluating a time string in ‘HH:MM:SS’ format with a time string in ‘HH:MM’ format will trigger issues.

Evaluating Time Strings in Totally different Codecs

So, then how can we examine time strings in numerous codecs? Properly, we’ll should convert the time strings to a standard format earlier than evaluating them. The handbook comparability would appear to be this:

let time1 = "10:30";
let time2 = "11:30:00";

let time1Parts = time1.break up(":");
let time2Parts = time2.break up(":");

// convert time1 to 'HH:MM:SS' format
if (time1Parts.size == 2) {
    time1Parts.push("00");
}

if (time1Parts[0] > time2Parts[0]) {
    console.log(time1 + " is larger than " + time2);
} else if (time1Parts[0] < time2Parts[0]) {
    console.log(time1 + " is lower than " + time2);
} else {
    // hours are equal, examine minutes
    if (time1Parts[1] > time2Parts[1]) {
        console.log(time1 + " is larger than " + time2);
    } else if (time1Parts[1] < time2Parts[1]) {
        console.log(time1 + " is lower than " + time2);
    } else {
        // minutes are equal, examine seconds
        console.log(time1Parts[2] > time2Parts[2] ? time1 + " is larger than " + time2 : time1 + " is lower than " + time2);
    }
}

To make use of the Date object, you’d must do one thing related with a view to get it to parse the time, or you may break up out the time elements and set these on the Date object accordingly.

Conclusion

Evaluating time strings in JavaScript may be achieved utilizing totally different strategies, every with its personal execs and cons. Whereas the Date object supplies a greater resolution, utilizing string strategies could be a easy strategy as properly, assuming the occasions are in the identical format and comprise legitimate values.

On this Byte, we have lined how one can examine time strings utilizing string strategies, potential issues you would possibly encounter, and how one can examine time strings in numerous codecs.