From 0c0907b0e5c8f261e03b4a6f3de1fb73c4689de7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 27 Aug 2021 20:34:24 +0900 Subject: Intl.DateTimeFormat オブジェクトを更新 (#2143) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Intl.DateTimeFormat オブジェクトを更新 Intl.DateTimeFormat オブジェクト、 DateTimeFormat() コンストラクターを 2021/08/20 時点の英語版に更新 * Intl.DateTimeFormat.format を更新 * Intl.DateTimeFormat.formatToParts を更新 * Intl.DateTimeFormat.formatRange を更新 * Intl.DateTimeFormat.formatRangeToParts を更新 * Intl.DateTimeFormat.resolvedOptions を更新 * Intl.DateTimeFormat.supportedLocalesOf を更新 --- .../intl/datetimeformat/datetimeformat/index.html | 233 ------------------ .../intl/datetimeformat/datetimeformat/index.md | 261 +++++++++++++++++++++ .../intl/datetimeformat/format/index.html | 111 --------- .../intl/datetimeformat/format/index.md | 101 ++++++++ .../intl/datetimeformat/formatrange/index.html | 88 ------- .../intl/datetimeformat/formatrange/index.md | 81 +++++++ .../datetimeformat/formatrangetoparts/index.html | 81 ------- .../datetimeformat/formatrangetoparts/index.md | 78 ++++++ .../intl/datetimeformat/formattoparts/index.html | 239 ------------------- .../intl/datetimeformat/formattoparts/index.md | 238 +++++++++++++++++++ .../global_objects/intl/datetimeformat/index.html | 182 -------------- .../global_objects/intl/datetimeformat/index.md | 179 ++++++++++++++ .../intl/datetimeformat/resolvedoptions/index.html | 93 -------- .../intl/datetimeformat/resolvedoptions/index.md | 75 ++++++ .../datetimeformat/supportedlocalesof/index.html | 83 ------- .../datetimeformat/supportedlocalesof/index.md | 71 ++++++ 16 files changed, 1084 insertions(+), 1110 deletions(-) delete mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md delete mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md (limited to 'files') diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html deleted file mode 100644 index 7a98ab57cf..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Intl.DateTimeFormat() コンストラクター -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat -tags: - - Constructor - - DateTimeFormat - - Intl - - JavaScript - - Reference - - コンストラクター -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat ---- -
{{JSRef}}
- -

Intl.DateTimeFormat() コンストラクターは、言語に応じた日付と時刻の書式化を可能にするオブジェクトのためのものです。

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}
- - - -

構文

- -
new Intl.DateTimeFormat([locales[, options]])
- -

引数

- -
-
locales {{optional_inline}}
-
-

BCP47 言語タグの文字列、または、そのような文字列の配列です。ブラウザーの既定のロケールを使用するには、空の配列を渡してください。。 Unicode 拡張に対応しています (例えば "en-US-u-ca-buddhist" など)。 locales 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。次の Unicode 拡張キーが利用できます。

- -
-
nu
-
番号方式。使用できる値は次のとおりです。 "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"
-
ca
-
カレンダー。使用できる値は次のとおりです。 "buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "iso8601", "japanese", "persian", "roc"
-
hc
-
時制。使用できる値は次の通りです。 "h11", "h12", "h23", "h24".
-
-
-
options {{optional_inline}}
-
-

以下のプロパティの一部またはすべてを持つオブジェクトです。

- -
-
dateStyle
-
format() が呼び出された際に使用される日付の書式化スタイルです。利用可能な値は以下のとおりです。 -
    -
  • "full"
    • -
  • "long"
    • -
  • "medium"
    • -
  • "short"
    • -
- -
-

dateStyle は timeStyle と一緒に使用することができますが、他のオプションと一緒に使用することができません (例えば weekday, hour, month, など)。

-
-
-
timeStyle
-
format() が呼び出された際に使用される時刻の書式化スタイルです。利用可能な値は以下のとおりです。 -
    -
  • "full"
    • -
  • "long"
    • -
  • "medium"
    • -
  • "short"
    • -
-
-
-
-

timeStyle は dateStyle と一緒に使用することができますが、他のオプションと一緒に使用することができません (例えば weekday, hour, month, など)。

-
-
-
calendar
-
暦です。有効な値は、 "buddhist", "chinese", " coptic", "ethiopia", "ethiopic", "gregory", " hebrew", "indian", "islamic", "iso8601", " japanese", "persian", "roc" です。
-
dayPeriod
-
日単位の期間の表現の仕方です。有効な値は、 "narrow", "short", " long" です。
-
numberingSystem
-
命数法です。有効な値は、 "arab", "arabext", " bali", "beng", "deva", "fullwide", " gujr", "guru", "hanidec", "khmr", " knda", "laoo", "latn", "limb", "mlym", " mong", "mymr", "orya", "tamldec", " telu", "thai", "tibt" です。
-
localeMatcher
-
使用するロケール一致アルゴリズム。利用可能な値は "lookup" と "best fit" です。既定値は "best fit" です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl のページ", "#Locale_negotiation", 1)}}をご覧ください。
-
timeZone
-
使用するタイムゾーン。実装が認識しなければならない唯一の値は "UTC" です。既定値は、実行時の既定のタイムゾーンです。実装は、 IANA タイムゾーンデータベースのタイムゾーン名、例えば "Asia/Shanghai", "Asia/Kolkata", "America/New_York" なども認識できる場合があります。
-
hour12
-
12時制を使用するかどうか (24時制に対して)。可能な値は true と false です。既定ではロケールに依存します。このオプションは hc 言語タグや hourCycle オプションと一緒に使用された場合、これらを上書きします。
-
hourCycle
-
使用する時の周期です。利用可能な値は "h11", "h12", "h23", "h24" です。このオプションは hc 言語タグと一緒に使用された場合はそれを上書きし、両方のオプションが指定されていた場合は hour12 オプションが優先されます。
-
formatMatcher
-
使用する書式一致アルゴリズム。可能な値は "basic" と "best fit" です。既定値は "best fit" です。このプロパティの使用方法については、以下の項を参照してください。
-
- -

以下のプロパティは、書式化の出力や、要求された表現で使用する日付や時刻のコンポーネントです。実装は、少なくとも以下のサブセットに対応することが要求されています。

- -
    -
  • weekday, year, month, day, hour, minute, second
    • -
  • weekday, year, month, day
    • -
  • year, month, day
    • -
  • year, month
    • -
  • month, day
    • -
  • hour, minute, second
    • -
  • hour, minute
    • -
- -

実装は他のサブセットに対応することもでき、要求はすべての利用可能な表現の中から最適なものを見つけるために交渉します。 formatMatcher プロパティによるこの交渉や選択には2つのアルゴリズムが利用できます。完全に定義された "basic" アルゴリズムと、実装に依存した"best fit" アルゴリズムです。

- -
-
weekday
-
曜日の表現です。利用可能な値は以下の通りです。 -
    -
  • "long" (例 Thursday)
    • -
  • "short" (例 Thu)
    • -
  • "narrow" (例 T)。ロケールによっては、 narrow 形式が同じ曜日が2つある場合もあります (例 Tuesday の narrow 形式も T です)。
    • -
-
-
era
-
時代の表現です。利用可能な値は以下の通りです。 -
    -
  • "long" (例 Anno Domini, 紀元)
    • -
  • "short" (例 AD)
    • -
  • "narrow" (例 A)
    • -
-
-
year
-
年の表現です。利用可能な値は以下の通りです。 -
    -
  • "numeric" (例 2012)
    • -
  • "2-digit" (例 12)
    • -
-
-
month
-
月の表現です。利用可能な値は以下の通りです。 -
    -
  • "numeric" (例 2)
    • -
  • "2-digit" (例 02)
    • -
  • "long" (例 March)
    • -
  • "short" (例 Mar)
    • -
  • "narrow" (例 M)。ロケールによっては、 narrow 形式が同じ月が2つある場合もあります (例 May の narrow 形式も M です)。
    • -
-
-
day
-
日の表現です。利用可能な値は以下の通りです。 -
    -
  • "numeric" (例 1)
    • -
  • "2-digit" (例 01)
    • -
-
-
hour
-
時の表現です。利用可能な値は "numeric", "2-digit" です。
-
minute
-
分の表現です。利用可能な値は "numeric", "2-digit" です。
-
second
-
秒の表現です。利用可能な値は "numeric", "2-digit" です。
-
fractionalSecondDigits
-
-
-

Firefox 84, Chrome 84, などで追加されました。詳しくは互換性一覧表を参照してください。

-
- 秒の小数点以下を表すために使用される数字の桁数 (その先の桁は切り捨てられます)。利用可能な値は次の通りです。 - -
    -
  • 0 (小数点以下は切り捨て)
    • -
  • 1 (小数点以下は1桁で表される。例えば、 736 は 7 と書式化される。)
    • -
  • 2 (小数点以下は2桁で表される。例えば、 736 は 73 と書式化される。)
    • -
  • 3 (小数点以下は2桁で表される。例えば、 736 は 736 と書式化される。)
    • -
