Formatting mm:ss to string with Javascript

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;







up vote
3
down vote

favorite












I have a function that takes a time of minutes and seconds, and converts it to a string in the following way: '0:30' would become '30 Seconds', '1:30' would become '1 minute 30 seconds', '2:01' would become '2 minutes 1 second', etc. My function works fine, but I'm wondering if there are areas for improvement.



function formatTime(formattedTime) 
let minStr, secStr;
let minNum = formattedTime.split(':')[0];
let secNum = formattedTime.split(':')[1];
if (minNum === '1')
minStr = 'minute';
else
minStr = 'minutes';

if (secNum === '01')
secStr = 'second';
secNum = '1';
else
secStr = 'seconds';

if (minNum === '0')
return `$secNum $secStr`;
else if (secNum === '00')
return `$minNum $minStr`;
else
return `$minNum $minStr $secNum $secStr`;








share|improve this question

















  • 2




    minNum is easily confused with "minimum number", why not simply write minutes instead?
    – le_m
    Jan 5 at 21:15










  • @le_m I felt it would be too repetitive to assign a variable to to it's own name as a string i.e. minutes = 'minutes'
    – Aaron Goldsmith
    Jan 6 at 20:21







  • 1




    @AaronGoldsmith "Too repetitive" is arguably a synonym of "easily understood", which is not a bad thing; code is not literary prose.
    – msanford
    Jan 8 at 15:12

















up vote
3
down vote

favorite












I have a function that takes a time of minutes and seconds, and converts it to a string in the following way: '0:30' would become '30 Seconds', '1:30' would become '1 minute 30 seconds', '2:01' would become '2 minutes 1 second', etc. My function works fine, but I'm wondering if there are areas for improvement.



function formatTime(formattedTime) 
let minStr, secStr;
let minNum = formattedTime.split(':')[0];
let secNum = formattedTime.split(':')[1];
if (minNum === '1')
minStr = 'minute';
else
minStr = 'minutes';

if (secNum === '01')
secStr = 'second';
secNum = '1';
else
secStr = 'seconds';

if (minNum === '0')
return `$secNum $secStr`;
else if (secNum === '00')
return `$minNum $minStr`;
else
return `$minNum $minStr $secNum $secStr`;








share|improve this question

















  • 2




    minNum is easily confused with "minimum number", why not simply write minutes instead?
    – le_m
    Jan 5 at 21:15










  • @le_m I felt it would be too repetitive to assign a variable to to it's own name as a string i.e. minutes = 'minutes'
    – Aaron Goldsmith
    Jan 6 at 20:21







  • 1




    @AaronGoldsmith "Too repetitive" is arguably a synonym of "easily understood", which is not a bad thing; code is not literary prose.
    – msanford
    Jan 8 at 15:12













up vote
3
down vote

favorite









up vote
3
down vote

favorite











I have a function that takes a time of minutes and seconds, and converts it to a string in the following way: '0:30' would become '30 Seconds', '1:30' would become '1 minute 30 seconds', '2:01' would become '2 minutes 1 second', etc. My function works fine, but I'm wondering if there are areas for improvement.



function formatTime(formattedTime) 
let minStr, secStr;
let minNum = formattedTime.split(':')[0];
let secNum = formattedTime.split(':')[1];
if (minNum === '1')
minStr = 'minute';
else
minStr = 'minutes';

if (secNum === '01')
secStr = 'second';
secNum = '1';
else
secStr = 'seconds';

if (minNum === '0')
return `$secNum $secStr`;
else if (secNum === '00')
return `$minNum $minStr`;
else
return `$minNum $minStr $secNum $secStr`;








share|improve this question













I have a function that takes a time of minutes and seconds, and converts it to a string in the following way: '0:30' would become '30 Seconds', '1:30' would become '1 minute 30 seconds', '2:01' would become '2 minutes 1 second', etc. My function works fine, but I'm wondering if there are areas for improvement.



function formatTime(formattedTime) 
let minStr, secStr;
let minNum = formattedTime.split(':')[0];
let secNum = formattedTime.split(':')[1];
if (minNum === '1')
minStr = 'minute';
else
minStr = 'minutes';

