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 ステートメント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>"

ポリフィル(Polyfill)

A polyfill for this feature is available in the proposal repository.

仕様

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

ブラウザ実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

57

55 — 601

なし51 なし あり11
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり57 なし56 なし117.0

1. From version 55 until version 60 (exclusive): this feature is behind the --datetime-format-to-parts runtime flag.

関連項目

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

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