Intl.RelativeTimeFormat【国際化相対時間フォーマット】オブジェクト

メモ

  • 国際化対応相対時間フォーマット オブジェクト
  • 基本的な操作

関連

外部リンク

  • ECMA-402 (英語)
    ECMA-402:RelativeTimeFormat Objects
    ES2021 Intl (8) ES2020 Intl (7) ES2019 Intl (6) ES2018 Intl (5) ES2017 Intl (4) ES2016 Intl (3) ES2015 Intl (2) ES Intl (1)

コンストラクタ・メソッド

メソッド説明
new Intl.RelativeTimeFormat( [ locales [ , options ] ] ) コンストラクタ
メソッド説明
Intl.RelativeTimeFormat.prototype. format ( value, unit ) フォーマット
Intl.RelativeTimeFormat.prototype. formatToParts ( value, unit ) フォーマットパーツ取得
Intl.RelativeTimeFormat.prototype. resolvedOptions ( ) オプション取得
Intl.RelativeTimeFormat. supportedLocalesOf ( locales [, options ] ) サポート ロケール取得

プロパティ

プロパティ説明
Intl.RelativeTimeFormat.prototype[ @@toStringTag ] タグ (デフォルト:'Intl.RelativeTimeFormat')
実装:RelativeTimeFormat[ Symbol.toStringTag ]
Intl.RelativeTimeFormat.prototype.constructorコンストラクタ定義
Intl.RelativeTimeFormat.prototypeプロトタイプ
const formatter = new Intl.RelativeTimeFormat("ja");

// [ @@toStringTag ]
console.log(formatter[Symbol.toStringTag]);
// 出力例:Intl.RelativeTimeFormat

console.log(formatter.constructor);
// 出力例:function RelativeTimeFormat()

console.log(Intl.RelativeTimeFormat.prototype);
// 出力例:
// Object { … }
//   constructor: function RelativeTimeFormat()
//   format: function format()
//   formatToParts: function formatToParts()
//   resolvedOptions: function resolvedOptions()
//   Symbol(Symbol.toStringTag): "Intl.RelativeTimeFormat"
//   ​<prototype>: Object { … }

new Intl.RelativeTimeFormat【コンストラクタ】

メモ

構文

new Intl.RelativeTimeFormat([locales[, options]])

戻り値Intl.RelativeTimeFormat【国際化相対時間フォーマット】オブジェクト
localesロケール (BCP 47 の言語タグ + Unicode 拡張 数値フォーマット)
     省略:実行環境のロケール
     文字列:1ロケール指定
     文字列の配列:複数指定可 (適切なロケールを自動選択)
optionsオプション の組合せ

locales (ロケール)

BCP 47 の言語タグ (一例)
説明
ja日本語
ja-JP日本語 (日本)
en英語
en-US英語 (アメリカ)
en-GB英語 (イギリス)
de-DEドイツ語 (ドイツ)
fr-FRフランス語 (フランス)

以下の Unicode 拡張 数値フォーマット をサポート (実装依存)


(-u-nu-○)
説明コード
arabアラビア・インド数字٩ ~ ٠U+0660 ~ U+0669
arabextペルシア数字۰ ~ ۹U+06F0 ~ U+06F9
baliバリ数字U+1B50 ~ U+1B59
bengベンガル数字০ ~ ৯U+09E6 ~ U+09EF
devaデーヴァナーガリー数字० ~ ९U+0966 ~ U+096F
fullwide全角数字0 ~ 9U+FF10 ~ U+FF19
gujrグジャラート数字૦ ~ ૯U+0AE6 ~ U+0AEF
guruグルムキー数字੦ ~ ੯U+0A66 ~ U+0A6F
hanidec漢数字〇 ~ 九 U+3007, U+4E00, U+4E8C, U+4E09, U+56DB,
U+4E94, U+516D, U+4E03, U+516B, U+4E5D
khmrクメール数字០ ~ ៩U+17E0 ~ U+17E9
kndaカンナダ数字೦ ~ ೯U+0CE6 ~ U+0CEF
laooラオ数字໐ ~ ໙U+0ED0 ~ U+0ED9
latn 算用数字 (アラビア数字)0 ~ 9U+0030 ~ U+0039
limbリンブ数字U+1946 ~ U+194F
mlymマラヤーラム数字൦ ~ ൯U+0D66 ~ U+0D6F
mongモンゴル数字᠐ ~ ᠙U+1810 ~ U+1819
mymrミャンマー数字၀ ~ ၉U+1040 ~ U+1049
oryaオリヤー数字뙦 ~ 뙯U+0B66 ~ U+0B6F
tamldecタミル数字௦ ~ ௯U+0BE6 ~ U+0BEF
teluテルグ数字౦ ~ ౯U+0C66 ~ U+0C6F
thaiタイ数字๐ ~ ๙U+0E50 ~ U+0E59
tibtチベット数字༠ ~ ༩U+0F20 ~ U+0F29