if (secNum === '01')
secStr = 'second';
secNum = '1';
else
secStr = 'seconds';

if (minNum === '0')
return `$secNum $secStr`;
else if (secNum === '00')
return `$minNum $minStr`;
else
return `$minNum $minStr $secNum $secStr`;










share|improve this question












share|improve this question




share|improve this question








edited Jan 6 at 20:30
























asked Jan 5 at 19:59









Aaron Goldsmith

12510




12510







  • 2




    minNum is easily confused with "minimum number", why not simply write minutes instead?
    – le_m
    Jan 5 at 21:15










  • @le_m I felt it would be too repetitive to assign a variable to to it's own name as a string i.e. minutes = 'minutes'
    – Aaron Goldsmith
    Jan 6 at 20:21







  • 1




    @AaronGoldsmith "Too repetitive" is arguably a synonym of "easily understood", which is not a bad thing; code is not literary prose.
    – msanford
    Jan 8 at 15:12













  • 2




    minNum is easily confused with "minimum number", why not simply write minutes instead?
    – le_m
    Jan 5 at 21:15










  • @le_m I felt it would be too repetitive to assign a variable to to it's own name as a string i.e. minutes = 'minutes'
    – Aaron Goldsmith
    Jan 6 at 20:21







  • 1




    @AaronGoldsmith "Too repetitive" is arguably a synonym of "easily understood", which is not a bad thing; code is not literary prose.
    – msanford
    Jan 8 at 15:12








2




2




minNum is easily confused with "minimum number", why not simply write minutes instead?
– le_m
Jan 5 at 21:15




minNum is easily confused with "minimum number", why not simply write minutes instead?
– le_m
Jan 5 at 21:15












@le_m I felt it would be too repetitive to assign a variable to to it's own name as a string i.e. minutes = 'minutes'
– Aaron Goldsmith
Jan 6 at 20:21





@le_m I felt it would be too repetitive to assign a variable to to it's own name as a string i.e. minutes = 'minutes'
– Aaron Goldsmith
Jan 6 at 20:21





1




1




@AaronGoldsmith "Too repetitive" is arguably a synonym of "easily understood", which is not a bad thing; code is not literary prose.
– msanford
Jan 8 at 15:12





@AaronGoldsmith "Too repetitive" is arguably a synonym of "easily understood", which is not a bad thing; code is not literary prose.
– msanford
Jan 8 at 15:12











1 Answer
1






active

oldest

votes

















up vote
3
down vote



accepted










I made a few changes to the function that I think improve readability. By using parseInt() on the seconds, I eliminated the need to later set the secNum from 01 to 1. Since we no longer need to change that, the minStr and secStr can be set with a ternary operator. I also used destructuring to clean up the splitting of the time.



To make it less error prone, you'd also want to make sure to do some sanity checks on the input, as mentioned in the comments.



All told, it ended up looking like this:






// Tests
console.log(formatTime('1:00'))
console.log(formatTime('1:01'))
console.log(formatTime('1:30'))
console.log(formatTime('0:30'))
console.log(formatTime('bad data'))

function formatTime(formattedTime) ;

// Make sure we're getting the data in correct
if(!match) return false;

// Get the correct minutes and seconds strings
let minStr = (minNum === '1') ? 'minute' : 'minutes'
let secStr = (parseInt(secNum) === 1) ? 'second' : 'seconds'

// Return the formatted time
if (parseInt(minNum) === 0)
return `$secNum $secStr`;
else if (parseInt(secNum) === 0)
return `$minNum $minStr`;
else
return `$minNum $minStr $parseInt(secNum) $secStr`;






This is making use of some ES6 additions, so if you want good browser support you'll need to make sure to run this through Babel.






share|improve this answer



















  • 3




    damn, i was gonna write an answer but i got caught up in work stuff.. the only thing I was gonna say that you didn't mention is to sanitize the input.. if(!formattedTime.match(/d+:d+/)) return false;
    – Occam's Razor
    Jan 5 at 21:03






  • 2




    @le_m Good point on the extraneous declaration for minStr and secStr, updated!
    – Matthew Johnson
    Jan 5 at 21:15






  • 2




    beware of using parseInt() without passing the radix.... "If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet."
    – Sam Onela
    Jan 5 at 22:29







  • 2




    Looks good. Just a couple of questions: why use let instead of const? why parseInt the seconds but not the minutes?
    – tokland
    Jan 6 at 0:31







  • 1




    @le_m I thought I removed that redundancy, but apparently not. Stripped that out.
    – Matthew Johnson
    Jan 8 at 15:06