-
-
timeZoneName
-
タイムゾーン名の表現です。利用可能な値は以下の通りです。 -
    -
  • "long" (例 British Summer Time)
    • -
  • "short" (例 GMT+1)
    • -
-
-
- -

日付・時間コンポーネントプロパティの既定値は {{jsxref("undefined")}} ですが、すべてのコンポーネントプロパティが {{jsxref("undefined")}} であった場合、 year, month, day は "numeric" であると仮定されます。

-
-
- -

例

- -

DateTimeFormat の使用

- -

ロケールを指定しない基本的な使用方法では、 DateTimeFormat は既定のロケールとオプションを使用します。

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// toLocaleString without arguments depends on the implementation,
-// the default locale, and the default time zone
-console.log(new Intl.DateTimeFormat().format(date));
-// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)
- -

timeStyle と dateStyle の使用

- -
let o = new Intl.DateTimeFormat("en" , {
-  timeStyle: "short"
-});
-console.log(o.format(Date.now())); // "13:31 AM"
-
-let o = new Intl.DateTimeFormat("en" , {
-  dateStyle: "short"
-});
-console.log(o.format(Date.now())); // "07/07/20"
-
-let o = new Intl.DateTimeFormat("en" , {
-  timeStyle: "medium",
-  dateStyle: "short"
-});
-console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM"
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ES Int Draft', '#sec-intl-datetimeformat-constructor', 'Intl.DateTimeFormat')}}
- -

ブラウザーの互換性

- -