options (オプション)

オプション値 (太字:デフォルト値)説明
localeMatcher'lookup':Lookupアルゴリズム
'best fit':最適アルゴリズム
ロケールマッチングアルゴリズム
numberingSystem 上記 Unicode 拡張 数値フォーマット の値
(例)
'fullwide':全角数字
'hanidec':漢数字
ナンバリング システム
style'narrow':縮小形式
'short':短い形式
'long':長い形式
形式スタイル
numeric'always':常時数値表現
'auto':特殊表現が無い場合に数値表現
数値表現タイプ

format【フォーマット】も参照

const formatterJ = new Intl.RelativeTimeFormat('ja');
const formatterJA = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });

for (let value of [-3, -2, -1, 0, 1, 2, 3]) {
  console.log(formatterJ.format(value, 'day'), '/', formatterJA.format(value, 'day'));
}
// 出力例:3 日前 / 3 日前
// 出力例:2 日前 / 一昨日
// 出力例:1 日前 / 昨日
// 出力例:0 日後 / 今日
// 出力例:1 日後 / 明日
// 出力例:2 日後 / 明後日
// 出力例:3 日後 / 3 日後

const formatterE = new Intl.RelativeTimeFormat('en');
const formatterEA = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
for (let value of [-2, -1, 0, 1, 2]) {
  console.log(formatterE.format(value, 'day'), '/',formatterEA.format(value, 'day'));
}
// 出力例:2 days ago / 2 days ago
// 出力例:1 day ago / yesterday
// 出力例:in 0 days / today
// 出力例:in 1 day / tomorrow
// 出力例:in 2 days / in 2 days

const formatterNon = new Intl.RelativeTimeFormat();
console.log(formatterNon.resolvedOptions());
// 出力例:Object { locale: "ja-JP", style: "long", numeric: "always", numberingSystem: "latn" }
console.log(formatterNon.format(1, 'month'));
// 出力例:1 か月後

const formatterFull = new Intl.RelativeTimeFormat('ja-u-nu-fullwide');
console.log(formatterFull.format(123, 'year'));
// 出力例:123 年後

const formatterKanji = new Intl.RelativeTimeFormat('ja', { numberingSystem: 'hanidec'});
console.log(formatterKanji.format(123, 'year'));
// 出力例:一二三 年後

Intl.RelativeTimeFormat.prototype.format【フォーマット】

メモ

構文

RelativeTimeFormat.format ( value, unit )

フォーマット文字列
valueunit時間単位

unit (時間単位)

unit説明
'second'
'minute'
'hour'
'day'
'week'
'month'
'quarter'四半期
'year'

コンストラクタも参照

const formatterJ = new Intl.RelativeTimeFormat('ja');
const formatterE = new Intl.RelativeTimeFormat('en');
const formatterJA = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
const formatterEA = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });

console.log(formatterJ.format(-1, 'year'), '/', formatterE.format(-1, 'year'));
// 出力例:1 年前 / 1 year ago
console.log(formatterJ.format(0, 'year'), '/', formatterE.format(0, 'year'));
// 出力例:0 年後 / in 0 years
console.log(formatterJ.format(1, 'year'), '/', formatterE.format(1, 'year'));
// 出力例:1 年後 / in 1 year
console.log(formatterJA.format(-1, 'year'), '/', formatterEA.format(-1, 'year'));
// 出力例:昨年 / last year
console.log(formatterJA.format(0, 'year'), '/', formatterEA.format(0, 'year'));
// 出力例:今年 / this year
console.log(formatterJA.format(1, 'year'), '/', formatterEA.format(1, 'year'));
// 出力例:来年 / next year

console.log(formatterJ.format(-1, 'month'), '/', formatterE.format(-1, 'month'));
// 出力例:1 か月前 / 1 month ago
console.log(formatterJ.format(0, 'month'), '/', formatterE.format(0, 'month'));
// 出力例:0 か月後 / in 0 months
console.log(formatterJ.format(1, 'month'), '/', formatterE.format(1, 'month'));
// 出力例:1 か月後 / in 1 month
console.log(formatterJA.format(-1, 'month'), '/', formatterEA.format(-1, 'month'));
// 出力例:先月 / last month
console.log(formatterJA.format(0, 'month'), '/', formatterEA.format(0, 'month'));
// 出力例:今月 / this month
console.log(formatterJA.format(1, 'month'), '/', formatterEA.format(1, 'month'));
// 出力例:来月 / next month