Your Answer




StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);








 

draft saved


draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f184390%2fformatting-mmss-to-string-with-javascript%23new-answer', 'question_page');

);

Post as a guest






























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
3
down vote



accepted










I made a few changes to the function that I think improve readability. By using parseInt() on the seconds, I eliminated the need to later set the secNum from 01 to 1. Since we no longer need to change that, the minStr and secStr can be set with a ternary operator. I also used destructuring to clean up the splitting of the time.



To make it less error prone, you'd also want to make sure to do some sanity checks on the input, as mentioned in the comments.



All told, it ended up looking like this:






// Tests
console.log(formatTime('1:00'))
console.log(formatTime('1:01'))
console.log(formatTime('1:30'))
console.log(formatTime('0:30'))
console.log(formatTime('bad data'))

function formatTime(formattedTime) ;

// Make sure we're getting the data in correct
if(!match) return false;

// Get the correct minutes and seconds strings
let minStr = (minNum === '1') ? 'minute' : 'minutes'
let secStr = (parseInt(secNum) === 1) ? 'second' : 'seconds'

// Return the formatted time
if (parseInt(minNum) === 0)
return `$secNum $secStr`;
else if (parseInt(secNum) === 0)
return `$minNum $minStr`;
else
return `$minNum $minStr $parseInt(secNum) $secStr`;






This is making use of some ES6 additions, so if you want good browser support you'll need to make sure to run this through Babel.






share|improve this answer



















  • 3




    damn, i was gonna write an answer but i got caught up in work stuff.. the only thing I was gonna say that you didn't mention is to sanitize the input.. if(!formattedTime.match(/d+:d+/)) return false;
    – Occam's Razor
    Jan 5 at 21:03






  • 2




    @le_m Good point on the extraneous declaration for minStr and secStr, updated!
    – Matthew Johnson
    Jan 5 at 21:15






  • 2




    beware of using parseInt() without passing the radix.... "If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet."
    – Sam Onela
    Jan 5 at 22:29







  • 2




    Looks good. Just a couple of questions: why use let instead of const? why parseInt the seconds but not the minutes?
    – tokland
    Jan 6 at 0:31







  • 1




    @le_m I thought I removed that redundancy, but apparently not. Stripped that out.
    – Matthew Johnson
    Jan 8 at 15:06














up vote
3
down vote



accepted










I made a few changes to the function that I think improve readability. By using parseInt() on the seconds, I eliminated the need to later set the secNum from 01 to 1. Since we no longer need to change that, the minStr and secStr can be set with a ternary operator. I also used destructuring to clean up the splitting of the time.



To make it less error prone, you'd also want to make sure to do some sanity checks on the input, as mentioned in the comments.



All told, it ended up looking like this:






// Tests
console.log(formatTime('1:00'))
console.log(formatTime('1:01'))
console.log(formatTime('1:30'))
console.log(formatTime('0:30'))
console.log(formatTime('bad data'))

function formatTime(formattedTime) ;

// Make sure we're getting the data in correct
if(!match) return false;

// Get the correct minutes and seconds strings
let minStr = (minNum === '1') ? 'minute' : 'minutes'
let secStr = (parseInt(secNum) === 1) ? 'second' : 'seconds'

// Return the formatted time
if (parseInt(minNum) === 0)
return `$secNum $secStr`;
else if (parseInt(secNum) === 0)
return `$minNum $minStr`;
else
return `$minNum $minStr $parseInt(secNum) $secStr`;






This is making use of some ES6 additions, so if you want good browser support you'll need to make sure to run this through Babel.






