JavaScriptで日付値をフォーマットする方法をわかりやすく解説

JavaScriptでは、toLocaleDateString()メソッドを使うことで、Dateオブジェクトが持つ日付の値を読みやすい形式にフォーマットできます。この記事では、実際のコード例を使いながら、日付値を整形して表示する方法を紹介します。

サンプルコード

以下は、JavaScriptで日付値をフォーマットするためのコード例です。

function changeDateFormat(dateValues, addToFront = "") {
    return typeof dateValues == "object" ? addToFront + dateValues.toLocaleDateString() : "";
}
var currentDate = new Date();
console.log("現在の日付値=" + currentDate);
console.log("フォーマット後の日付値=" +
changeDateFormat(currentDate));

コードのポイント

このコードでは、引数として渡された値がオブジェクト（つまりDateオブジェクト）かどうかをtypeof演算子で判定しています。オブジェクトであればtoLocaleDateString()を呼び出して「年/月/日」形式の文字列に変換し、そうでなければ空文字列を返します。第2引数のaddToFrontに文字列を渡すと、整形した日付の前にその文字列を連結することも可能です。

プログラムの実行方法

上記のプログラムを実行するには、以下のコマンドを使用します。

node fileName.js.

ここでは、ファイル名をdemo289.jsとして保存しています。

実行結果

コンソールには次のような出力が表示されます。

PS C:\Users\Amit\javascript-code> node demo289.js
現在の日付値=Sat Aug 29 2020 12:51:06 GMT+0530 (India Standard Time)
フォーマット後の日付値=8/29/2020

まとめ

Dateオブジェクトをそのまま出力すると、曜日やタイムゾーンまで含んだ長い文字列になってしまいます。toLocaleDateString()を活用すれば、環境のロケールに合わせたシンプルな日付形式に整形できるため、ユーザーにとって見やすい表示を実現できます。必要に応じて引数でロケールやオプションを指定すれば、「2020年8月29日」のような日本語形式への変換も簡単に行えます。