{{Compat("javascript.builtins.Intl.DateTimeFormat.DateTimeFormat")}}

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md new file mode 100644 index 0000000000..9dd69a4d94 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/datetimeformat/index.md @@ -0,0 +1,261 @@ +--- +title: Intl.DateTimeFormat() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat +tags: + - Constructor + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.DateTimeFormat +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat +--- +{{JSRef}} + +**`Intl.DateTimeFormat()`** コンストラクターは、言語に応じた日付と時刻の書式化を可能にする +{{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトを生成します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html", "taller")}} + + +## 構文 + +```js +new Intl.DateTimeFormat() +new Intl.DateTimeFormat(locales) +new Intl.DateTimeFormat(locales, options) +``` + +### 引数 + +- `locales` {{optional_inline}} + - : BCP 47 言語タグの文字列、または、そのような文字列の配列です。ブラウザーの既定のロケールを使用するには、空の配列を渡してください。。 Unicode 拡張に対応しています (例えば "`en-US-u-ca-buddhist`" など)。 `locales` 引数の一般的な形式と解釈は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページをご覧ください。次の Unicode 拡張キーが利用できます。 + + - `nu` + - : 番号方式。使用できる値は "`arab`", "`arabext`", "`bali`", "`beng`", "`deva`", "`fullwide`", "`gujr`", "`guru`", "`hanidec`", "`khmr`", "`knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", "`mong`", "`mymr`", "`orya`", "`tamldec`", "`telu`", "`thai`", "`tibt`" です。 + - `ca` + - : カレンダー。使用できる値は "`buddhist`", "`chinese`", "`coptic`", "`ethiopia`", "`ethiopic`", "`gregory`", "`hebrew`", "`indian`", "`islamic`", "`iso8601`", "`japanese`", "`persian`", "`roc`" です。 + - `hc` + - : 時制。使用できる値は "`h11`", "`h12`", "`h23`", "`h24`" です。 + +- `options` {{optional_inline}} + + - : 以下のプロパティの一部またはすべてを持つオブジェクトです。 + + - `dateStyle` + + - : `format()` が呼び出された際に使用される日付の書式化スタイルです。利用可能な値は以下のとおりです。 + - "`full`" + - "`long`" + - "`medium`" + - "`short`" + + > **Note:** `dateStyle` は `timeStyle` と一緒に使用することができますが、他のオプション (`weekday`, `hour`, `month`, など) と一緒に使用することはできません。 + + - `timeStyle` + - : `format()` が呼び出された際に使用される時刻の書式化スタイルです。利用可能な値は以下のとおりです。 + + - "`full`" + - "`long`" + - "`medium`" + - "`short`" + + > **Note:** `timeStyle` は `dateStyle` と一緒に使用することができますが、他のオプション (`weekday`, `hour`, `month`, など) と一緒に使用することはできません。 + - `calendar` + - : 暦です。有効な値は、 "`buddhist`", "`chinese`", " `coptic`", "`ethiopia`", "`ethiopic`", "`gregory`", " `hebrew`", "`indian`", "`islamic`", "`iso8601`", " `japanese`", "`persian`", "`roc`" です。 + - `dayPeriod` + + - : 日単位の期間の表現の仕方です。有効な値は、 "`narrow`", "`short`", " `long`" です。 + + > **Note:** + > + > - このオプションは12時間制を使用したときのみ効果があります。 + > - 多くのロケールでは幅の指定を無視して同じ文字列を使用します。 + + - `numberingSystem` + - : 命数法です。有効な値は、 "`arab`", "`arabext`", " `bali`", "`beng`", "`deva`", "`fullwide`", " `gujr`", "`guru`", "`hanidec`", "`khmr`", " `knda`", "`laoo`", "`latn`", "`limb`", "`mlym`", " `mong`", "`mymr`", "`orya`", "`tamldec`", " `telu`", "`thai`", "`tibt`" です。 + - `localeMatcher` + - : 使用するロケール一致アルゴリズム。利用可能な値は "`lookup`" と "`best fit`" です。既定値は "`best fit`" です。このオプションについての詳細は、 {{jsxref("Global_Objects/Intl", "Intl", "#Locale_negotiation", 1)}} のページをご覧ください。 + - `timeZone` + - : 使用するタイムゾーン。実装が認識しなければならない唯一の値は "`UTC`" です。既定値は、実行時の既定のタイムゾーンです。実装は、 [IANA タイムゾーンデータベース](https://www.iana.org/time-zones)のタイムゾーン名、例えば "`Asia/Shanghai`", "`Asia/Kolkata`", "`America/New_York`" なども認識できる場合があります。 + - `hour12` + - : (24 時制に対して) 12 時制を使用するかどうか。可能な値は `true` と `false` です。既定ではロケールに依存します。このオプションは `hc` 言語タグや `hourCycle` オプションと一緒に使用された場合、これらを上書きします。 + - `hourCycle` + - : 使用する時の周期です。利用可能な値は "`h11`", "`h12`", "`h23`", "`h24`" です。このオプションは `hc` 言語タグと一緒に使用された場合はそれを上書きし、両方のオプションが指定されていた場合は `hour12` オプションが優先されます。 + - `formatMatcher` + - : 使用する書式一致アルゴリズム。可能な値は "`basic`" と "`best fit`" です。既定値は "`best fit`" です。このプロパティの使用方法については、以下の項を参照してください。 + + 以下のプロパティは、書式化の出力や、要求された表現で使用する日付や時刻のコンポーネントです。実装は、少なくとも以下のサブセットに対応することが要求されています。 + + - `weekday`, `year`, `month`, `day`, `hour`, `minute`, `second` + - `weekday`, `year`, `month`, `day` + - `year`, `month`, `day` + - `year`, `month` + - `month`, `day` + - `hour`, `minute`, `second` + - `hour`, `minute` + + 実装は他のサブセットに対応することもでき、要求はすべての利用可能な表現の中から最適なものを見つけるために交渉します。 `formatMatcher` プロパティによるこの交渉や選択には2つのアルゴリズムが利用できます。[完全に定義された "`basic`" アルゴリズム](https://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher)と、実装に依存した "`best fit`" アルゴリズムです。 + + - `weekday` + + - : 曜日の表現です。利用可能な値は以下の通りです。 + - "`long`" (例 `Thursday`) + - "`short`" (例 `Thu`) + - "`narrow`" (例 `T`)。ロケールによっては、 narrow 形式が同じ曜日が2つある場合もあります (例 `Tuesday` の narrow 形式も `T` です)。 + + - `era` + + - : 時代の表現です。利用可能な値は以下の通りです。 + + - "`long`" (例 `Anno Domini`, 紀元) + - "`short`" (例 `AD`) + - "`narrow`" (例 `A`) + + - `year` + + - : 年の表現です。利用可能な値は以下の通りです。 + + - "`numeric`" (例 `2012`) + - "`2-digit`" (例 `12`) + + - `month` + + - : 月の表現です。利用可能な値は以下の通りです。 + - "`numeric`" (例 `2`) + - "`2-digit`" (例 `02`) + - "`long`" (例 `March`) + - "`short`" (例 `Mar`) + - "`narrow`" (例 `M`)。ロケールによっては、 narrow 形式が同じ月が2つある場合もあります (例 `May` の narrow 形式も `M` です)。 + + - `day` + + - : 日の表現です。利用可能な値は以下の通りです。 + + - "`numeric`" (例 `1`) + - "`2-digit`" (例 `01`) + + - `hour` + - : 時の表現です。利用可能な値は "`numeric`", "`2-digit`" です。 + - `minute` + - : 分の表現です。利用可能な値は "`numeric`", "`2-digit`" です。 + - `second` + - : 秒の表現です。利用可能な値は "`numeric`", "`2-digit`" です。 + - `fractionalSecondDigits` + - : 秒の小数点以下を表すために使用される数字の桁数 (その先の桁は切り捨てられます)。利用可能な値は次の通りです。 + + - `0` (小数点以下は切り捨て) + - `1` (小数点以下は1桁で表される。例えば、 736 は `7` と書式化される。) + - `2` (小数点以下は2桁で表される。例えば、 736 は `73` と書式化される。) + - `3` (小数点以下は2桁で表される。例えば、 736 は `736` と書式化される。) + + - `timeZoneName` + + - : タイムゾーン名の表現です。利用可能な値は以下の通りです。 + + - "`long`" ローカライズされた長い形式 (例 `Pacific Standard Time`, `Nordamerikanische Westküsten-Normalzeit`) + - "`short`" ローカライズされた短い形式 (例 `PST`, `GMT-8`) + - "`shortOffset`" ローカライズされた短い GMT 形式 (例 `GMT-8`) + - "`longOffset`" ローカライズされた長い GMT 形式 (例 `GMT-0800`) + - "`shortGeneric`" 一般的な場所を指定しない短い形式 (例 `PT`, `Los Angeles Zeit`). + - "`longGeneric`" 一般的な場所を指定しない長い形式 (例 `Pacific Time`, `Nordamerikanische Westküstenzeit`) + + > **Note:** タイムゾーンの表示は、必要な文字列が利用できない場合、別の形式にフォールバックすることがあります。例えば、場所を指定しない形式では、 "Pacific Time" のように特定の国や都市の場所を指定せずにタイムゾーンを表示する必要がありますが、 "Los Angeles Time" のようなタイムゾーンにフォールバックする場合があります。 + + それぞれの日付や時刻の部分のプロパティの既定値は {{jsxref("undefined")}} ですが、すべての部分のプロパティが {{jsxref("undefined")}} であった場合、 `year`, `month`, `day` は "`numeric`" であると想定されます。 + +## 例 + +### DateTimeFormat の使用 + +ロケールを指定しない基本的な使用方法では、 `DateTimeFormat` は既定のロケールとオプションを使用します。 + +```js +let date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// toLocaleString without arguments depends on the implementation, +// the default locale, and the default time zone +console.log(new Intl.DateTimeFormat().format(date)); +// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800) +``` + +### timeStyle と dateStyle の使用 + +```js +let o = new Intl.DateTimeFormat("en" , { + timeStyle: "short" +}); +console.log(o.format(Date.now())); // "13:31 AM" + +let o = new Intl.DateTimeFormat("en" , { + dateStyle: "short" +}); +console.log(o.format(Date.now())); // "07/07/20" + +let o = new Intl.DateTimeFormat("en" , { + timeStyle: "medium", + dateStyle: "short" +}); +console.log(o.format(Date.now())); // "07/07/20, 13:31:55 AM" +``` + +### dayPeriod の使用 + +`dayPeriod` オプションを使用して、1日の時間帯 (「朝」、「夜」、「正午」など) を表す文字列を出力します。なお、これは 12 時間制の書式でのみ有効であり、 (`hourCycle: 'h12'`)、多くのロケールでは `dayPeriod` の値に関係なく同じ文字列が出力されます。 + +```js +let date = Date.UTC(2012, 11, 17, 4, 0, 42); + +console.log(new Intl.DateTimeFormat('en-GB', { hour: 'numeric', hourCycle: 'h12', +dayPeriod: 'short', timeZone: 'UTC' }).format(date)); +// > 4 at night" (same formatting in en-GB for all dayPeriod values) + +console.log(new Intl.DateTimeFormat('fr', { hour: 'numeric', hourCycle: 'h12', + dayPeriod: 'narrow', timeZone: 'UTC' }).format(date)); +// > "4 mat." (same output in French for both narrow/short dayPeriod) + +console.log(new Intl.DateTimeFormat('fr', { hour: 'numeric', hourCycle: 'h12', + dayPeriod: 'long', timeZone: 'UTC' }).format(date)); +// > "4 du matin" +``` + +### timeZoneName の使用 + +`timeZoneName` を使用して、タイムゾーンの文字列 ("GMT", "Pacific Time", など) を出力します。 + +```js +var date = Date.UTC(2021, 11, 17, 3, 0, 42); +const timezoneNames = ['short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', 'longGeneric'] + +for (const zoneName of timezoneNames) { + // Do something with currentValue + var formatter = new Intl.DateTimeFormat('en-US', { + timeZone: 'America/Los_Angeles', + timeZoneName: zoneName, + }); + console.log(zoneName + ": " + formatter.format(date) ); +} + +// expected output: +// > "short: 12/16/2021, PST" +// > "long: 12/16/2021, Pacific Standard Time" +// > "shortOffset: 12/16/2021, GMT-8" +// > "longOffset: 12/16/2021, GMT-08:00" +// > "shortGeneric: 12/16/2021, PT" +// > "longGeneric: 12/16/2021, Pacific Time" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} +- {{jsxref("Global_Objects/Intl", "Intl")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html deleted file mode 100644 index a7606b00f0..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.format() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format -tags: - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format ---- -
{{JSRef}}
- -

Intl.NumberFormat.prototype.format() メソッドは、この {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形します。

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html", "taller")}}
- - - -

構文

- -
dateTimeFormat.format(date)
- -

引数

- -
-
date
-
整形する日付や時刻です。
-
- -

解説

- -

format ゲッター関数は、この {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形し、文字列に格納します。

- -

例

- -

format の使用

- -

format ゲッター関数を使用して単一の日付値を整形します。こちらはセルビアの例です。

- -
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-var dateTimeFormat = new Intl.DateTimeFormat('sr-RS', options);
-console.log(dateTimeFormat.format(new Date()));
-// → "недеља, 7. април 2013."
-
- -

format と map の使用

- -

format ゲッター関数を使用して、配列内のすべての日付を整形することができます。なお、この関数は供給元である {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} に結び付けられているので、直接 {{jsxref("Array.prototype.map()")}} に渡すことができます。

- -
var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
-var options = { year: 'numeric', month: 'long' };
-var dateTimeFormat = new Intl.DateTimeFormat('pt-BR', options);
-var formatted = a.map(dateTimeFormat.format);
-console.log(formatted.join('; '));
-// → "setembro de 2012; dezembro de 2012; abril de 2012"
-
- -

書式化された日付値を固定値と比較することは避ける

- -

ほとんどの場合、 format() が返す書式は一貫しています。しかし、これは将来的に変更される可能性があり、すべての言語で保証されているわけではありません — 出力のバリエーションは設計上のものであり、仕様上は許容されています。最も注目すべきは、 IE や Edge ブラウザは日付の周りに双方向の制御文字を挿入するため、他のテキストと連結したときに出力テキストが適切に流れることです。

- -

このことから、 format() の結果と固定値を比較することができると期待してはいけません。

- -
let d = new Date("2019-01-01T00:00:00.000000Z");
-let formattedDate = Intl.DateTimeFormat(undefined, {
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric'
-}).format(d);
-
-"1.1.2019, 01:00:00" === formattedDate;
-// true in Firefox and others
-// false in IE and Edge
-
- -
-

注: この StackOverflow のスレッドに詳細や例があります。

-
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.prototype.format', 'Intl.DateTimeFormat.format')}}
- -

ブラウザーの互換性

- -

{{Compat("javascript.builtins.Intl.DateTimeFormat.format")}}

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md new file mode 100644 index 0000000000..2cd8c9fae8 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md @@ -0,0 +1,101 @@ +--- +title: Intl.DateTimeFormat.prototype.format() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.format +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format +--- +{{JSRef}} + +The **`Intl.DateTimeFormat.prototype.format()`** メソッドは、この {{jsxref("Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html", "taller")}} + + +## 構文 + +```js +format(date) +``` + +### 引数 + +- `date` + - : 整形する日付です。 + +## 解説 + +`format` ゲッター関数は、この {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトのロケールと整形オプションに従って日付や時刻を整形し、文字列に格納します。 + +## 例 + +### format の使用 + +`format` ゲッター関数を使用して単一の日付値を整形します。こちらはセルビアの例です。 + +```js +var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; +var dateTimeFormat = new Intl.DateTimeFormat('sr-RS', options); +console.log(dateTimeFormat.format(new Date())); +// → "недеља, 7. април 2013." +``` + +### format と map の使用 + +`format` ゲッター関数を使用して、配列内のすべての日付を整形することができます。なお、この関数は供給元である {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} に結び付けられているので、直接 {{jsxref("Array.prototype.map()")}} に渡すことができます。 + +```js +var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)]; +var options = { year: 'numeric', month: 'long' }; +var dateTimeFormat = new Intl.DateTimeFormat('pt-BR', options); +var formatted = a.map(dateTimeFormat.format); +console.log(formatted.join('; ')); +// → "setembro de 2012; dezembro de 2012; abril de 2012" +``` + +### 書式化された日付値を固定値と比較することは避ける + +ほとんどの場合、 `format()` が返す書式は一貫しています。しかし、これは将来的に変更される可能性があり、すべての言語で保証されているわけではありません — 出力のバリエーションは設計上のものであり、仕様上は許容されています。最も注目すべきは、 IE や Edge ブラウザは日付の周りに双方向の制御文字を挿入するため、他のテキストと連結したときに出力テキストが適切に流れることです。 + +このことから、 `format()` の結果と固定値を比較することができると期待してはいけません。 + +```js example-bad +let d = new Date("2019-01-01T00:00:00.000000Z"); +let formattedDate = Intl.DateTimeFormat(undefined, { + year: 'numeric', + month: 'numeric', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric' +}).format(d); + +"1.1.2019, 01:00:00" === formattedDate; +// true in Firefox and others +// false in IE and Edge +``` + +> **Note:** この [StackOverflow のスレッド](https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results)に詳細や例があります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} +- {{jsxref("Date.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleDateString()")}} +- {{jsxref("Date.prototype.toLocaleTimeString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html deleted file mode 100644 index 1722354d9e..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.formatRange() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange -tags: - - JavaScript - - Method - - Reference - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange ---- -
{{JSRef}}
- -

Intl.DateTimeFormat.prototype.formatRange() は、日付の範囲をもっとも簡明な方法で、 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された locale と options に基づいて書式化します。

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html", "taller")}}
- - - -

構文

- -
Intl.DateTimeFormat.prototype.formatRange(startDate, endDate)
- -

例

- -

基本的な formatRange の使用

- -

このメソッドは2つの {{jsxref("Date")}} を受け取り、 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された locale と options に基づいて日付の範囲を書式化します。

- -
let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
-let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
-let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
-// > 'Wed, 10 Jan 2007 10:00:00 GMT'
-// > 'Wed, 10 Jan 2007 11:00:00 GMT'
-// > 'Sat, 20 Jan 2007 10:00:00 GMT'
-
-let fmt1 = new Intl.DateTimeFormat("en", {
-    year: '2-digit',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric'
-});
-console.log(fmt1.format(date1));
-console.log(fmt1.formatRange(date1, date2));
-console.log(fmt1.formatRange(date1, date3));
-// > '1/10/07, 10:00 AM'
-// > '1/10/07, 10:00 – 11:00 AM'
-// > '1/10/07, 10:00 AM – 1/20/07, 10:00 AM'
-
-let fmt2 = new Intl.DateTimeFormat("en", {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-});
-console.log(fmt2.format(date1));
-console.log(fmt2.formatRange(date1, date2));
-console.log(fmt2.formatRange(date1, date3));
-// > 'Jan 10, 2007'
-// > 'Jan 10, 2007'
-// > 'Jan 10 – 20, 2007'
-
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('Intl.DateTimeFormat.formatRange', '#sec-intl.datetimeformat.prototype.formatRange', 'formatRange()')}}
- -

ブラウザーの互換性

- -
-

{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRange")}}

-
- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md new file mode 100644 index 0000000000..0c14478615 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.md @@ -0,0 +1,81 @@ +--- +title: Intl.DateTimeFormat.prototype.formatRange() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.formatRange +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.formatRange()`** は、 {{jsxref("Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された **`locale`** と **`options`** に基づいて、もっとも簡明な方法で日付の範囲を書式化します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html", + "taller")}} + + +## 構文 + +```js +formatRange(startDate, endDate) +``` + +## 例 + +### 基本的な formatRange の使用 + +このメソッドは 2 つの {{jsxref("Date")}} を受け取り、 {{jsxref("Intl/DateTimeFormat", "Intl.DateTimeFormat")}} オブジェクトがインスタンス化されたときに提供された `locale` と `options` に基づいて日付の範囲を書式化します。 + +```js +let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0)); +let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0)); +let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0)); +// > 'Wed, 10 Jan 2007 10:00:00 GMT' +// > 'Wed, 10 Jan 2007 11:00:00 GMT' +// > 'Sat, 20 Jan 2007 10:00:00 GMT' + +let fmt1 = new Intl.DateTimeFormat("en", { + year: '2-digit', + month: 'numeric', + day: 'numeric', + hour: 'numeric', + minute: 'numeric' +}); +console.log(fmt1.format(date1)); +console.log(fmt1.formatRange(date1, date2)); +console.log(fmt1.formatRange(date1, date3)); +// > '1/10/07, 10:00 AM' +// > '1/10/07, 10:00 – 11:00 AM' +// > '1/10/07, 10:00 AM – 1/20/07, 10:00 AM' + +let fmt2 = new Intl.DateTimeFormat("en", { + year: 'numeric', + month: 'short', + day: 'numeric' +}); +console.log(fmt2.format(date1)); +console.log(fmt2.formatRange(date1, date2)); +console.log(fmt2.formatRange(date1, date3)); +// > 'Jan 10, 2007' +// > 'Jan 10, 2007' +// > 'Jan 10 – 20, 2007' +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html deleted file mode 100644 index be4d8a0bc4..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.formatRangeToParts() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts -tags: - - Internationalization - - JavaScript - - Localization - - Method - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts ---- -

