From cbce13f7105b75459f9645828a2e5ece79a25b90 Mon Sep 17 00:00:00 2001 From: Ben Allen Date: Tue, 22 Aug 2023 20:49:22 -0700 Subject: [PATCH 1/7] revision to Intl.DurationFormat.format to reflect recent normative changes related to fractionalDigits option --- .../intl/durationformat/format/index.md | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md index 047d47e9117719b..a4ac7be8a15b547 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md @@ -20,11 +20,13 @@ format(duration) ### Parameters - `duration` - - : The duration object to be formatted. It should include some or all of the following properties: `"months"`, `"weeks"`, `"days"`, `"hours"`, `"minutes"`, `"seconds"`, `"milliseconds"`, `"microseconds"`, `"nanoseconds"`. + - : The duration object to be formatted. It should include some or all of the following properties: `months`, `weeks`, `days`, `hours`, `minutes`, `seconds`, `milliseconds`, `microseconds`, `nanoseconds`. ## Examples -### Using format with an object as parameter +### Using format + +The following example shows how to create a Duration formatter using the English language. ```js const duration = { @@ -42,15 +44,7 @@ const duration = { // Without options, style defaults to "short" new Intl.DurationFormat("en").format(duration); -// "1 yr, 2 mths, 3 wks, 3 days, 4 hr, 5 min, 6 sec, 7 ms, 8 μs, 9 ns" - -// With style set to "long" -new Intl.DurationFormat("en", { style: "long" }).format(duration); -// "1 year, 2 months, 3 weeks, 3 days, 4 hours, 5 minutes, 6 seconds, 7 milliseconds, 8 microseconds, 9 nanoseconds" - -// With style set to "narrow" -new Intl.DurationFormat("en", { style: "narrow" }).format(duration); -// "1y 2mo 3w 3d 4h 5m 6s 7ms 8μs 9ns" +// "1 yr, 2 mths, 3 wks, 3 days, 4 hr, 5 min, 6 sec, 7 ms, 8 μs, 9 ns" ``` ### Using format() with different locales and styles @@ -64,42 +58,48 @@ const duration = { // With style set to "long" and locale "fr-FR" new Intl.DurationFormat("fr-FR", { style: "long" }).format(duration); -// "1 heure, 46 minutes et 40 secondes" +// "1 heure, 46 minutes et 40 secondes" // With style set to "short" and locale set to "en" new Intl.DurationFormat("en", { style: "short" }).format(duration); -// "1 hr, 46 min and 40 sec" +// "1 hr, 46 min and 40 sec" // With style set to "short" and locale set to "pt" new Intl.DurationFormat("pt", { style: "narrow" }).format(duration); -// "1h 46min 40s" +// "1h 46min 40s" // With style set to "digital" and locale set to "en" new Intl.DurationFormat("en", { style: "digital" }).format(duration); // "1:46:40" -``` -### Using format with fractionalDigits option +// With style set to "digital", locale set to "en", and hours set to "long" +new Intl.DurationFormat("en", { style: "digital" }).format(duration); +// "1 hour, 46:40" +``` -Use the `format` getter function for formatting using with fractionalDigits options and setting milliseconds display to `narrow`. +### Using the fractionalDigits option ```js const duration = { + hours: 11, + minutes: 30, seconds: 12, milliseconds: 345, microseconds: 600, }; -// Example using fractionalDigits -new Intl.DurationFormat("en", { fractionalDigits: 2 }).format(duration); -// => 12 sec, 345 ms, 600 μs +new Intl.DurationFormat("en", { style: "digital" }).format(duration); +// "11:30:12.3456" + +new Intl.DurationFormat("en", { style: "digital", fractionalDigits: 5 }).format( + duration, +); +// "11:30:12.34560" -// Example using fractionalDigits and milliseconds set to `long` -new Intl.DurationFormat("en", { - milliseconds: "long", - fractionalDigits: 2, -}).format(duration); -// => 12 sec, 345 milliseconds, 600 μs +new Intl.DurationFormat("en", { style: "digital", fractionalDigits: 3 }).format( + duration, +); +// "11:30:12.346" ``` ## Specifications From 7352b1b275295a371d79e420388ee0e85a261687 Mon Sep 17 00:00:00 2001 From: Ben Allen Date: Wed, 23 Aug 2023 01:58:02 -0700 Subject: [PATCH 2/7] regularize headings --- .../global_objects/intl/durationformat/format/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md index a4ac7be8a15b547..429b6e5d9cdafa1 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md @@ -47,7 +47,7 @@ new Intl.DurationFormat("en").format(duration); // "1 yr, 2 mths, 3 wks, 3 days, 4 hr, 5 min, 6 sec, 7 ms, 8 μs, 9 ns" ``` -### Using format() with different locales and styles +### Using format with different locales and styles ```js const duration = { @@ -77,7 +77,7 @@ new Intl.DurationFormat("en", { style: "digital" }).format(duration); // "1 hour, 46:40" ``` -### Using the fractionalDigits option +### Using format with the fractionalDigits option ```js const duration = { From 5cb3908b21a23dd2c955ea2634e493f3458baec1 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Wed, 23 Aug 2023 12:30:35 -0400 Subject: [PATCH 3/7] Apply suggestions from code review --- .../intl/durationformat/format/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md index 429b6e5d9cdafa1..2a725dc40c16158 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md @@ -24,7 +24,7 @@ format(duration) ## Examples -### Using format +### Using format() The following example shows how to create a Duration formatter using the English language. @@ -47,7 +47,7 @@ new Intl.DurationFormat("en").format(duration); // "1 yr, 2 mths, 3 wks, 3 days, 4 hr, 5 min, 6 sec, 7 ms, 8 μs, 9 ns" ``` -### Using format with different locales and styles +### Using format() with different locales and styles ```js const duration = { @@ -58,15 +58,15 @@ const duration = { // With style set to "long" and locale "fr-FR" new Intl.DurationFormat("fr-FR", { style: "long" }).format(duration); -// "1 heure, 46 minutes et 40 secondes" +// "1 heure, 46 minutes et 40 secondes" // With style set to "short" and locale set to "en" new Intl.DurationFormat("en", { style: "short" }).format(duration); -// "1 hr, 46 min and 40 sec" +// "1 hr, 46 min and 40 sec" // With style set to "short" and locale set to "pt" new Intl.DurationFormat("pt", { style: "narrow" }).format(duration); -// "1h 46min 40s" +// "1h 46min 40s" // With style set to "digital" and locale set to "en" new Intl.DurationFormat("en", { style: "digital" }).format(duration); @@ -77,7 +77,7 @@ new Intl.DurationFormat("en", { style: "digital" }).format(duration); // "1 hour, 46:40" ``` -### Using format with the fractionalDigits option +### Using format() with the fractionalDigits option ```js const duration = { From 44b2ad0a52067d7b43df74644f1a4e63b89e381f Mon Sep 17 00:00:00 2001 From: Ben Allen Date: Mon, 28 Aug 2023 06:24:32 -0700 Subject: [PATCH 4/7] restored two removed examples (style: "long" and style: "narrow") --- .../global_objects/intl/durationformat/format/index.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md index 2a725dc40c16158..6c4df20b49330a3 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md @@ -48,6 +48,15 @@ new Intl.DurationFormat("en").format(duration); ``` ### Using format() with different locales and styles +// With style set to "long" +new Intl.DurationFormat("en", { style: "long" }).format(duration); +// "1 year, 2 months, 3 weeks, 3 days, 4 hours, 5 minutes, 6 seconds, 7 milliseconds, 8 microseconds, 9 nanoseconds" + +// With style set to "narrow" +new Intl.DurationFormat("en", { style: "narrow" }).format(duration); +// "1y 2mo 3w 3d 4h 5m 6s 7ms 8μs 9ns" + +### Using format with different locales and styles ```js const duration = { From bf7dfc67cd6357e438919b5f0d587b459e812c5d Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Mon, 28 Aug 2023 09:39:21 -0400 Subject: [PATCH 5/7] Fixes --- .../global_objects/intl/durationformat/format/index.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md index 6c4df20b49330a3..0f925af29d045b8 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md @@ -45,9 +45,7 @@ const duration = { // Without options, style defaults to "short" new Intl.DurationFormat("en").format(duration); // "1 yr, 2 mths, 3 wks, 3 days, 4 hr, 5 min, 6 sec, 7 ms, 8 μs, 9 ns" -``` -### Using format() with different locales and styles // With style set to "long" new Intl.DurationFormat("en", { style: "long" }).format(duration); // "1 year, 2 months, 3 weeks, 3 days, 4 hours, 5 minutes, 6 seconds, 7 milliseconds, 8 microseconds, 9 nanoseconds" @@ -55,8 +53,9 @@ new Intl.DurationFormat("en", { style: "long" }).format(duration); // With style set to "narrow" new Intl.DurationFormat("en", { style: "narrow" }).format(duration); // "1y 2mo 3w 3d 4h 5m 6s 7ms 8μs 9ns" +``` -### Using format with different locales and styles +### Using format() with different locales and styles ```js const duration = { @@ -82,7 +81,7 @@ new Intl.DurationFormat("en", { style: "digital" }).format(duration); // "1:46:40" // With style set to "digital", locale set to "en", and hours set to "long" -new Intl.DurationFormat("en", { style: "digital" }).format(duration); +new Intl.DurationFormat("en", { style: "digital", hours: "long" }).format(duration); // "1 hour, 46:40" ``` From 81c75ff4e96048fb5d05cf57280cfeedd637f988 Mon Sep 17 00:00:00 2001 From: Ben Allen Date: Mon, 28 Aug 2023 06:41:49 -0700 Subject: [PATCH 6/7] Update files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../global_objects/intl/durationformat/format/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md index 0f925af29d045b8..71e16f94a88380f 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md @@ -81,7 +81,9 @@ new Intl.DurationFormat("en", { style: "digital" }).format(duration); // "1:46:40" // With style set to "digital", locale set to "en", and hours set to "long" -new Intl.DurationFormat("en", { style: "digital", hours: "long" }).format(duration); +new Intl.DurationFormat("en", { style: "digital", hours: "long" }).format( + duration, +); // "1 hour, 46:40" ``` From a5f5435a38ed05f8c0e4a62cce2effc64839e920 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Mon, 28 Aug 2023 09:42:27 -0400 Subject: [PATCH 7/7] Update index.md --- .../global_objects/intl/durationformat/format/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md index 71e16f94a88380f..7051ff68d5cbf32 100644 --- a/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md +++ b/files/en-us/web/javascript/reference/global_objects/intl/durationformat/format/index.md @@ -44,7 +44,7 @@ const duration = { // Without options, style defaults to "short" new Intl.DurationFormat("en").format(duration); -// "1 yr, 2 mths, 3 wks, 3 days, 4 hr, 5 min, 6 sec, 7 ms, 8 μs, 9 ns" +// "1 yr, 2 mths, 3 wks, 3 days, 4 hr, 5 min, 6 sec, 7 ms, 8 μs, 9 ns" // With style set to "long" new Intl.DurationFormat("en", { style: "long" }).format(duration);