console.log(formatterJ.format(-1, 'day'), '/', formatterE.format(-1, 'day'));
// 出力例:1 日前 / 1 day ago
console.log(formatterJ.format(0, 'day'), '/', formatterE.format(0, 'day'));
// 出力例:0 日後 / in 0 days
console.log(formatterJ.format(1, 'day'), '/', formatterE.format(1, 'day'));
// 出力例:1 日後 / in 1 day
console.log(formatterJA.format(-1, 'day'), '/', formatterEA.format(-1, 'day'));
// 出力例:昨日 / yesterday
console.log(formatterJA.format(0, 'day'), '/', formatterEA.format(0, 'day'));
// 出力例:今日 / today
console.log(formatterJA.format(1, 'day'), '/', formatterformatterEA.format(1, 'day'));
// 出力例:明日 / tomorrow

function timeFormat(values, unit) {
  let formatterNarrow = new Intl.RelativeTimeFormat('ja', { numeric: 'auto', style: 'narrow' });
  let formatterShort = new Intl.RelativeTimeFormat('ja', { numeric: 'auto', style: 'short' });
  let formatterLong = new Intl.RelativeTimeFormat('ja', { numeric: 'auto', style: 'long' });
  for (let value of values) {
    let timeNarrow = formatterNarrow.format(value, unit);
    let timeShort = formatterShort.format(value, unit);
    let timeLong = formatterLong.format(value, unit);
    console.log(timeNarrow, '/', timeShort, '/', timeLong);
  }
}

timeFormat([-2, -1, 0, 1, 2], 'year');
// 出力例:2年前 / 2 年前 / 2 年前
// 出力例:昨年 / 昨年 / 昨年
// 出力例:今年 / 今年 / 今年
// 出力例:来年 / 来年 / 来年
// 出力例:2年後 / 2 年後 / 2 年後

timeFormat([-2, -1, 0, 1, 2], 'quarter');
// 出力例:2四半期前 / 2 四半期前 / 2 四半期前
// 出力例:前四半期 / 前四半期 / 前四半期
// 出力例:今四半期 / 今四半期 / 今四半期
// 出力例:翌四半期 / 翌四半期 / 翌四半期
// 出力例:2四半期後 / 2 四半期後 / 2 四半期後

timeFormat([-2, -1, 0, 1, 2], 'month');
// 出力例:2か月前 / 2 か月前 / 2 か月前
// 出力例:先月 / 先月 / 先月
// 出力例:今月 / 今月 / 今月
// 出力例:来月 / 来月 / 来月
// 出力例:2か月後 / 2 か月後 / 2 か月後

timeFormat([-2, -1, 0, 1, 2], 'week');
// 出力例:2週間前 / 2 週間前 / 2 週間前
// 出力例:先週 / 先週 / 先週
// 出力例:今週 / 今週 / 今週
// 出力例:来週 / 来週 / 来週
// 出力例:2週間後 / 2 週間後 / 2 週間後

timeFormat([-3, -2, -1, 0, 1, 2, 3], 'day');
// 出力例:3日前 / 3 日前 / 3 日前
// 出力例:一昨日 / 一昨日 / 一昨日
// 出力例:昨日 / 昨日 / 昨日
// 出力例:今日 / 今日 / 今日
// 出力例:明日 / 明日 / 明日
// 出力例:明後日 / 明後日 / 明後日
// 出力例:3日後 / 3 日後 / 3 日後

timeFormat([-1, 0, 1], 'hour');
// 出力例:1時間前 / 1 時間前 / 1 時間前
// 出力例:1 時間以内 / 1 時間以内 / 1 時間以内
// 出力例:1時間後 / 1 時間後 / 1 時間後

timeFormat([-1, 0, 1], 'minute');
// 出力例:1分前 / 1 分前 / 1 分前
// 出力例:1 分以内 / 1 分以内 / 1 分以内
// 出力例:1分後 / 1 分後 / 1 分後

timeFormat([-1, 0, 1], 'second');
// 出力例:1秒前 / 1 秒前 / 1 秒前
// 出力例:今 / 今 / 今
// 出力例:1秒後 / 1 秒後 / 1 秒後

Intl.RelativeTimeFormat.prototype.formatToParts【フォーマットパーツ取得】

メモ

構文

RelativeTimeFormat.formatToParts ( value, unit )

 (Array)フォーマットのパーツ