{{JSRef}}

- -

Intl.DateTimeFormat.prototype.formatRangeToParts() メソッドは、 DateTimeFormat フォーマッターで生成される期間の各部品を表すロケール特有のトークンを提供します。

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrangetoparts.html", "taller")}}
- - - -

構文

- -
Intl.DateTimeFormat.prototype.formatRangeToParts(startDate, endDate)
- -

例

- -

基本的な formatRangeToParts の使い方

- -

このメソッドは2つの {{jsxref("Date")}} を受け取り、期間を書式化する際の各部品を表すロケール特有のトークンを含む {{jsxref("Array")}} オブジェクトを返します。

- -
let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
-let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
-// > 'Wed, 10 Jan 2007 10:00:00 GMT'
-// > 'Wed, 10 Jan 2007 11:00:00 GMT'
-
-let fmt = new Intl.DateTimeFormat("en", {
-    hour: 'numeric',
-    minute: 'numeric'
-});
-
-console.log(fmt.formatRange(date1, date2));
-// > '10:00 – 11:00 AM'
-
-fmt.formatRangeToParts(date1, date2);
-// return value:
-// [
-//   { type: 'hour',      value: '10',  source: "startRange" },
-//   { type: 'literal',   value: ':',   source: "startRange" },
-//   { type: 'minute',    value: '00',  source: "startRange" },
-//   { type: 'literal',   value: ' – ', source: "shared"     },
-//   { type: 'hour',      value: '11',  source: "endRange"   },
-//   { type: 'literal',   value: ':',   source: "endRange"   },
-//   { type: 'minute',    value: '00',  source: "endRange"   },
-//   { type: 'literal',   value: ' ',   source: "shared"     },
-//   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
-// ]
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('Intl.DateTimeFormat.formatRange', '#sec-Intl.DateTimeFormat.prototype.formatRangeToParts', 'formatRangeToParts()')}}
- -

ブラウザーの互換性

- -

{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRangeToParts")}}

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md new file mode 100644 index 0000000000..034909ed3c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.md @@ -0,0 +1,78 @@ +--- +title: Intl.DateTimeFormat.prototype.formatRangeToParts() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.formatRangeToParts +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.formatRangeToParts()`** メソッドは、 {{jsxref("Intl.DateTimeFormat")}} フォーマッターで生成される期間の各部品を表すロケール特有のトークンを提供します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrangetoparts.html", + "taller")}} + + +## 構文 + +```js +formatRangeToParts(startDate, endDate) +``` + +## 例 + +### 基本的な formatRangeToParts の使い方 + +このメソッドは2つの {{jsxref("Date")}} を受け取り、期間を書式化する際の各部品を表す*ロケール特有*のトークンを含む {{jsxref("Array")}} オブジェクトを返します。 + +> **Note:** 返値は現在のロケールで表示されるので、以下のものとは異なる可能性があります。 + +```js +let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0)); +let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0)); +// > 'Wed, 10 Jan 2007 10:00:00 GMT' +// > 'Wed, 10 Jan 2007 11:00:00 GMT' + +let fmt = new Intl.DateTimeFormat("en", { + hour: 'numeric', + minute: 'numeric' +}); + +console.log(fmt.formatRange(date1, date2)); +// > '10:00 – 11:00 AM' + +fmt.formatRangeToParts(date1, date2); +// return value: +// [ +// { type: 'hour', value: '10', source: "startRange" }, +// { type: 'literal', value: ':', source: "startRange" }, +// { type: 'minute', value: '00', source: "startRange" }, +// { type: 'literal', value: ' – ', source: "shared" }, +// { type: 'hour', value: '11', source: "endRange" }, +// { type: 'literal', value: ':', source: "endRange" }, +// { type: 'minute', value: '00', source: "endRange" }, +// { type: 'literal', value: ' ', source: "shared" }, +// { type: 'dayPeriod', value: 'AM', source: "shared" } +// ] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}} +- {{jsxref("Intl.DateTimeFormat")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html deleted file mode 100644 index 04e140d0e8..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: DateTimeFormat.prototype.formatToParts() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts -tags: - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts ---- -
{{JSRef}}
- -

