JavaScript | 時間の操作 | 期間のフォーマット

はじめに

この実験では、与えられたミリ秒数を読みやすい形式に変換する formatDuration と呼ばれる関数を調べます。日、時間、分、秒、ミリ秒に適切な値を抽出するために数学演算をどのように使用するかを学びます。また、filter、map、join などのさまざまな配列メソッドを使って、ユーザーに親切な方法で期間を表示する文字列を作成します。この実験が終わるとき、JavaScript で時間に関するデータを操作してフォーマットする方法を深く理解するようになります。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") subgraph Lab Skills javascript/variables -.-> lab-28316{{"人間が読みやすい時間のフォーマットを作成する"}} javascript/data_types -.-> lab-28316{{"人間が読みやすい時間のフォーマットを作成する"}} javascript/arith_ops -.-> lab-28316{{"人間が読みやすい時間のフォーマットを作成する"}} javascript/comp_ops -.-> lab-28316{{"人間が読みやすい時間のフォーマットを作成する"}} javascript/cond_stmts -.-> lab-28316{{"人間が読みやすい時間のフォーマットを作成する"}} javascript/array_methods -.-> lab-28316{{"人間が読みやすい時間のフォーマットを作成する"}} javascript/higher_funcs -.-> lab-28316{{"人間が読みやすい時間のフォーマットを作成する"}} javascript/template_lit -.-> lab-28316{{"人間が読みやすい時間のフォーマットを作成する"}} end

期間をフォーマットする

与えられたミリ秒数の読みやすい形式を取得するには、次の手順に従います。

ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
ms を適切な値で割って、day、hour、minute、second、millisecond に適切な値を取得します。
Object.entries() と Array.prototype.filter() を使って、ゼロ以外の値のみを残します。
Array.prototype.map() を使って、各値に対する文字列を作成し、適切に複数形にする。
Array.prototype.join() を使って値を文字列に結合します。

以下がコードです。

const formatDuration = (ms) => {
  if (ms < 0) ms = -ms;
  const time = {
    day: Math.floor(ms / 86400000),
    hour: Math.floor(ms / 3600000) % 24,
    minute: Math.floor(ms / 60000) % 60,
    second: Math.floor(ms / 1000) % 60,
    millisecond: Math.floor(ms) % 1000
  };
  return Object.entries(time)
    .filter((val) => val[1] !== 0)
    .map(([key, val]) => `${val} ${key}${val !== 1 ? "s" : ""}`)
    .join(", ");
};

以下はいくつかの例です。

formatDuration(1001); // '1 second, 1 millisecond'
formatDuration(34325055574);
// '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds'

まとめ

おめでとうございます！あなたは「期間をフォーマットする」実験を完了しました。あなたの技術を向上させるために、LabEx でさらに実験を行って練習することができます。