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"
era
時代として使用される文字列。たとえば、"BC" や "AD"
hour
時刻として使用される文字列。たとえば、"3" や "03"
literal
日付や時刻の区切りとして使用される文字列。 たとえば、 "/"",""o'clock""de"
minute
分として使用される文字列。たとえば、"00"
month
月として使用される文字列。たとえば、"12"
second
秒として使用される文字列。たとえば、"07" や "42"
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: 'literal', value: ', '     }, 
  { type: 'month',     value: '12'     }, 
  { type: 'literal', value: '/'      }, 
  { type: 'day',       value: '17'     }, 
  { type: 'literal', value: '/'      }, 
  { type: 'year',      value: '2012'   }, 
  { type: 'literal', value: ', '     }, 
  { type: 'hour',      value: '3'      }, 
  { type: 'literal', value: ':'      }, 
  { type: 'minute',    value: '00'     }, 
  { type: 'literal', value: ':'      }, 
  { type: 'second',    value: '42'     }, 
  { type: 'literal', value: ' '      }, 
  { type: 'dayperiod', value: 'AM'     } 
]

情報を個別に利用してフォーマットし、独自の方法で再結合できます。たとえば、Array.prototype.map() や アロー関数switch ステートメントテンプレートリテラルArray.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>"

ポリフィル(Polyfill)

この機能のポリフィルはproposal repositoryで利用可能です。

仕様

仕様 状態 コメント
ECMAScript Internationalization API 4.0 (ECMA-402)
Intl.DateTimeFormat.prototype.formatToParts の定義
ドラフト 初期定義。

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung InternetNode.js
基本対応Chrome 完全対応 57
完全対応 57
未対応 55 — 60
無効
無効 From version 55 until version 60 (exclusive): this feature is behind the --datetime-format-to-parts runtime flag.
Edge 完全対応 ありFirefox 完全対応 51IE 未対応 なしOpera 完全対応 ありSafari 完全対応 11WebView Android 完全対応 ありChrome Android 完全対応 57Edge Mobile 未対応 なしFirefox Android 完全対応 56Opera Android 未対応 なしSafari iOS 完全対応 11Samsung Internet Android 完全対応 7.0nodejs 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連項目

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

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