Reference for new Intl.Locale.p.variants (#40497)

Author: Josh-Cena

files/en-us/web/javascript/guide/internationalization/index.md

@@ -48,11 +48,12 @@ new Intl.SomeObject(locales, options)
 
 Locales underlie all behaviors of `Intl`. A _locale_ is a set of conventions, represented in the `Intl` API by the {{jsxref("Intl.Locale")}} object. All `Intl` constructors that accept language tags also accept `Intl.Locale` objects.
 
-Each locale is primarily defined by three things: a {{jsxref("Intl/Locale/language", "language")}}, a {{jsxref("Intl/Locale/script", "script")}}, and a {{jsxref("Intl/Locale/region", "region")}}. When connected together by `-` in that order, they form a [BCP 47 language tag](https://datatracker.ietf.org/doc/html/rfc5646).
+Each locale is primarily defined by four things: a {{jsxref("Intl/Locale/language", "language")}}, a {{jsxref("Intl/Locale/script", "script")}}, a {{jsxref("Intl/Locale/region", "region")}}, and sometimes some {{jsxref("Intl/Locale/variants", "variants")}}. When connected together by `-` in that order, they form a [BCP 47 language tag](https://datatracker.ietf.org/doc/html/rfc5646).
 
 - The language is the most important part of the locale and is mandatory. When given a single language, like `en` or `fr`, there are algorithms to infer the rest of the information (see {{jsxref("Intl/Locale/maximize", "Intl.Locale.prototype.maximize()")}}).
 - However, you often want to specify the region as well, because conventions can differ drastically between regions that speak the same language. For example, the date format in the US is MM/DD/YYYY, whereas in the UK it is DD/MM/YYYY, so specifying `en-US` or `en-GB` is important.
 - You can also specify a script. The script is the writing system, or the characters used to transcribe the language. In practice, the script is often unnecessary, because the language used in a certain region is only written in one script. However, there are exceptions such as the Serbian language, which can be written in both the Latin and Cyrillic scripts (`sr-Latn` and `sr-Cyrl`), or the Chinese language, which can be written in both the Simplified and Traditional scripts (`zh-Hans` and `zh-Hant`).
+- The variants are rarely used. Usually, they denote different orthographies; for example, German has the `1901` and `1996` orthography variants, which are written as `de-1901` and `de-1996`.
 
 ```js
 // These two are equivalent when passed to other Intl APIs

files/en-us/web/javascript/reference/global_objects/intl/locale/basename/index.md

@@ -7,7 +7,7 @@ browser-compat: javascript.builtins.Intl.Locale.baseName
 sidebar: jsref
 ---
 
-The **`baseName`** accessor property of {{jsxref("Intl.Locale")}} instances returns a substring of this locale's string representation, containing core information about this locale, including the language, and the script and region if available.
+The **`baseName`** accessor property of {{jsxref("Intl.Locale")}} instances returns a substring of this locale's string representation, containing core information about this locale, including the language, script, region, and variants, if available.
 
 ## Description
 
@@ -17,34 +17,32 @@ The set accessor of `baseName` is `undefined`. You cannot change this property d
 
 ## Examples
 
-### Basic Example
+### Basic example
 
 ```js
 const myLoc = new Intl.Locale("fr-Latn-CA"); // Sets locale to Canadian French
-console.log(myLoc.toString()); // Prints out "fr-Latn-CA-u-ca-gregory"
-console.log(myLoc.baseName); // Prints out "fr-Latn-CA"
+console.log(myLoc.toString()); // "fr-Latn-CA-u-ca-gregory"
+console.log(myLoc.baseName); // "fr-Latn-CA"
 ```
 
-### Example with options in the input string
+### Example with extension tags in the input string
 
 ```js
 // Sets language to Japanese, region to Japan,
-
 // calendar to Gregorian, hour cycle to 24 hours
 const japan = new Intl.Locale("ja-JP-u-ca-gregory-hc-24");
-console.log(japan.toString()); // Prints out "ja-JP-u-ca-gregory-hc-h24"
-console.log(japan.baseName); // Prints out "ja-JP"
+console.log(japan.toString()); // "ja-JP-u-ca-gregory-hc-h24"
+console.log(japan.baseName); // "ja-JP"
 ```
 
 ### Example with options that override input string
 
 ```js
 // Input string indicates language as Dutch and region as Belgium,
-
 // but options object overrides the region and sets it to the Netherlands
 const dutch = new Intl.Locale("nl-Latn-BE", { region: "NL" });
 
-console.log(dutch.baseName); // Prints out "nl-Latn-NL"
+console.log(dutch.baseName); // "nl-Latn-NL"
 ```
 
 ## Specifications

files/en-us/web/javascript/reference/global_objects/intl/locale/calendar/index.md

@@ -11,9 +11,9 @@ The **`calendar`** accessor property of {{jsxref("Intl.Locale")}} instances retu
 
 ## Description
 
-While most of the world uses the Gregorian calendar, there are several regional calendar eras used around the world. The `calendar` property's value is set at construction time, either through the `ca` key of the locale identifier or through the `calendar` option of the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor. The latter takes priority if they are both present; and if neither is present, the property has value `undefined`.
+While most of the world uses the Gregorian calendar, there are several regional calendar eras used around the world. For a list of supported calendar types, see [`Intl.supportedValuesOf()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/supportedValuesOf#supported_calendar_types).
 
-For a list of supported calendar types, see [`Intl.supportedValuesOf()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/supportedValuesOf#supported_calendar_types).
+The `calendar` property's value is set at construction time, either through the `ca` key of the locale identifier or through the `calendar` option of the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor. The latter takes priority if they are both present; and if neither is present, the property has value `undefined`.
 
 The set accessor of `calendar` is `undefined`. You cannot change this property directly.
 
@@ -23,11 +23,11 @@ Like other locale subtags, the calendar type can be added to the {{jsxref("Intl.
 
 ### Adding a calendar type via the locale string
 
-In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), calendar era types are locale key "extension subtags". These subtags add additional data about the locale, and are added to locale identifiers by using the `-u` extension. Thus, the calendar era type can be added to the initial locale identifier string that is passed into the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor. To add the calendar type, first add the `-u` extension to the string. Next, add the `-ca` extension to indicate that you are adding a calendar type. Finally, add the calendar era type to the string.
+In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), `calendar` is an "extension subtag". These subtags add additional data about the locale, and are added to locale identifiers using the `-u` extension key. To add the calendar type to the initial locale identifier string passed into the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor, first add the `-u` extension key if it doesn't exist. Next, add the `-ca` extension to indicate that you are adding a calendar type. Finally, add the calendar era type.
 
 ```js
 const locale = new Intl.Locale("fr-FR-u-ca-buddhist");
-console.log(locale.calendar); // Prints "buddhist"
+console.log(locale.calendar); // "buddhist"
 ```
 
 ### Adding a calendar type via the configuration object argument

files/en-us/web/javascript/reference/global_objects/intl/locale/casefirst/index.md

@@ -11,36 +11,38 @@ The **`caseFirst`** accessor property of {{jsxref("Intl.Locale")}} instances ret
 
 ## Description
 
-A locale's collation rules are used to determine how strings are ordered in that locale. Certain locales use a character's case (UPPERCASE or lowercase) in the collation process. This additional rule can be expressed in a {{jsxref("Intl.Locale")}} object's `caseFirst` property.
-
-There are 3 values that the `caseFirst` property can have, outlined in the table below.
-
-### `caseFirst` values
+A locale's collation rules are used to determine how strings are ordered in that locale. Certain locales use a character's case (UPPERCASE or lowercase) in the collation process. This additional rule can be expressed in a {{jsxref("Intl.Locale")}} object's `caseFirst` property. There are 3 values that the `caseFirst` property can have, outlined in the table below.
 
 | Value   | Description                                |
 | ------- | ------------------------------------------ |
 | `upper` | Upper case to be sorted before lower case. |
 | `lower` | Lower case to be sorted before upper case. |
 | `false` | No special case ordering.                  |
 
+The `caseFirst` property's value is set at construction time, either through the `kf` key of the locale identifier or through the `caseFirst` option of the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor. The latter takes priority if they are both present; and if neither is present, the property has value `undefined`.
+
+The set accessor of `caseFirst` is `undefined`. You cannot change this property directly.
+
 ## Examples
 
-### Setting the caseFirst value via the locale string
+Like other locale subtags, the `caseFirst` value can be added to the {{jsxref("Intl.Locale")}} object via the locale string, or a configuration object argument to the constructor.
+
+### Adding a caseFirst value via the locale string
 
-In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), the values that `caseFirst` represents correspond to the key `kf`. `kf` is treated as a locale string "extension subtag". These subtags add additional data about the locale, and are added to locale identifiers by using the `-u` extension key. Thus, the `caseFirst` value can be added to the initial locale identifier string that is passed into the `Locale` constructor. To add the `caseFirst` value, first add the `-u` extension key to the string. Next, add the `-kf` extension key to indicate that you are adding a value for `caseFirst`. Finally, add the `caseFirst` value to the string.
+In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), `caseFirst` is an "extension subtag". These subtags add additional data about the locale, and are added to locale identifiers using the `-u` extension key. To add the `caseFirst` value to the initial locale identifier string passed into the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor, first add the `-u` extension key if it doesn't exist. Next, add the `-kf` extension to indicate that you are adding a value for `caseFirst`. Finally, add the `caseFirst` value.
 
 ```js
 const locale = new Intl.Locale("fr-Latn-FR-u-kf-upper");
-console.log(locale.caseFirst); // Prints "upper"
+console.log(locale.caseFirst); // "upper"
 ```
 
-### Setting the caseFirst value via the configuration object argument
+### Adding a caseFirst value via the configuration object argument
 
-The {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor has an optional configuration object argument, which can be used to pass extension types. Set the `caseFirst` property of the configuration object to your desired `caseFirst` value, and then pass it into the constructor.
+The {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor has an optional configuration object argument, which can contain any of several extension types, including `caseFirst`. Set the `caseFirst` property of the configuration object to your desired `caseFirst` value, and then pass it into the constructor.
 
 ```js
 const locale = new Intl.Locale("en-Latn-US", { caseFirst: "lower" });
-console.log(locale.caseFirst); // Prints "lower"
+console.log(locale.caseFirst); // "lower"
 ```
 
 ## Specifications

files/en-us/web/javascript/reference/global_objects/intl/locale/collation/index.md

@@ -11,9 +11,9 @@ The **`collation`** accessor property of {{jsxref("Intl.Locale")}} instances ret
 
 ## Description
 
-Collation is the process of ordering strings of characters. It is used whenever strings must be sorted and placed into a certain order, from search query results to ordering records in a database. While the idea of placing strings in order might seem trivial, the idea of order can vary from region to region and language to language. The `collation` property's value is set at construction time, either through the `co` key of the locale identifier or through the `collation` option of the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor. The latter takes priority if they are both present; and if neither is present, the property has value `undefined`.
+Collation is the process of ordering strings of characters. It is used whenever strings must be sorted and placed into a certain order, from search query results to ordering records in a database. While the idea of placing strings in order might seem trivial, the idea of order can vary from region to region and language to language. For a list of supported collation types, see [`Intl.supportedValuesOf()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/supportedValuesOf#supported_collation_types).
 
-For a list of supported collation types, see [`Intl.supportedValuesOf()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/supportedValuesOf#supported_collation_types).
+The `collation` property's value is set at construction time, either through the `co` key of the locale identifier or through the `collation` option of the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor. The latter takes priority if they are both present; and if neither is present, the property has value `undefined`.
 
 The set accessor of `collation` is `undefined`. You cannot change this property directly.
 
@@ -23,7 +23,7 @@ Like other locale subtags, the collation type can be added to the {{jsxref("Intl
 
 ### Adding a collation type via the locale string
 
-In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), collation types are locale key "extension subtags". These subtags add additional data about the locale, and are added to locale identifiers by using the `-u` extension. Thus, the collation type can be added to the initial locale identifier string that is passed into the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor. To add the collation type, first add the `-u` extension to the string. Next, add the `-co` extension to indicate that you are adding a collation type. Finally, add the collation type to the string.
+In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), `collation` is an "extension subtag". These subtags add additional data about the locale, and are added to locale identifiers using the `-u` extension key. To add the collation type to the initial locale identifier string passed into the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor, first add the `-u` extension key if it doesn't exist. Next, add the `-co` extension to indicate that you are adding a collation type. Finally, add the collation type.
 
 ```js
 const locale = new Intl.Locale("zh-Hant-u-co-zhuyin");

files/en-us/web/javascript/reference/global_objects/intl/locale/hourcycle/index.md

@@ -11,9 +11,9 @@ The **`hourCycle`** accessor property of {{jsxref("Intl.Locale")}} instances ret
 
 ## Description
 
-There are 2 main types of time keeping conventions (clocks) used around the world: the 12 hour clock and the 24 hour clock. The `hourCycle` property's value is set at construction time, either through the `hc` key of the locale identifier or through the `hourCycle` option of the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor. The latter takes priority if they are both present; and if neither is present, the property has value `undefined`.
+There are 2 main types of time keeping conventions (clocks) used around the world: the 12 hour clock and the 24 hour clock. For a list of supported hour cycle types, see [`Intl.Locale.prototype.getHourCycles()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getHourCycles#supported_hour_cycle_types).
 
-For a list of supported hour cycle types, see [`Intl.Locale.prototype.getHourCycles()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getHourCycles#supported_hour_cycle_types).
+The `hourCycle` property's value is set at construction time, either through the `hc` key of the locale identifier or through the `hourCycle` option of the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor. The latter takes priority if they are both present; and if neither is present, the property has value `undefined`.
 
 The set accessor of `hourCycle` is `undefined`. You cannot change this property directly.
 
@@ -23,7 +23,7 @@ Like other locale subtags, the hour cycle type can be added to the {{jsxref("Int
 
 ### Adding an hour cycle via the locale string
 
-In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), hour cycle types are locale key "extension subtags". These subtags add additional data about the locale, and are added to locale identifiers by using the `-u` extension. Thus, the hour cycle type can be added to the initial locale identifier string that is passed into the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor. To add the hour cycle type, first add the `-u` extension key to the string. Next, add the `-hc` extension to indicate that you are adding an hour cycle. Finally, add the hour cycle type to the string.
+In the [Unicode locale string spec](https://www.unicode.org/reports/tr35/), `hourCycle` is an "extension subtag". These subtags add additional data about the locale, and are added to locale identifiers using the `-u` extension key. To add the hour cycle type to the initial locale identifier string passed into the {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} constructor, first add the `-u` extension key if it doesn't exist. Next, add the `-hc` extension to indicate that you are adding an hour cycle. Finally, add the hour cycle type.
 
 ```js
 const locale = new Intl.Locale("fr-FR-u-hc-h23");