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

JavaScriptのDate.toLocaleString()関数とは？使い方と実行例をわかりやすく解説

Dateオブジェクトは、JavaScriptに組み込まれているデータ型の一つで、日付と時刻を扱うために用意されています。Dateオブジェクトは、new Date() を使って次のように生成します。

Dateオブジェクトを一度生成すれば、多数のメソッドを使ってその値を操作できます。そのほとんどは、ローカル時刻またはUTC（協定世界時・GMT）のいずれかを基準として、オブジェクトが持つ年・月・日・時・分・秒・ミリ秒の各フィールドを取得・設定する役割を担っています。

本記事で解説する toLocaleString() メソッドは、日付オブジェクトが保持している日時（日付と時刻の両方）を、実行環境の地域設定（ロケール）に合わせた読みやすい文字列形式で返すメソッドです。ユーザーにとって馴染みのある形で日時を表示したい場合に非常に便利です。

構文

toLocaleString() の基本構文は次のとおりです。

dateObj.toLocaleString()

また、引数としてロケール（地域・言語コード）や書式オプションを渡すことで、表示形式を柔軟にカスタマイズすることも可能です。

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

基本的な使用例

まずは、特定の日時を指定してDateオブジェクトを生成し、toLocaleString() の戻り値を表示するシンプルな例を見てみましょう。

<html>
<head>
   <title>JavaScript Example</title>
</head>
<body>
   <script type="text/javascript">
      var dateObj = new Date('September 26, 89 12:4:25:96');
      document.write("Current Date: "+dateObj.toLocaleString());
   </script>
</body>
</html>

出力結果

Current Date: 9/26/1989, 12:04:25 PM

表示形式は実行環境のロケール設定によって変わります。上記の出力は英語圏（US形式）の環境での例です。

引数なしでDateオブジェクトを生成した場合

Dateオブジェクトのコンストラクタに何も引数を渡さなかった場合は、システムの現在日時が自動的にセットされます。この状態で toLocaleString() を呼び出すと、現在の日時を文字列形式で取得できます。

<script type="text/javascript">
    var dateObj = new Date();
    document.write("Current Date: "+dateObj.toLocaleString());
</script>

出力結果

Current Date: 2024/5/10 14:30:25

※実際に表示される内容は、スクリプトを実行した日時や環境のロケール設定によって異なります。

ロケールを指定して書式を変更する

toLocaleString() には、希望する書式に対応するロケール文字列を引数として渡すこともできます。例えば、常に米国式の表示形式にしたい場合は "en-US" を指定します。

<script type="text/javascript">
    var dateObj = new Date('September 26, 89 12:4:25:96');
    document.write("Current Date: "+dateObj.toLocaleString("en-US"));
</script>

出力結果

Current Date: 9/26/1989, 12:04:25 PM

同様に "ja-JP" を指定すれば日本語圏の形式、"en-GB" を指定すれば英国式の形式で表示されます。ロケールを明示的に指定することで、ユーザーの環境設定に関係なく一定の書式で日時を表示できる点が大きなメリットです。

まとめ

  • toLocaleString() は、Dateオブジェクトが持つ日時をロケールに合わせた文字列形式で返すメソッドである
  • 引数を指定しない場合は、実行環境のロケール設定が自動的に適用される
  • 第1引数にロケール文字列（例：'ja-JP'、'en-US'）を渡すことで、任意の地域の書式で表示できる
  • より細かい書式制御が必要な場合は、options オブジェクトや Intl.DateTimeFormat の活用も検討するとよい
  1. JavaScriptのDate.@@toPrimitive()関数とは？日付オブジェクトをプリミティブ値に変換する方法

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

  2. JavaScriptのarray.toLocaleString()関数の使い方｜配列をロケール形式の文字列に変換する方法

    array.toLocaleString()関数とはJavaScriptのarray.toLocaleString()関数は、配列の要素を文字列として返し、各要素をカンマなどロケール固有の区切り文字で連結します。引数としてロケール（言語タグ）を指定することもでき、指定した言語・地域の書式に従って文字列へ変換されます。例えば、日付オブジェクトが含まれる配列に対してこの関数を使用すると、「en-GB」や「ja-JP」などのロケールに応じた形式で日付が表示されます。ロケールを省略した場合は、実行環境のデフォルトのロケールが使用されます。主な特徴配列のすべての要素を文字列化し、区切り文字で連結して返す