We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

DateTimeFormat.prototype.formatToParts()

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

Intl.DateTimeFormat.prototype.formatToParts() メソッドは、DateTimeFormat フォーマットによって生成されるロケール対応書式を設定可能にします

構文

Intl.DateTimeFormat.prototype.formatToParts(date)

パラメーター

date Optional
フォーマットする日付。

戻り値

フォーマットされた日付のパーツを含むオブジェクトの Array

説明

formatToParts() メソッドは、日付文字列のフォーマットをカスタマイズするときに役立ちます。これは、ロケール特有の部分を保持しながら、カスタム文字列を構築できるロケール特有のトークンを含むオブジェクトの Array を返します。formatToParts() メソッドが返却する構造は、このようになります:

[
  { type: "day", value: "17" },
  { type: "weekday", value "Monday" }
]

可能な type 以下のとおりです。

day
日付として使用される文字列。たとえば、 "17"。
dayPeriod
日付期間として使用される文字列。たとえば、"AM" や "PM"(現在は、"dayperiod" として実装されています。バグ 1260858) を見てください)。
era
時代として使用される文字列。たとえば、"BC" や "AD"。
hour
時刻として使用される文字列。たとえば、"3" や "03"。
minute
分として使用される文字列。たとえば、"00"。
month
月として使用される文字列。たとえば、"12"。
second
秒として使用される文字列。たとえば、"07" や "42"。
separator
日付や時刻の区切りとして使用される文字列。たとえば、" : , / " のいずれか。("separator" は "literal" に変更されるでしょう。バグ 1260858 を見てください)。
timeZoneName
タイムゾーン名として使用される文字列。たとえば、"UTC"。
weekday
曜日として使用される文字列。たとえば、"M" や "Monday"、"Montag"。
year
年として使用される文字列。たとえば、"2012" や "96"。

DateTimeFormat は、ローカライズされた、不透過で直接操作できない文字列を出力します:

var date = Date.UTC(2012, 11, 17, 3, 0, 42);

var formatter = new Intl.DateTimeFormat("en-us", {
  weekday: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hour12: true,
  timeZone: "UTC"
});

formatter.format(date);
// "Monday, 12/17/2012, 3:00:42 AM"

しかし、多くのユーザーインターフェースにおいて、この文字列フォーマットをカスタマイズしたいという要望があります。formatToParts メソッドは、文字列のパーツを提供することで、DateTimeFormat フォーマットによって生成されるロケール対応書式を設定可能にします:

formatter.formatToParts(date);

// 戻り値: 
[ 
  { type: 'weekday',   value: 'Monday' }, 
  { type: 'separator', value: ', '     }, 
  { type: 'month',     value: '12'     }, 
  { type: 'separator', value: '/'      }, 
  { type: 'day',       value: '17'     }, 
  { type: 'separator', value: '/'      }, 
  { type: 'year',      value: '2012'   }, 
  { type: 'separator', value: ', '     }, 
  { type: 'hour',      value: '3'      }, 
  { type: 'separator', value: ':'      }, 
  { type: 'minute',    value: '00'     }, 
  { type: 'separator', value: ':'      }, 
  { type: 'second',    value: '42'     }, 
  { type: 'separator', value: ' '      }, 
  { type: 'dayperiod', value: 'AM'     } 
]

情報を個別に利用してフォーマットし、独自の方法で再結合できます。たとえば、Array.prototype.map() や アロー関数switch ステートメントtemplate stringsArray.prototype.reduce() で使用できます。

var dateString = formatter.formatToParts(date).map(({type, value}) => { 
  switch (type) {
    case 'dayperiod': return `<strong>${value}</strong>`; 
    default : return value; 
  } 
}).reduce((string, part) => string + part);

formatToParts() メソッドを使用した場合、日付期間を太字にします。

console.log(formatter.format(date));
// "Monday, 12/17/2012, 3:00:42 AM"

console.log(dateString);
// "Monday, 12/17/2012, 3:00:42 <strong>AM</strong>"

仕様

仕様 状態 コメント
ECMAScript Internationalization API 4.0 (ECMA-402)
Intl.DateTimeFormat.prototype.formatToParts の定義
ドラフト いまだ仕様草案に含まれていません。issue #30PR #64  を見てください。ポリフィルはこの proposal repository で使用できます。

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 未サポート 未サポート [1] 未サポート 未サポート 未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 未サポート 未サポート 未サポート [1] 未サポート 未サポート 未サポート

[1] 現在、このメソッドは、B2G システムアプリにのみ公開されています(バグ 1216150 を見てください)。

関連項目

ドキュメントのタグと貢献者

このページの貢献者: YuichiNukiyama
最終更新者: YuichiNukiyama,