JavaScript 秒を日時分秒（時間・分・秒）や hh:mm:ss に変換

JavaScript 秒を時・分・秒や hh:mm:ss に変換

作成日：2023年5月8日

与えられた秒数を時間・分・秒や日・時間・分・秒、hh:mm:ss などに変換する方法です。

例えば100000秒を「27時間46分40秒」や「1日3時間46分40秒」、「27:46:40」に変換します。

変換するには以下の値を使用します。


単位	秒	式（算出）
1分（min）	60	1 * 60
1時間（hour）	3600	60 * 60
1日（day）	86400	60 * 60 * 24

100000秒を日・時間・分・秒に変換するには、以下のように計算することができます。

// 秒数を一日（86400）で割って切り捨て
const day = Math.floor(100000 / 86400);
console.log(`${day}日`);  // 1日

// 秒数を一日（86400）で割った余りを時間（3600）で割って切り捨て
const hour = Math.floor(100000 % 86400 / 3600);
console.log(`${hour}時間`);  // 3時間

// 秒数を時間（3600）で割った余りを分（60）で割って切り捨て
const min = Math.floor(100000 % 3600 / 60);
console.log(`${min}分`);  // 46分

// 秒数を分（60）で割った余り
const sec = 100000 % 60;
console.log(`${sec}秒`);  // 40秒

