javascript で数字の桁数を揃えて表示する

2023年4月21日

　例えば、経過時間を表示しようかと思ったときに、MM:SS というような表示が見やすいと思うのですが、javascript では簡単にできないようです。

  let time = 248;
  let minuets = Math.floor(time / 60);
  let seconds = time % 60;

  document.write(minuets + ':' + seconds);

　上のような javascript では、4:8 と表示されてしまいます。これだと時間表示と気づかないと思います。やはり、04:08 と表記したほうが分かりやすいと思います。

padStart メソッド

　EcmaScript の仕様改定により、0 パディングが可能となりました。文字列について、padStartメソッドを使用することで 0 パディングが可能です。

  let id = '1234';

  document.write(id.padStart(6, '0'));

　上記では、6 桁で 001234 のように表記されます。

　さて、ところが最初の例を時間表記させようとすると、エラーになります。それは、padStart メソッドは、文字列オブジェクトのメソッドだからです。

数値を文字列にする

　つまり、数値を文字列に変換しなければなりません。数値を文字列にする関数とかもあるようですが、私がよく使うのは空の文字列に連結する方法です。

  let time = 248;
  let minuets = Math.floor(time / 60);
  let seconds = time % 60;

  document.write((''+minuets).padStart(2,'0') + ':' + (''+seconds).padStart(2,'0'));

　このやり方であれば、04:08 と表示されるでしょう。