valueunit時間単位 (format【フォーマット】の 時間単位 参照)

const formatterJ = new Intl.RelativeTimeFormat('ja');
const formatterE = new Intl.RelativeTimeFormat('en');
const formatterJA = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
const formatterEA = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
const values = [-1, 0, 1];

for (let value of values) {
  let array = formatterJ.formatToParts(value, 'year');
  for (let i = 0; i < array.length; i++) {
    console.log(i, array[i]);
  }
  console.log();
}
// 出力例:
// 0 Object { type: "integer", value: "1", unit: "year" }
// 1 Object { type: "literal", value: " 年前" }
//
// 0 Object { type: "integer", value: "0", unit: "year" }
// 1 Object { type: "literal", value: " 年後" }
//
// 0 Object { type: "integer", value: "1", unit: "year" }
// 1 Object { type: "literal", value: " 年後" }

for (let value of values) {
  let array = formatterJA.formatToParts(value, 'year');
  for (let i = 0; i < array.length; i++) {
    console.log(i, array[i]);
  }
  console.log();
}
// 出力例:
// 0 Object { type: "literal", value: "昨年" }
//
// 0 Object { type: "literal", value: "今年" }
//
// 0 Object { type: "literal", value: "来年" }

for (let value of values) {
  let array = formatterE.formatToParts(value, 'year');
  for (let i = 0; i < array.length; i++) {
    console.log(i, array[i]);
  }
  console.log();
}
// 出力例:
// 0 Object { type: "integer", value: "1", unit: "year" }
// 1 Object { type: "literal", value: " year ago" }
//
// 0 Object { type: "literal", value: "in " }
// 1 Object { type: "integer", value: "0", unit: "year" }
// 2 Object { type: "literal", value: " years" }
//
// 0 Object { type: "literal", value: "in " }
// 1 Object { type: "integer", value: "1", unit: "year" }
// 2 Object { type: "literal", value: " year" }

for (let value of values) {
  let array = formatterEA.formatToParts(value, 'year');
  for (let i = 0; i < array.length; i++) {
    console.log(i, array[i]);
  }
  console.log();
}
// 出力例:
// 0 Object { type: "literal", value: "last year" }
//
// 0 Object { type: "literal", value: "this year" }
//
// 0 Object { type: "literal", value: "next year" }

Intl.RelativeTimeFormat.prototype.resolvedOptions【オプション取得】

メモ

構文

RelativeTimeFormat.resolvedOptions ()

オブジェクト (下記プロパティ有効:詳細は コンストラクタ 参照)
プロパティ説明
localeロケール
style形式スタイル
numeric数値表現タイプ
numberingSystemナンバリング システム

const formatterJ = new Intl.RelativeTimeFormat('ja', { numeric: 'auto', numberingSystem: 'fullwide' });
console.log(formatterJ.resolvedOptions());
// 出力例:Object { locale: "ja", style: "long", numeric: "auto", numberingSystem: "fullwide" }

const formatterE = new Intl.RelativeTimeFormat('en', { style: 'narrow' });
console.log(formatterE.resolvedOptions());
// 出力例:Object { locale: "en", style: "narrow", numeric: "always", numberingSystem: "latn" }

Intl.RelativeTimeFormat.supportedLocalesOf【サポート ロケール取得】

メモ

構文

Intl.RelativeTimeFormat.supportedLocalesOf( locales [, options ] ) 

サポートされるロケールの配列
localesロケール (BCP 47 の言語タグ + Unicode 拡張 数値フォーマット)
    (コンストラクタロケール詳細 参照)
optionsマッチングオプション (localeMatcher【ロケールマッチングアルゴリズム】)
    (コンストラクタオプション詳細 参照)

console.log(Intl.RelativeTimeFormat.supportedLocalesOf('ja'));
// 出力例:Array [ "ja" ]

console.log(Intl.RelativeTimeFormat.supportedLocalesOf('ng'));
// 出力例:Array []

let locales = ['ng', 'ja', 'ja-JP', 'en', 'en-US', 'en-GB'];
console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales));
// 出力例:Array(5) [ "ja", "ja-JP", "en", "en-US", "en-GB" ]

locales = ['ng', 'jpn', 'jpn-JP', 'eng', 'eng-US', 'eng-GB'];
console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales));
// 出力例:Array(5) [ "ja", "ja-JP", "en", "en-US", "en-GB" ]

console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales, { localeMatcher: 'lookup' }));
// 出力例:Array(5) [ "ja", "ja-JP", "en", "en-US", "en-GB" ]