share|improve this answer



















  • 3




    damn, i was gonna write an answer but i got caught up in work stuff.. the only thing I was gonna say that you didn't mention is to sanitize the input.. if(!formattedTime.match(/d+:d+/)) return false;
    – Occam's Razor
    Jan 5 at 21:03






  • 2




    @le_m Good point on the extraneous declaration for minStr and secStr, updated!
    – Matthew Johnson
    Jan 5 at 21:15






  • 2




    beware of using parseInt() without passing the radix.... "If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet."
    – Sam Onela
    Jan 5 at 22:29







  • 2




    Looks good. Just a couple of questions: why use let instead of const? why parseInt the seconds but not the minutes?
    – tokland
    Jan 6 at 0:31







  • 1




    @le_m I thought I removed that redundancy, but apparently not. Stripped that out.
    – Matthew Johnson
    Jan 8 at 15:06












up vote
3
down vote



accepted







up vote
3
down vote



accepted






I made a few changes to the function that I think improve readability. By using parseInt() on the seconds, I eliminated the need to later set the secNum from 01 to 1. Since we no longer need to change that, the minStr and secStr can be set with a ternary operator. I also used destructuring to clean up the splitting of the time.



To make it less error prone, you'd also want to make sure to do some sanity checks on the input, as mentioned in the comments.



All told, it ended up looking like this:






// Tests
console.log(formatTime('1:00'))
console.log(formatTime('1:01'))
console.log(formatTime('1:30'))
console.log(formatTime('0:30'))
console.log(formatTime('bad data'))

function formatTime(formattedTime) ;

// Make sure we're getting the data in correct
if(!match) return false;

// Get the correct minutes and seconds strings
let minStr = (minNum === '1') ? 'minute' : 'minutes'
let secStr = (parseInt(secNum) === 1) ? 'second' : 'seconds'

// Return the formatted time
if (parseInt(minNum) === 0)
return `$secNum $secStr`;
else if (parseInt(secNum) === 0)
return `$minNum $minStr`;
else
return `$minNum $minStr $parseInt(secNum) $secStr`;






This is making use of some ES6 additions, so if you want good browser support you'll need to make sure to run this through Babel.






share|improve this answer















I made a few changes to the function that I think improve readability. By using parseInt() on the seconds, I eliminated the need to later set the secNum from 01 to 1. Since we no longer need to change that, the minStr and secStr can be set with a ternary operator. I also used destructuring to clean up the splitting of the time.



To make it less error prone, you'd also want to make sure to do some sanity checks on the input, as mentioned in the comments.



All told, it ended up looking like this:






// Tests
console.log(formatTime('1:00'))
console.log(formatTime('1:01'))
console.log(formatTime('1:30'))
console.log(formatTime('0:30'))
console.log(formatTime('bad data'))

function formatTime(formattedTime) ;

// Make sure we're getting the data in correct
if(!match) return false;

// Get the correct minutes and seconds strings
let minStr = (minNum === '1') ? 'minute' : 'minutes'
let secStr = (parseInt(secNum) === 1) ? 'second' : 'seconds'

// Return the formatted time
if (parseInt(minNum) === 0)
return `$secNum $secStr`;
else if (parseInt(secNum) === 0)
return `$minNum $minStr`;
else
return `$minNum $minStr $parseInt(secNum) $secStr`;






This is making use of some ES6 additions, so if you want good browser support you'll need to make sure to run this through Babel.






// Tests
console.log(formatTime('1:00'))
console.log(formatTime('1:01'))
console.log(formatTime('1:30'))
console.log(formatTime('0:30'))
console.log(formatTime('bad data'))

function formatTime(formattedTime) ;

// Make sure we're getting the data in correct
if(!match) return false;

// Get the correct minutes and seconds strings
let minStr = (minNum === '1') ? 'minute' : 'minutes'
let secStr = (parseInt(secNum) === 1) ? 'second' : 'seconds'

// Return the formatted time
if (parseInt(minNum) === 0)
return `$secNum $secStr`;
else if (parseInt(secNum) === 0)
return `$minNum $minStr`;
else
return `$minNum $minStr $parseInt(secNum) $secStr`;






// Tests
console.log(formatTime('1:00'))
console.log(formatTime('1:01'))
console.log(formatTime('1:30'))
console.log(formatTime('0:30'))
console.log(formatTime('bad data'))

function formatTime(formattedTime) ;

// Make sure we're getting the data in correct
if(!match) return false;