Intl.DateTimeFormat.prototype.formatToParts() メソッドは、ロケールを意識した DateTimeFormat フォーマッターが生成する文字列のロケールを考慮した書式化を可能にします。

- -

構文

- -
dateTimeFormat.formatToParts(date)
- -

引数

- -
-
date {{optional_inline}}
-
書式化する日付。
-
- -

返値

- -

書式化された日付のパーツを含むオブジェクトの {{jsxref("Array")}} です。

- -

解説

- -

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

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

渡される可能性がある type は以下のとおりです。

- -
-
day
-
日付として使用される文字列。たとえば、 "17"。
-
dayPeriod
-
日付期間として使用される文字列。たとえば、 "AM", "PM", "in the morning", "noon" など。
-
era
-
時代として使用される文字列。たとえば、"BC" や "AD"。
-
fractionalSecond
-
小数点以下の秒として使用される文字列です。例えば "0" や "00" や "000" です。
-
hour
-
時刻として使用される文字列。たとえば "3" や "03"。
-
literal
-
日付や時刻の区切りとして使用される文字列。たとえば "/"、","、"o'clock"、"de"。
-
minute
-
分として使用される文字列。たとえば、"00"。
-
month
-
月として使用される文字列。たとえば、"12"。
-
relatedYear
-
カレンダーの表現が year ではなくyearNameである場合、関連する4桁のグレゴリオ暦の年に使用される文字列です。例えば "2019" です。
-
second
-
秒として使用される文字列。たとえば、"07" や "42"。
-
timeZoneName
-
タイムゾーン名として使用される文字列。たとえば、"UTC"。
-
weekday
-
曜日として使用される文字列。たとえば、"M" や "Monday"、"Montag"。
-
year
-
年として使用される文字列。たとえば、"2012" や "96"。
-
yearName
-
関連するコンテキストで yearName に使用される文字列、例えば "geng-zi" など。
-
- -

ポリフィル

- -

この機能のポリフィルは、提案リポジトリから利用できます。

- -

例

- -

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',
-  fractionalSecondDigits: 3,
-  hour12: true,
-  timeZone: 'UTC'
-});
-
-formatter.format(date);
-// "Monday, 12/17/2012, 3:00:42.000 AM"
-
- -

しかし、多くのユーザーインターフェイスでは、この文字列の書式をカスタマイズしたいという要望があります。 formatToParts メソッドは、文字列を部品単位で提供することで、 DateTimeFormat フォーマッターによって生成された文字列のロケールを意識した書式設定ができるようになります。

- -
formatter.formatToParts(date);
-
-// return value:
-[
-  { 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: 'fractionalSecond', value: '000' },
-  { type: 'literal',   value: ' '      },
-  { type: 'dayPeriod', value: 'AM'     }
-]
-
- -

これで情報は個別に利用可能になり、カスタマイズされた方法で再び書式化して連結することができます。例えば、{{jsxref("Array.prototype.map()")}}、アロー関数、 switch 文、テンプレートリテラル、 {{jsxref("Array.prototype.reduce()")}} などを使用しています。

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

これにより、 formatToParts() メソッドを使用する際に、日の部分が太字になります。

- -
console.log(formatter.format(date));
-// "Monday, 12/17/2012, 3:00:42.000 AM"
-
-console.log(dateString);
-// "Monday, 12/17/2012, 3:00:42.000 <b>AM</b>"
- -

名前付きの年と混合カレンダー

- -

いくつかのケースでは、暦は名前付きの年を使用しています。 例えば、中国やチベットの暦では、60年周期の干支を使用しています。これらの年は、グレゴリオ暦の年と関連付けて識別されます。このような場合、 formatToParts() の結果は、通常は年が存在するはずなのに、年の項目ではなく、4桁のグレゴリオ暦の年を含む relatedYear のエントリを含むことになります。バッグの中の項目を (任意の値で) year に設定すると、年と yearName グレゴリオ暦の relatedYear の両方が得られます。

- -
let opts = { year: "numeric", month: "numeric", day: "numeric" };
-let df = new Intl.DateTimeFormat("zh-u-ca-chinese", opts);
-df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
-
-// return value
-[
-  { type: 'relatedYear', value: '2012' },
-  { type: 'literal', value: '年' },
-  { type: 'month', value: '十一月' },
-  { type: 'day', value: '4' }
-]
-
- -

year オプションがバッグ内で設定されていない場合 (任意の値に設定されている場合)、結果には relatedYear のみが含まれます。

- -
let df = new Intl.DateTimeFormat("zh-u-ca-chinese");
-df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42));
-
-// 返値
-[
-   { type: 'relatedYear', value: '2012' },
-   { type: 'literal', value: '年' },
-   { type: 'month', value: '十一月' },
-   { type: 'day', value: '4' }
-]
-
- -

year を出力したい場合は、 .format() は一般的にこれらを並べて表示することができます。

- -
let df = new Intl.DateTimeFormat("zh-u-ca-chinese", {year: "numeric"});
-df.format(Date.UTC(2012, 11, 17, 3, 0, 42));
-
-// 返値
-2012壬辰年
- -

これにより、ロケールとカレンダーを両方の format で混在させることも可能になります。

- -
let df = new Intl.DateTimeFormat("en-u-ca-chinese", {year: "numeric"});
-let date = Date.UTC(2012, 11, 17, 3, 0, 42);
-df.format(date);
-
-// 返値
-2012(ren-chen)
-
- -

および formatToParts の場合

- -
let opts = {month: 'numeric', day: 'numeric', year: "numeric"};
-let df = new Intl.DateTimeFormat("en-u-ca-chinese", opts);
-let date = Date.UTC(2012, 11, 17, 3);
-df.formatToParts(date)
-
-// 返値
-[
-  { type: 'month', value: '11' },
-  { type: 'literal', value: '/' },
-  { type: 'day', value: '4' },
-  { type: 'literal', value: '/' },
-  { type: 'relatedYear', value: '2012' }
-]
-
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}}
- -

ブラウザーの互換性

- -
-

{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}

