Formatting mm:ss to string with Javascript
Clash 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`;
javascript datetime formatting ecmascript-6
add a comment |Â
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`;
javascript datetime formatting ecmascript-6
2
minNum
is easily confused with "minimum number", why not simply writeminutes
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
add a comment |Â
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`;
javascript datetime formatting ecmascript-6
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`;
javascript datetime formatting ecmascript-6
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 writeminutes
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
add a comment |Â
2
minNum
is easily confused with "minimum number", why not simply writeminutes
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
add a comment |Â
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.
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 forminStr
andsecStr
, updated!
â Matthew Johnson
Jan 5 at 21:15
2
beware of usingparseInt()
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
 |Â
show 7 more comments
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.
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 forminStr
andsecStr
, updated!
â Matthew Johnson
Jan 5 at 21:15
2
beware of usingparseInt()
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
 |Â
show 7 more comments
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.
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 forminStr
andsecStr
, updated!
â Matthew Johnson
Jan 5 at 21:15
2
beware of usingparseInt()
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
 |Â
show 7 more comments
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.
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`;
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 forminStr
andsecStr
, updated!
â Matthew Johnson
Jan 5 at 21:15
2
beware of usingparseInt()
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
 |Â
show 7 more comments
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 forminStr
andsecStr
, updated!
â Matthew Johnson
Jan 5 at 21:15
2
beware of usingparseInt()
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
 |Â
show 7 more comments
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
2
minNum
is easily confused with "minimum number", why not simply writeminutes
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