`${day}日`はバッククォート（`）で文字列を囲むテンプレートリテラルです。`${変数名}` のように記述すると ${ } の中の変数が展開されます。

const day = Math.floor(100000 / 86400);
console.log(`${day}日`);  // 1日

//以下と同じこと
console.log(day + '日');  // 1日

日時分秒に変換

以下は引数に与えられた秒数を日時分秒に変換する関数の例です。

function secToDayTime(seconds) {
  const day = Math.floor(seconds / 86400);
  const hour = Math.floor(seconds % 86400 / 3600);
  const min = Math.floor(seconds % 3600 / 60);
  const sec = seconds % 60;
  let time = '';
  // day が 0 の場合は「日」は出力しない（hour や min も同様）
  if(day !== 0) {
    time = `${day}日${hour}時間${min}分${sec}秒`;
  }else if(hour !==0 ) {
    time = `${hour}時間${min}分${sec}秒`;
  }else if(min !==0) {
    time = `${min}分${sec}秒`;
  }else {
    time = `${sec}秒`;
  }
  return time;
}

console.log(secToDayTime(100000)); // 1日3時間46分40秒
console.log(secToDayTime(10000));  // 2時間46分40秒
console.log(secToDayTime(1000));   // 16分40秒
console.log(secToDayTime(100));    // 1分40秒
console.log(secToDayTime(10));     // 10秒
console.log(secToDayTime(0));      // 0秒

時分秒に変換

以下は引数に与えられた秒数を時分秒に変換する関数の例です。

function secToTime(seconds) {
  const hour = Math.floor(seconds / 3600);
  const min = Math.floor(seconds % 3600 / 60);
  const sec = seconds % 60;
  let time = '';
  if(hour !==0 ) {
    time = `${hour}時間${min}分${sec}秒`;
  }else if(min !==0) {
    time = `${min}分${sec}秒`;
  }else {
    time = `${sec}秒`;
  }
  return time;
}
console.log(secToTime(100000));  // 27時間46分40秒
console.log(secToTime(10000));   // 2時間46分40秒
console.log(secToTime(1000));    // 16分40秒
console.log(secToTime(100));     // 1分40秒
console.log(secToTime(10));      // 10秒
console.log(secToTime(0));       // 0秒

桁あわせ（ゼロパディング）

桁数を合わせるために、時分秒の各値が1桁の場合は先頭に 0 を付けて2桁で表示する例です。

文字列のメソッド slice() の引数に -2 を指定して、文字列の最後から2文字を取り出します。

例えば、'001'.slice(-2) とすると最後の2文字 01 を取得できます。

console.log('001'.slice(-2));  // 01

console.log('0012'.slice(-2));  // 12

console.log('00'.slice(-2));  // 00

以下は時分秒に変換する関数を、1桁の場合は先頭に 0 を付けて表示するように書き換えたものです。

hour は3桁以上になる場合は、slice(-2) を適用すると2桁しか取得できないので3桁以上かどうかで分岐しています。

function secToTimeZeroPadding(seconds) {
  const hour = Math.floor(seconds / 3600);
  const min = Math.floor(seconds % 3600 / 60);
  const sec = seconds % 60;
  let hh;
  if (hour < 100) {
    hh = (`00${hour}`).slice(-2);
  } else {
    // hour が3桁以上の場合は左0埋めをしない
    hh = hour;
  }
  const mm = (`00${min}`).slice(-2);
  const ss = (`00${sec}`).slice(-2);

  let time = '';

  if (hour !== 0) {
    time = `${hh}時間${mm}分${ss}秒`;
  } else if (min !== 0) {
    time = `${mm}分${ss}秒`;
  } else {
    time = `${ss}秒`;
  }
  return time;
}
console.log(secToTimeZeroPadding(1000000)); // 277時間46分40秒
console.log(secToTimeZeroPadding(100000));  // 27時間46分40秒
console.log(secToTimeZeroPadding(10020));   // 02時間46分00秒
console.log(secToTimeZeroPadding(1000));    // 16分40秒
console.log(secToTimeZeroPadding(100));     // 01分40秒
console.log(secToTimeZeroPadding(5));       // 05秒
console.log(secToTimeZeroPadding(0));       // 00秒

hh:mm:ss に変換

以下は引数に与えられた秒数を hh:mm:ss 形式に変換する関数の例です。

時分秒の各値が1桁の場合は、左に0を付けて2桁で表示します。

function secToHMS(seconds) {
  const hour = Math.floor(seconds / 3600);
  const min = Math.floor(seconds % 3600 / 60);
  const sec = seconds % 60;
  let hh;
  // hour が3桁以上の場合は左0埋めをしない
  if(hour < 100) {
    hh = (`00${hour}`).slice(-2);
  }else{
    hh = hour;
  }
  const mm = (`00${min}`).slice(-2);
  const ss = (`00${sec}`).slice(-2);
  let time = '';
  if(hour !== 0 ) {
    time = `${hh}:${mm}:${ss}`;
  }else{
    time = `${mm}:${ss}`;
  }
  return time;
}
console.log(secToHMS(100000));  // 27:46:40
console.log(secToHMS(10000));   // 02:46:40
console.log(secToHMS(1000));    // 16:40
console.log(secToHMS(100));     // 01:40
console.log(secToHMS(10));      // 00:10
console.log(secToHMS(0));       // 00:00

ビット否定演算子2つで小数の切り捨て

ビット否定演算子 ~（Bitwise NOT Operator）を2つ ~~ 使用すると、以下のように小数の切り捨てを行うことができます。

console.log(~~ 1.23); // 1

console.log(~~ -9.87); // -9

前述の hh:mm:ss 形式に変換する関数の Math.floo() の部分は ~~ を使って以下のように記述することもできます（但し、他人が見て分かりにくいと思いますが）。

function secToHMS(seconds) {
  // Math.floo() の代わりに ~~ で切り捨て
  const hour = ~~(seconds / 3600);
  const min = ~~(seconds % 3600 / 60);
  const sec = seconds % 60;
  let hh;
  if(hour < 100) {
    hh = (`00${hour}`).slice(-2);
  }else{
    hh = hour;
  }
  const mm = (`00${min}`).slice(-2);
  const ss = (`00${sec}`).slice(-2);
  let time = '';
  if(hour !== 0 ) {
    time = `${hh}:${mm}:${ss}`;
  }else{
    time = `${mm}:${ss}`;
  }
  return time;
}

Web Design Leaves