JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのDate.toLocaleTimeString()関数の使い方をわかりやすく解説

JavaScriptには、日付と時刻を扱うための組み込みオブジェクトとしてDateオブジェクトが用意されています。Dateオブジェクトは、new Date()を使って以下のように生成します。

var dateObj = new Date();

一度Dateオブジェクトを生成すれば、多数のメソッドを使って日付や時刻を操作できるようになります。ほとんどのメソッドは、ローカル時間またはUTC（協定世界時・GMT）のいずれかを基準に、年・月・日・時・分・秒・ミリ秒の各フィールドを取得・設定するためのものです。

toLocaleTimeString()メソッドとは

toLocaleTimeString()は、Dateオブジェクトが保持する時刻の部分だけを、実行環境のロケール（言語・地域の設定）に合わせた文字列として返すメソッドです。日付は含まれず、「午前」「午後」などの表記もロケールに応じて自動的に切り替わります。

構文

dateObj.toLocaleTimeString([locales[, options]])

第1引数のlocalesにはロケール識別子（例：'ja-JP'）、第2引数のoptionsには表示形式の詳細設定をオブジェクトで指定できます。どちらの引数も省略可能で、省略した場合は実行環境の既定のロケールが使用されます。

基本的な使用例

次の例では、特定の日時を指定してDateオブジェクトを作成し、toLocaleTimeString()で時刻部分の文字列を取得しています。

<html>
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <script type='text/javascript'>
    var dateObj = new Date('September 26, 1989 12:04:25');
    document.write('現在の時刻: ' + dateObj.toLocaleTimeString());
  </script>
</body>
</html>

出力結果：

現在の時刻: 12:04:25 PM

ロケールを指定した使用例

引数にロケールを明示的に指定すれば、実行環境に依存しない固定の出力形式を得られます。日本語と英語（米国）のロケールを比較した例が次のとおりです。

var dateObj = new Date(1989, 8, 26, 12, 4, 25);
console.log(dateObj.toLocaleTimeString('ja-JP')); // 12:04:25
console.log(dateObj.toLocaleTimeString('en-US')); // 12:04:25 PM

なお、月は0始まり（0が1月）で指定する点に注意してください。上の例では8を指定しているため、9月となります。

無効な日付を渡した場合

Dateコンストラクターに、1〜31の範囲外の「日」など解析できない値を渡すと、生成されるDateオブジェクトは無効な状態になります。この場合、toLocaleTimeString()はInvalid Dateという文字列を返します。

var dateObj = new Date('September 467, 1989 12:4:25');
document.write('現在の日付: ' + dateObj.toLocaleTimeString());

出力結果：

現在の日付: Invalid Date

引数なしで現在時刻を取得する

Dateコンストラクターに何も渡さずにインスタンスを生成すると、呼び出し時点の日付・時刻を持つオブジェクトが得られます。これに対してtoLocaleTimeString()を呼び出せば、現在の時刻文字列を簡単に取得できます。

var dateObj = new Date();
document.write('現在の時刻: ' + dateObj.toLocaleTimeString());

出力結果：

現在の時刻: 15:57:04

関連メソッド（toLocaleString / toLocaleDateString）との違い

Dateオブジェクトには、名前の似たローカライズ系メソッドが他にもあります。それぞれ返される内容が異なるため、目的に応じて使い分けることが重要です。

メソッド戻り値の内容出力例（ja-JP）
toLocaleTimeString()時刻のみ12:04:25
toLocaleDateString()日付のみ1989/9/26
toLocaleString()日付＋時刻1989/9/26 12:04:25

たとえばtoLocaleString()を使用すると、日付と時刻の両方を1つの文字列として取得できます。

var dateObj = new Date('September 26, 1989 12:04:25');
console.log(dateObj.toLocaleString()); // 1989/9/26 12:04:25

まとめ

toLocaleTimeString()は、Dateオブジェクトの時刻部分をロケールに合わせた読みやすい文字列へ変換できる便利なメソッドです。ロケールやオプションを組み合わせれば多言語対応も容易になるため、国際化が必要なWebアプリケーションで特に役立ちます。日付も一緒に表示したい場合はtoLocaleString()、日付のみが必要な場合はtoLocaleDateString()を使い分けるとよいでしょう。

  1. JavaScriptのDate.toDateString()メソッドの使い方を徹底解説

    Dateオブジェクトは、JavaScript言語に標準で組み込まれているデータ型です。Dateオブジェクトは、以下のようにnew Date()を使って生成します。一度Dateオブジェクトを作成すると、さまざまなメソッドを使ってそのオブジェクトを操作できます。ほとんどのメソッドは、ローカル時間またはUTC（協定世界時・グリニッジ標準時）のいずれかを基準として、オブジェクトが持つ年、月、日、時、分、秒、ミリ秒の各フィールドを取得・設定するためのものです。その中でもtoDateString()メソッドは、時刻情報を除いた「日付部分のみ」を文字列として返すメソッドです。構文toDateString()

  2. JavaScriptのDate.@@toPrimitive()関数とは？日付オブジェクトをプリミティブ値に変換する方法

    JavaScriptのDate.@@toPrimitive()関数は、Dateオブジェクトをプリミティブ値に変換するために使用されます。このメソッドはSymbol.toPrimitiveプロパティを通じて呼び出され、引数に指定したヒント（hint）に応じて、文字列や数値など適切なプリミティブ値を返します。 ヒントの種類と戻り値 「default」：日付を表す文字列が返されます。 「number」：1970年1月1日00:00:00 UTCからの経過ミリ秒数（タイムスタンプ）が数値で返されます。 「string」：「default」と同様に、日付を表す文字列が返されます。 サンプルコード 以