Intl.DurationFormat
Intl.DurationFormat は時間・分・秒などの期間をロケールに応じた形式で表示します。
概要
Intl.DurationFormat は時間・分・秒などの期間をロケールに応じた形式で表示します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 129 | 129 | 136 | 16.4 | 129 | 16.4 | |
| ビルトインオブジェクト | ||||||
| Intl.DurationFormat() コンストラクターは、 Intl.DurationFormat オブジェクトを作成します。 | 129 | 129 | 136 | 16.4 | 129 | 16.4 |
| format() は Intl.DurationFormat インスタンスのメソッドで、この Intl.DurationFormat オブジェクトのロケールおよび書式設定オプションに従って経過時間を書式化します。 | 129 | 129 | 136 | 16.4 | 129 | 16.4 |
| formatToParts() は Intl.DurationFormat インスタンスのメソッドで、 Intl/DurationFormat/format によって返される、書式化された文字列の各部分を表すオブジェクトの配列を返します。これは、ロケール固有のトークンからカスタム文字列を構築するのに役立ちます。 | 129 | 129 | 136 | 16.4 | 129 | 16.4 |
| Intl.DurationFormat インスタンスのsolvedOptions() メソッドは、この DurationFormat オブジェクトの初期化中に計算されたオプションを反映するプロパティを持つ新しいオブジェクトを返します。 | 129 | 129 | 136 | 16.4 | 129 | 16.4 |
| Intl.DurationFormat.supportedLocalesOf() 静的メソッドは、実行時の既定のロケールに代替されることなく、経過時間の書式に対応する、指定されたロケールの配列を返します。 | 129 | 129 | 136 | 16.4 | 129 | 16.4 |
基本構文
new Intl.DurationFormat('ja', { style: 'long' })
.format({ hours: 2, minutes: 30 });
// '2 hours 30 minutes'ライブデモ
Format a duration object
Render the same duration with Intl.DurationFormat when the API is available.
Compare style options
Format the same duration with long, short, and narrow styles.
Build a countdown label
Turn a remaining duration into a readable UI label.
実務での使いどころ
-
Intl.DurationFormat の活用
時間の長さ（Duration）をロケールに応じてフォーマットする API。
注意点
- 古いブラウザ（IE等）では対応していない。対象ブラウザを確認すること。
アクセシビリティ
- JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。
参考リンク
Powered by web-features