-
- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md new file mode 100644 index 0000000000..cbe6256671 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.md @@ -0,0 +1,238 @@ +--- +title: Intl.DateTimeFormat.prototype.formatToParts() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.formatToParts +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.formatToParts()`** メソッドは、ロケールを考慮した {{jsxref("Intl.DateTimeFormat")}} フォーマッターが生成する文字列のロケールを考慮した書式化を可能にします。 + +## 構文 + +```js +formatToParts(date) +``` + +### 引数 + +- `date` {{optional_inline}} + - : 書式化する日付。 + +### 返値 + +{{jsxref("Array")}} で、書式化された日付のパーツを含むオブジェクトの配列です。 + +## 解説 + +`formatToParts()` メソッドは、日付文字列のフォーマットをカスタマイズするときに役立ちます。これは、ロケール特有の部分を保持しながら、カスタム文字列を構築できるロケール特有のトークンを含むオブジェクトの {{jsxref("Array")}} を返します。`formatToParts()` メソッドが返却する構造は、このようになります。 + +```js +[ + { type: 'day', value: '17' }, + { type: 'weekday', value: 'Monday' } +] +``` + +渡される可能性がある type は以下のとおりです。 + +- day + - : 日付として使用される文字列。たとえば、 "`17`"。 +- dayPeriod + - : 日付期間として使用される文字列。たとえば、 "`AM`", "`PM`", "`in the morning`", "`noon`" など。 +- era + - : 時代として使用される文字列。たとえば、"`BC`" や "`AD`"。 +- fractionalSecond + - : 小数点以下の秒として使用される文字列です。例えば "`0`" や "`00`" や "`000`" です。 +- hour + - : 時刻として使用される文字列。たとえば "`3`" や "`03`"。 +- literal + - : 日付や時刻の区切りとして使用される文字列。たとえば "`/`"、"`,`"、"`o'clock`"、"`de`"。 +- minute + - : 分として使用される文字列。たとえば、"`00`"。 +- month + - : 月として使用される文字列。たとえば、"`12`"。 +- relatedYear + - : カレンダーの表現が year ではなくyearNameである場合、関連する4桁のグレゴリオ暦の年に使用される文字列です。例えば "`2019`" です。 +- second + - : 秒として使用される文字列。たとえば、"`07`" や "`42`"。 +- timeZoneName + - : タイムゾーン名として使用される文字列。たとえば、"`UTC`"。 +- weekday + - : 曜日として使用される文字列。たとえば、"`M`" や "`Monday`"、"`Montag`"。 +- year + - : 年として使用される文字列。たとえば、"`2012`" や "`96`"。 +- yearName + - : 関連するコンテキストで yearName に使用される文字列、例えば "`geng-zi`" など。 + +## ポリフィル + +この機能のポリフィルは、[提案リポジトリー](https://github.com/zbraniecki/proposal-intl-formatToParts)から利用できます。 + +## 例 + +`DateTimeFormat` は、直接操作できないローカライズされた透過的でない文字列を出力します。 + +```js +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', + fractionalSecondDigits: 3, + hour12: true, + timeZone: 'UTC' +}); + +formatter.format(date); +// "Monday, 12/17/2012, 3:00:42.000 AM" +``` + +しかし、多くのユーザーインターフェイスでは、この文字列の書式をカスタマイズしたいという要望があります。 `formatToParts` メソッドは、文字列を部品単位で提供することで、 `DateTimeFormat` フォーマッターによって生成された文字列のロケールを意識した書式設定ができるようになります。 + +```js +formatter.formatToParts(date); + +// return value: +[ + { 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: 'fractionalSecond', value: '000' }, + { type: 'literal', value: ' ' }, + { type: 'dayPeriod', value: 'AM' } +] +``` + +これで情報は個別に利用可能になり、カスタマイズされた方法で再び書式化して連結することができます。例えば、{{jsxref("Array.prototype.map()")}}、アロー関数、 switch 文、テンプレートリテラル、 {{jsxref("Array.prototype.join()")}} などを使用しています。 + +```js +var dateString = formatter.formatToParts(date).map(({type, value}) => { + switch (type) { + case 'dayPeriod': return `${value}`; + default : return value; + } +}).join(''); +``` + +これにより、 `formatToParts()` メソッドを使用する際に、日の部分が太字になります。 + +```js +console.log(formatter.format(date)); +// "Monday, 12/17/2012, 3:00:42.000 AM" + +console.log(dateString); +// "Monday, 12/17/2012, 3:00:42.000 AM" +``` + +### 名前付きの年と混合カレンダー + +名前付きの年を使用している暦もあります。例えば、中国やチベットの暦では、 60 年周期の[干支](https://ja.wikipedia.org/wiki/%E5%B9%B2%E6%94%AF)を使用しています。これらの年は、グレゴリオ暦の年と関連付けて識別されます。このような場合、 `formatToParts()` の結果は、通常は年が存在するはずなのに、年の項目ではなく、 4 桁のグレゴリオ暦の年を含む `relatedYear` の項目を含むことになります。バッグの中の項目を (任意の値で) `year` に設定すると、年と `yearName` グレゴリオ暦の `relatedYear` の両方が得られます。 + +```js +let opts = { year: "numeric", month: "numeric", day: "numeric" }; +let df = new Intl.DateTimeFormat("zh-u-ca-chinese", opts); +df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42)); + +// return value +[ + { type: 'relatedYear', value: '2012' }, + { type: 'literal', value: '年' }, + { type: 'month', value: '十一月' }, + { type: 'day', value: '4' } +] +``` + +`year` オプションがバッグ内で設定されていない場合 (任意の値に設定されている場合)、結果には `relatedYear` のみが含まれます。 + +```js +let df = new Intl.DateTimeFormat("zh-u-ca-chinese"); +df.formatToParts(Date.UTC(2012, 11, 17, 3, 0, 42)); + +// 返値 +[ + { type: 'relatedYear', value: '2012' }, + { type: 'literal', value: '年' }, + { type: 'month', value: '十一月' }, + { type: 'day', value: '4' } +] +``` + +`year` を出力したい場合は、 `.format()` は一般的にこれらを並べて表示することができます。 + +```js +let df = new Intl.DateTimeFormat("zh-u-ca-chinese", {year: "numeric"}); +df.format(Date.UTC(2012, 11, 17, 3, 0, 42)); + +// 返値 +2012壬辰年 +``` + +これにより、ロケールとカレンダーを両方の `format` で混在させることも可能になります。 + +```js +let df = new Intl.DateTimeFormat("en-u-ca-chinese", {year: "numeric"}); +let date = Date.UTC(2012, 11, 17, 3, 0, 42); +df.format(date); + +// 返値 +2012(ren-chen) +``` + +および `formatToParts` の場合 + +```js +let opts = {month: 'numeric', day: 'numeric', year: "numeric"}; +let df = new Intl.DateTimeFormat("en-u-ca-chinese", opts); +let date = Date.UTC(2012, 11, 17, 3); +df.formatToParts(date) + +// 返値 +[ + { type: 'month', value: '11' }, + { type: 'literal', value: '/' }, + { type: 'day', value: '4' }, + { type: 'literal', value: '/' }, + { type: 'relatedYear', value: '2012' } +] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} +- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}} +- {{jsxref("Date.prototype.toLocaleString()")}} +- {{jsxref("Date.prototype.toLocaleDateString()")}} +- {{jsxref("Date.prototype.toLocaleTimeString()")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html deleted file mode 100644 index 9b18a60a81..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Intl.DateTimeFormat -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -tags: - - Class - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Localization - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -browser-compat: javascript.builtins.Intl.DateTimeFormat ---- -
{{JSRef}}
- -

Intl.DateTimeFormat オブジェクトは、言語に応じた日付と時刻の書式化を可能にするオブジェクトのためのコンストラクターです。

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}
- -

コンストラクター

- -
-
{{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}}
-
新しい DateTimeFormat オブジェクトを生成します。
-
- -

静的メソッド

