今回は、先回ご紹介した「カレンダーを表示する関数」のうち、以下のコードを詳しくみていくことにしよう。
const todayString = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
このコードは、今日の日付をYYYY-MM-DD形式の文字列に変換するためのものである。
テンプレートリテラル
`${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`テンプレートリテラルを使用して、複数の値を結合し、フォーマットされた文字列を作成する。テンプレートリテラルはバッククォート（`）で囲まれ、${}内に変数や式を埋め込むことができる。
年の取得
today.getFullYear()todayオブジェクトから年を取得する。例えば、2025年なら2025が返される。
月の取得とフォーマット
String(today.getMonth() + 1).padStart(2, '0')todayオブジェクトから月を取得する。getMonth()は0から11の値を返すため、1を足して1から12の値にしている。
その後、String()で文字列に変換し、padStart(2, ‘0’)を使用して2桁にフォーマットしている。例えば、4月なら04になる。
日の取得とフォーマット
String(today.getDate()).padStart(2, '0')todayオブジェクトから日を取得する。String()で文字列に変換し、padStart(2, ‘0’)を使用して2桁にフォーマットしている。例えば、21日なら21になる。
結合
`${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}` これらの値をテンプレートリテラルで結合し、YYYY-MM-DD形式の文字列を作成している。例えば、2025年4月21日なら2025-04-21になる。
このように、このコードは、今日の日付を標準的な形式で取得し、他の部分で使用するために文字列として保存するものである。
テンプレートリテラルとは
テンプレートリテラルは、JavaScriptで文字列を作成するための新しい方法である。
バッククォート（`）で囲まれた文字列で、変数や式を埋め込むことができる。
それでは、テンプレートリテラルの特徴と使い方をご紹介しよう。
特徴
変数や式の埋め込み
${}の中に変数や式を入れることで、文字列の中にその値を埋め込むことができる。
const name = "Rocky";
const greeting = `Hello, ${name}!`; // "Hello, Rocky!"複数行の文字列
バッククォートを使うことで、複数行にわたる文字列を簡単に作成できる。
const multiLine = `This is a string
that spans multiple
lines.`;式の評価
${}の中に任意のJavaScript式を入れることができ、その結果が文字列に埋め込まれる。
const a = 5; const b = 10; const result = `The sum of a and b is ${a + b}.`;
// "The sum of a and b is 15."
以下にテンプレートリテラルの具体的な例を示す。
const firstName = "Rocky";
const lastName = "Seven";
const age = 30;
const introduction = `My name is ${firstName} ${lastName} and I am ${age} years old.`;
console.log(introduction); // "My name is Rocky Seven and I am 30 years old."
実行結果
このように、テンプレートリテラルを使うと、文字列の中に変数や式を簡単に埋め込むことができ、コードがより読みやすくなる。
コメント