// Get the correct minutes and seconds strings
let minStr = (minNum === '1') ? 'minute' : 'minutes'
let secStr = (parseInt(secNum) === 1) ? 'second' : 'seconds'

// Return the formatted time
if (parseInt(minNum) === 0)
return `$secNum $secStr`;
else if (parseInt(secNum) === 0)
return `$minNum $minStr`;
else
return `$minNum $minStr $parseInt(secNum) $secStr`;







share|improve this answer















share|improve this answer



share|improve this answer








edited Jan 9 at 2:16









Aaron Goldsmith

12510




12510











answered Jan 5 at 21:01









Matthew Johnson

222210




222210







  • 3




    damn, i was gonna write an answer but i got caught up in work stuff.. the only thing I was gonna say that you didn't mention is to sanitize the input.. if(!formattedTime.match(/d+:d+/)) return false;
    – Occam's Razor
    Jan 5 at 21:03






  • 2




    @le_m Good point on the extraneous declaration for minStr and secStr, updated!
    – Matthew Johnson
    Jan 5 at 21:15






  • 2




    beware of using parseInt() without passing the radix.... "If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet."
    – Sam Onela
    Jan 5 at 22:29







  • 2




    Looks good. Just a couple of questions: why use let instead of const? why parseInt the seconds but not the minutes?
    – tokland
    Jan 6 at 0:31







  • 1




    @le_m I thought I removed that redundancy, but apparently not. Stripped that out.
    – Matthew Johnson
    Jan 8 at 15:06












  • 3




    damn, i was gonna write an answer but i got caught up in work stuff.. the only thing I was gonna say that you didn't mention is to sanitize the input.. if(!formattedTime.match(/d+:d+/)) return false;
    – Occam's Razor
    Jan 5 at 21:03






  • 2




    @le_m Good point on the extraneous declaration for minStr and secStr, updated!
    – Matthew Johnson
    Jan 5 at 21:15






  • 2




    beware of using parseInt() without passing the radix.... "If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet."
    – Sam Onela
    Jan 5 at 22:29







  • 2




    Looks good. Just a couple of questions: why use let instead of const? why parseInt the seconds but not the minutes?
    – tokland
    Jan 6 at 0:31







  • 1




    @le_m I thought I removed that redundancy, but apparently not. Stripped that out.
    – Matthew Johnson
    Jan 8 at 15:06







3




3




damn, i was gonna write an answer but i got caught up in work stuff.. the only thing I was gonna say that you didn't mention is to sanitize the input.. if(!formattedTime.match(/d+:d+/)) return false;
– Occam's Razor
Jan 5 at 21:03




damn, i was gonna write an answer but i got caught up in work stuff.. the only thing I was gonna say that you didn't mention is to sanitize the input.. if(!formattedTime.match(/d+:d+/)) return false;
– Occam's Razor
Jan 5 at 21:03




2




2




@le_m Good point on the extraneous declaration for minStr and secStr, updated!
– Matthew Johnson
Jan 5 at 21:15




@le_m Good point on the extraneous declaration for minStr and secStr, updated!
– Matthew Johnson
Jan 5 at 21:15




2




2




beware of using parseInt() without passing the radix.... "If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet."
– Sam Onela
Jan 5 at 22:29





beware of using parseInt() without passing the radix.... "If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet."
– Sam Onela
Jan 5 at 22:29





2




2




Looks good. Just a couple of questions: why use let instead of const? why parseInt the seconds but not the minutes?
– tokland
Jan 6 at 0:31





Looks good. Just a couple of questions: why use let instead of const? why parseInt the seconds but not the minutes?
– tokland
Jan 6 at 0:31





1




1




@le_m I thought I removed that redundancy, but apparently not. Stripped that out.
– Matthew Johnson
Jan 8 at 15:06




@le_m I thought I removed that redundancy, but apparently not. Stripped that out.
– Matthew Johnson
Jan 8 at 15:06












 

draft saved


draft discarded


























 


draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f184390%2fformatting-mmss-to-string-with-javascript%23new-answer', 'question_page');

);

Post as a guest













































































Popular posts from this blog

Greedy Best First Search implementation in Rust

Function to Return a JSON Like Objects Using VBA Collections and Arrays

C++11 CLH Lock Implementation