- -
-
{{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
-
指定されたロケールのうち、実行時の既定のロケールにフォールバックせずに対応されるものを配列に収めて返します。
-
- -

インスタンスメソッド

- -
-
{{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}}
-
ロケールおよびこの {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。
-
{{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
-
オブジェクトの {{jsxref("Array")}} を返し、これは専用のロケールを意識した書式で使用することができる部品内の数値文字列を表します。
-
{{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
-
ローケルを反映しているプロパティとオブジェクトの初期化中に計算された照合オプションをもった新しいオブジェクトを返します。
-
{{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}
-
このメソッドは 2 つの Date を受け取り、 {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} インスタンスを生成する際に指定されたロケールとオプションに基づいて、最も簡潔な方法で日付の範囲を書式化します。
-
{{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}
-
このメソッドは 2 つの Date を受け取り、書式化された日付の範囲の各部分を表すロケール固有のトークンを含むオブジェクトの配列を返します。
-
- -

例

- -

DateTimeFormat の使用

- -

基本的に、ロケールを指定せずに使用すると、 DateTimeFormat は既定のロケールとオプションを使用します。

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// toLocaleString without arguments depends on the implementation,
-// the default locale, and the default time zone
-console.log(new Intl.DateTimeFormat().format(date));
-// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800)
-
- -

locales の使用

- -

この例では、ローカライズされた日付と時刻の形式のバリエーションの一部示しています。アプリケーションのユーザーインターフェイスで使用される言語のフォーマットを取得するには、 locales 引数を使用して、その言語 (およびおそらくいくつかのフォールバック言語) を指定してください。

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// Results below use the time zone of America/Los_Angeles (UTC-0800, Pacific Standard Time)
-
-// US English uses month-day-year order
-console.log(new Intl.DateTimeFormat('en-US').format(date));
-// → "12/19/2012"
-
-// British English uses day-month-year order
-console.log(new Intl.DateTimeFormat('en-GB').format(date));
-// → "19/12/2012"
-
-// Korean uses year-month-day order
-console.log(new Intl.DateTimeFormat('ko-KR').format(date));
-// → "2012. 12. 19."
-
-// Arabic in most Arabic speaking countries uses real Arabic digits
-console.log(new Intl.DateTimeFormat('ar-EG').format(date));
-// → "١٩‏/١٢‏/٢٠١٢"
-
-// for Japanese, applications may want to use the Japanese calendar,
-// where 2012 was the year 24 of the Heisei era
-console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
-// → "24/12/19"
-
-// when requesting a language that may not be supported, such as
-// Balinese, include a fallback language, in this case Indonesian
-console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
-// → "19/12/2012"
-
- -

options の使用

- -

日付と時刻の書式は options 引数を使用してカスタマイズできます。

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));
-
-// request a weekday along with a long date
-var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
-// → "Donnerstag, 20. Dezember 2012"
-
-// an application may want to use UTC and make that visible
-options.timeZone = 'UTC';
-options.timeZoneName = 'short';
-console.log(new Intl.DateTimeFormat('en-US', options).format(date));
-// → "Thursday, December 20, 2012, GMT"
-
-// sometimes you want to be more precise
-options = {
-  hour: 'numeric', minute: 'numeric', second: 'numeric',
-  timeZone: 'Australia/Sydney',
-  timeZoneName: 'short'
-};
-console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
-// → "2:00:00 pm AEDT"
-
-// sometimes you want to be very precise
-options.fractionalSecondDigits = 3; //number digits for fraction-of-seconds
-console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
-// → "2:00:00.200 pm AEDT"
-
-// sometimes even the US needs 24-hour time
-options = {
-  year: 'numeric', month: 'numeric', day: 'numeric',
-  hour: 'numeric', minute: 'numeric', second: 'numeric',
-  hour12: false,
-  timeZone: 'America/Los_Angeles'
-};
-console.log(new Intl.DateTimeFormat('en-US', options).format(date));
-// → "12/19/2012, 19:00:00"
-
-// to specify options but use the browser's default locale, use 'default'
-console.log(new Intl.DateTimeFormat('default', options).format(date));
-// → "12/19/2012, 19:00:00"
-
-// sometimes it's helpful to include the period of the day
-options = {hour: "numeric", dayPeriod: "short"};
-console.log(new Intl.DateTimeFormat('en-US', options).format(date));
-// → 10 at night
-
- -

The used calendar and numbering formats can also be set independently via options arguments:

- -
var options = {calendar: 'chinese', numberingSystem: 'arab'};
-var dateFormat = new Intl.DateTimeFormat('default', options);
-var usedOptions = dateFormat.resolvedOptions();
-
-console.log(usedOptions.calendar);
-// → "chinese"
-
-console.log(usedOptions.numberingSystem);
-// → "arab"
-
-console.log(usedOptions.timeZone);
-// → "America/New_York" (the users default timezone)
-
- -

ポリフィル

- -

formatjs Intl.DateTimeFormat polyfill

- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -
{{Compat}}
- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md new file mode 100644 index 0000000000..95faa9574f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/index.md @@ -0,0 +1,179 @@ +--- +title: Intl.DateTimeFormat +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +tags: + - Class + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +browser-compat: javascript.builtins.Intl.DateTimeFormat +--- +{{JSRef}} + +**`Intl.DateTimeFormat`** オブジェクトは、言語に応じた日付と時刻の書式化を可能にします。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}} + + +## コンストラクター + +- {{jsxref("Intl/DateTimeFormat/DateTimeFormat", "Intl.DateTimeFormat()")}} + - : 新しい `DateTimeFormat` オブジェクトを生成します。 + +## 静的メソッド + +- {{jsxref("Intl/DateTimeFormat/supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}} + - : 指定されたロケールのうち、実行時の既定のロケールにフォールバックせずに対応されるものを配列に収めて返します。 + +## インスタンスメソッド + +- {{jsxref("Intl/DateTimeFormat/format", "Intl.DateTimeFormat.prototype.format()")}} + - : ロケールおよびこの {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。 +- {{jsxref("Intl/DateTimeFormat/formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}} + - : オブジェクトの {{jsxref("Array")}} を返し、これは専用のロケールを意識した書式で使用することができる部品内の数値文字列を表します。 +- {{jsxref("Intl/DateTimeFormat/resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}} + - : ローケルを反映しているプロパティとオブジェクトの初期化中に計算された照合オプションをもった新しいオブジェクトを返します。 +- {{jsxref("Intl/DateTimeFormat/formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}} + - : このメソッドは 2 つの [Date](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) を受け取り、 {{jsxref("Intl/DateTimeFormat", "DateTimeFormat")}} インスタンスを生成する際に指定されたロケールとオプションに基づいて、最も簡潔な方法で日付の範囲を書式化します。 +- {{jsxref("Intl/DateTimeFormat/formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}} + - : このメソッドは 2 つの [Date](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) を受け取り、書式化された日付の範囲の各部分を表すロケール固有のトークンを含むオブジェクトの配列を返します。 + +## 例 + +### DateTimeFormat の使用 + +基本的に、ロケールを指定せずに使用すると、 `DateTimeFormat` は既定のロケールとオプションを使用します。 + +```js +var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// toLocaleString without arguments depends on the implementation, +// the default locale, and the default time zone +console.log(new Intl.DateTimeFormat().format(date)); +// → "12/19/2012" if run with en-US locale (language) and time zone America/Los_Angeles (UTC-0800) +``` + +### locales の使用 + +この例では、ローカライズされた日付と時刻の形式のバリエーションの一部示しています。アプリケーションのユーザーインターフェイスで使用される言語のフォーマットを取得するには、 `locales` 引数を使用して、その言語 (およびおそらくいくつかのフォールバック言語) を指定してください。 + +```js +var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// Results below use the time zone of America/Los_Angeles (UTC-0800, Pacific Standard Time) + +// US English uses month-day-year order +console.log(new Intl.DateTimeFormat('en-US').format(date)); +// → "12/19/2012" + +// British English uses day-month-year order +console.log(new Intl.DateTimeFormat('en-GB').format(date)); +// → "19/12/2012" + +// Korean uses year-month-day order +console.log(new Intl.DateTimeFormat('ko-KR').format(date)); +// → "2012. 12. 19." + +// Arabic in most Arabic speaking countries uses real Arabic digits +console.log(new Intl.DateTimeFormat('ar-EG').format(date)); +// → "١٩‏/١٢‏/٢٠١٢" + +// for Japanese, applications may want to use the Japanese calendar, +// where 2012 was the year 24 of the Heisei era +console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date)); +// → "24/12/19" + +// when requesting a language that may not be supported, such as +// Balinese, include a fallback language, in this case Indonesian +console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date)); +// → "19/12/2012" +``` + +### options の使用 + +日付と時刻の書式は `options` 引数を使用してカスタマイズできます。 + +```js +var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200)); + +// request a weekday along with a long date +var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; +console.log(new Intl.DateTimeFormat('de-DE', options).format(date)); +// → "Donnerstag, 20. Dezember 2012" + +// an application may want to use UTC and make that visible +options.timeZone = 'UTC'; +options.timeZoneName = 'short'; +console.log(new Intl.DateTimeFormat('en-US', options).format(date)); +// → "Thursday, December 20, 2012, GMT" + +// sometimes you want to be more precise +options = { + hour: 'numeric', minute: 'numeric', second: 'numeric', + timeZone: 'Australia/Sydney', + timeZoneName: 'short' +}; +console.log(new Intl.DateTimeFormat('en-AU', options).format(date)); +// → "2:00:00 pm AEDT" + +// sometimes you want to be very precise +options.fractionalSecondDigits = 3; //number digits for fraction-of-seconds +console.log(new Intl.DateTimeFormat('en-AU', options).format(date)); +// → "2:00:00.200 pm AEDT" + +// sometimes even the US needs 24-hour time +options = { + year: 'numeric', month: 'numeric', day: 'numeric', + hour: 'numeric', minute: 'numeric', second: 'numeric', + hour12: false, + timeZone: 'America/Los_Angeles' +}; +console.log(new Intl.DateTimeFormat('en-US', options).format(date)); +// → "12/19/2012, 19:00:00" + +// to specify options but use the browser's default locale, use 'default' +console.log(new Intl.DateTimeFormat('default', options).format(date)); +// → "12/19/2012, 19:00:00" + +// sometimes it's helpful to include the period of the day +options = {hour: "numeric", dayPeriod: "short"}; +console.log(new Intl.DateTimeFormat('en-US', options).format(date)); +// → 10 at night +``` + +The used calendar and numbering formats can also be set independently via `options` arguments: + +```js +var options = {calendar: 'chinese', numberingSystem: 'arab'}; +var dateFormat = new Intl.DateTimeFormat('default', options); +var usedOptions = dateFormat.resolvedOptions(); + +console.log(usedOptions.calendar); +// → "chinese" + +console.log(usedOptions.numberingSystem); +// → "arab" + +console.log(usedOptions.timeZone); +// → "America/New_York" (the users default timezone) +``` + +## ポリフィル + +[formatjs Intl.DateTimeFormat polyfill](https://formatjs.io/docs/polyfills/intl-datetimeformat) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html deleted file mode 100644 index c59e62e79c..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.resolvedOptions() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions -tags: - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions ---- -
{{JSRef}}
- -

Intl.Collator.prototype.resolvedOptions() メソッドは、この {{jsxref("Collator")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトを返します。

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}}
- - - -

構文

- -
dateTimeFormat.resolvedOptions()
- -

返値

- -

この {{jsxref("DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトです。

- -

解説

- -

返されるオブジェクトには以下のプロパティがあります。

- -
-
locale
-
実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが locale に含まれます。
-
calendar
-
例: "gregory"
-
numberingSystem
-
Unicode 拡張キーの "ca" および "nu" で要求された値、または既定値が入ります。
-
timeZone
-
options 引数の同名のプロパティで要求された値です。提供された値がなければ {{jsxref("undefined")}} (ランタイムの既定のタイムゾーン) です。警告: アプリケーションは {{jsxref("undefined")}} が返されることに依存しないでください。将来のバージョンではランタイムの既定のタイムゾーンを識別する {{jsxref("String")}} 値が返されるようになる可能性があるからです。
-
hour12
-
options 引数の同名のプロパティで要求された値、または既定値が入ります。
-
weekday
-
era
-
year
-
month
-
day
-
hour
-
minute
-
second
-
timeZoneName
-
options 引数の対応するプロパティと、選択したロケールでの日付時刻の書式設定に利用可能な組み合わせや表現との間で、書式のマッチングを行った結果の値。これらのプロパティの中には、対応するコンポーネントが書式化された出力では表現されないものもあります。
-
- -

例

- -

resolvedOptions メソッドの使用

- -
var germanFakeRegion = new Intl.DateTimeFormat('de-XX', { timeZone: 'UTC' });
-var usedOptions = germanFakeRegion.resolvedOptions();
-
-usedOptions.locale;          // "de"
-usedOptions.calendar;        // "gregory"
-usedOptions.numberingSystem; // "latn"
-usedOptions.timeZone;        // "UTC"
-usedOptions.month;           // "numeric"
-
- -

仕様書

- - - - - - - - - - -
仕様書
{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.prototype.resolvedoptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}
- -

ブラウザーの互換性

- -
-

{{Compat("javascript.builtins.Intl.DateTimeFormat.resolvedOptions")}}

-
- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md new file mode 100644 index 0000000000..6ceb4c773f --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.md @@ -0,0 +1,75 @@ +--- +title: Intl.DateTimeFormat.prototype.resolvedOptions() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Prototype + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.resolvedOptions +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions +--- +{{JSRef}} + +**`Intl.DateTimeFormat.prototype.resolvedOptions()`** メソッドは、この {{jsxref("Intl/DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールや日付と時刻の整形オプションを反映したプロパティを持つ新しいオブジェクトを返します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}} + + +## 構文 + +```js +resolvedOptions() +``` + +### 返値 + +この {{jsxref("Intl/DateTimeFormat")}} オブジェクトの初期化時に計算されたロケールと照合オプションを反映したプロパティを持つ新しいオブジェクトです。 + +## 解説 + +返されるオブジェクトには以下のプロパティがあります。 + +- `locale` + - : 実際に使用したロケールの BCP 47 言語タグ。このロケールにつながる入力 BCP 47 言語タグに Unicode 拡張値が要求された場合、要求されたキーと値のペアのうち、このロケールで対応しているものが `locale` に含まれます。 +- `calendar` + - : 例: "gregory" +- `numberingSystem` + - : Unicode 拡張キーの `"ca"` および `"nu"` で要求された値、または既定値が入ります。 +- `timeZone` + - : `options` 引数の同名のプロパティで要求された値です。提供された値がなければ {{jsxref("undefined")}} (ランタイムの既定のタイムゾーン) です。警告: アプリケーションは {{jsxref("undefined")}} が返されることに依存しないでください。将来のバージョンではランタイムの既定のタイムゾーンを識別する {{jsxref("String")}} 値が返されるようになる可能性があるからです。 +- `hour12` + - : `options` 引数の同名のプロパティで要求された値、または既定値が入ります。 +- `weekday`, `era`, `year`, `month`, `day`, `hour`, `minute`, `second`, `timeZoneName` + - : `options` 引数の対応するプロパティと、選択したロケールでの日付時刻の書式設定に利用可能な組み合わせや表現との間で、書式のマッチングを行った結果の値。これらのプロパティの中には、対応するコンポーネントが書式化された出力では表現されないものもあります。 + +## 例 + +### resolvedOptions メソッドの使用 + +```js +var germanFakeRegion = new Intl.DateTimeFormat('de-XX', { timeZone: 'UTC' }); +var usedOptions = germanFakeRegion.resolvedOptions(); + +usedOptions.locale; // "de" +usedOptions.calendar; // "gregory" +usedOptions.numberingSystem; // "latn" +usedOptions.timeZone; // "UTC" +usedOptions.month; // "numeric" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html deleted file mode 100644 index 0108a95679..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Intl.DateTimeFormat.supportedLocalesOf() -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf -tags: - - DateTimeFormat - - Internationalization - - JavaScript - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf ---- -
{{JSRef}}
- -

Intl.DateTimeFormat.supportedLocalesOf() メソッドは、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含む配列を返します。

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html","shorter")}}
- - - -

構文

- -
Intl.DateTimeFormat.supportedLocalesOf(locales[, options])
- -

引数

- -
-
locales
-
BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 locales 引数の一般的な形式については、 {{jsxref("Intl", "Intl のページ", "#Locale_identification_and_negotiation", 1)}}を参照してください。
-
options
-
-

省略可能です。以下のプロパティを持つことがあるオブジェクトです。

- -
-
localeMatcher
-
使用するロケールの一致アルゴリズムです。指定可能な値は lookup および best fit で、既定値は best fit です。このオプションの詳細は、 {{jsxref("Intl", "Intl のページ", "#Locale_negotiation", 1)}}を参照してください。
-
-
-
- -

返値

- -

指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含みます。

- -

解説

- -

locales で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。

- -

例

- -

supportedLocalesOf() の使用

- -

日時の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 supportedLocalesOf はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 pinyin の照合は日時の書式には関係なく、インドネシア語でも使用されません。ここでの lookup アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 best fit のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。

- -
var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
-var options = { localeMatcher: 'lookup' };
-console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(', '));
-// → "id-u-co-pinyin, de-ID"
-
- -

仕様書

- - - - - - - - - - -
仕様書
{{SpecName('ES Int Draft', '#sec-intl.datetimeformat.supportedlocalesof', 'Intl.DateTimeFormat.supportedLocalesOf')}}
- -

ブラウザーの互換性

- -
-

{{Compat("javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf")}}

-
- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md new file mode 100644 index 0000000000..4c5e19d610 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md @@ -0,0 +1,71 @@ +--- +title: Intl.DateTimeFormat.supportedLocalesOf() +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Localization + - Method + - Reference +browser-compat: javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf +--- +{{JSRef}} + +**`Intl.DateTimeFormat.supportedLocalesOf()`** メソッドは、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含む配列を返します。 + +{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html","shorter")}} + + +## 構文 + +```js +Intl.DateTimeFormat.supportedLocalesOf(locales) +Intl.DateTimeFormat.supportedLocalesOf(locales, options) +``` + +### 引数 + +- `locales` + - : BCP 47 言語タグを持つ文字列、またはそのような文字列の配列です。 `locales` 引数の一般的な形式については、 {{jsxref("Intl", "Intl", "#Locale_identification_and_negotiation", 1)}} のページを参照してください。 +- `options` {{optional_inline}} + + - : 省略可能です。以下のプロパティを持つことがあるオブジェクトです。 + + - `localeMatcher` + - : 使用するロケールの一致アルゴリズムです。指定可能な値は `lookup` および `best fit` で、既定値は `best fit` です。このオプションの詳細は、 {{jsxref("Intl", "Intl", "#Locale_negotiation", 1)}} のページを参照してください。 + +### 返値 + +指定したロケールタグのサブセットを表す文字列の配列で、ランタイムの既定のロケールで代替する必要なく日時の書式で対応されているものを含みます。 + +## 解説 + +`locales` で提供されている言語タグのサブセットを含む配列を返します。返される言語タグは、ランタイムが日時のロケールに対応しているもので、使用しているロケール一致アルゴリズムで一致しているとみなされているものです。 + +## 例 + +### supportedLocalesOf() の使用 + +日時の書式でインドネシア語とドイツ語に対応しており、バリ語に対応していないランタイムを想定すると、 `supportedLocalesOf` はインドネシア語とドイツ語の言語タグを変更せずに返しますが、 pinyin の照合は日時の書式には関係なく、インドネシア語でも使用されません。ここでの `lookup` アルゴリズムの仕様に注意してください — バリ語話者のほとんどはインドネシア語も理解しているので、 `best fit` のマッチャーはインドネシア語がバリ語に適切に一致すると判断し、バリ語の言語タグも返すかもしれません。 + +```js +const locales = ['ban', 'id-u-co-pinyin', 'de-ID']; +const options = { localeMatcher: 'lookup' }; +console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(', ')); +// → "id-u-co-pinyin, de-ID" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl.DateTimeFormat")}} -- cgit v1.2.3-54-g00ecf