Internationalization and Localization
JS INTL APIs
Support for a subset of ECMA-402 INTL APIs has been added to the Hermes Engine bundled with React Native for Kepler.
For more information, see https://hermesengine.dev/docs/intl/.
The INTL methods supported may differ for Kepler than for other platforms, refer to details below for supported methods.
INTL API reference
The following APIs are provide as Kepler specific implementations of the APIs provided in the Intl namespace as defined in the ECMA-402 standard.
Intl.DateTimeFormat
The Intl.DateTimeFormat object enables language-sensitive date and time formatting.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat.
Intl.DateTimeFormat.format
The format() method formats a date according to the locale and formatting options of the Intl.DateTimeFormat object.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format.
const options1: Intl.DateTimeFormatOptions = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
};
// Intl.DateTimeFormat.format()
const prototypeFormat= ()=>{
const date1 = new Date(2012, 5);
const dateTimeFormat2 = new Intl.DateTimeFormat('en-GB', options1);
return dateTimeFormat2.format(date1)
}
Intl.DateTimeFormat.formatRange
The formatRange() method formats a date range in the most concise way based on the locales and options provided when the Intl.DateTimeFormat object was instantiated.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange.
const options1: Intl.DateTimeFormatOptions = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
};
// Intl.DateTimeFormat.formatRange()
const formatRange = () => {
const startDate = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
const endDate = new Date(Date.UTC(2008, 0, 10, 11, 0, 0));
const dateTimeFormat = new Intl.DateTimeFormat('en', options1);
return dateTimeFormat.formatRange(startDate, endDate);
};
Intl.DateTimeFormat.formatRangeToParts
The formatRangeToParts() returns an array of locale-specific tokens representing each part of the formatted date range produced by the Intl.DateTimeFormat object.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts.
const formatRangeToParts = () => {
const startDate = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
const endDate = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
const dateTimeFormat = new Intl.DateTimeFormat('en', {
hour: 'numeric',
minute: 'numeric',
});
return dateTimeFormat.formatRangeToParts(startDate, endDate);
};
Intl.DateTimeFormat.formatToParts
The formatToParts() method allows locale-aware formatting of strings produced by the Intl.DateTimeFormat object.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts.
const options1: Intl.DateTimeFormatOptions = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
};
// Intl.DateTimeFormat.formatToParts()
const prototypeFormatToParts= ()=>{
const date = new Date(2012, 5);
const dateTimeFormat = new Intl.DateTimeFormat('en-US', options1);
const parts = dateTimeFormat.formatToParts(date);
return parts.map((p) => p.value);
}
Intl.DateTimeFormat.resolvedOptions
The resolvedOptions() method returns a new object with properties reflecting the locale and date and time formatting options specified during the initialization of the Intl.DateTimeFormat object.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions.
// Intl.DateTimeFormat.resolvedOptions()
const prototypeResolvedOptions = () => {
const region1 = new Intl.DateTimeFormat('zh-CN', {timeZone: 'UTC'});
const options1 = region1.resolvedOptions();
return `Locale - ${options1.locale}, Calendar - ${options1.calendar}, Numbering System - ${options1.numberingSystem}`
};
Intl.DateTimeFormat.supportedLocalesOf
The supportedLocalesOf() is a static method that returns an array containing the provided locales that are supported by date and time formatting without having to fall back to the runtime's default locale.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf.
// Intl.DateTimeFormat.supportedLocalesOf()
const supportedLocalesOf = () => {
const locales1 = ['ban', 'id-u-co-pinyin', 'de-ID'];
const options: Intl.DateTimeFormatOptions = {localeMatcher: 'lookup'};
return Intl.DateTimeFormat.supportedLocalesOf(locales1, options);
};
Intl.RelativeTimeFormat
The RelativeTimeFormat object enables language-sensitive relative time formatting.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat.
Intl.RelativeTimeFormat() returns a new Intl.RelativeTimeFormat object.
Intl.RelativeTimeFormat.format
The format() method returns a value and a unit formatted according to the locale and formatting options of the Intl.RelativeTimeFormat object.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/format.
const time = 3;
const unit = 'quarter';
const formatOptions: Intl.RelativeTimeFormatOptions = {style: 'short'};
const formatRelativeTime = () => {
const formatter = new Intl.RelativeTimeFormat('en', formatOptions);
return formatter.format(time, unit);
};
Intl.RelativeTimeFormat.formatToParts
The formatToParts() method returns an Array of objects representing the relative time format in parts that can be used for custom locale-aware formatting.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/formatToParts.
// formatToParts
const formatToPartsOptions: Intl.RelativeTimeFormatOptions = {
numeric: 'auto',
};
const formatToPartsTime = 15;
const formatToPartsUnit = 'seconds';
const formatToPartsRelativeTime = () => {
const formatter = new Intl.RelativeTimeFormat('en', formatToPartsOptions);
return formatter.formatToParts(formatToPartsTime, formatToPartsUnit);
};
Intl.RelativeTimeFormat.resolvedOptions
The resolvedOptions() method returns a new object with properties reflecting the locale and relative time formatting options specified during initialization of the Intl.RelativeTimeFormat object.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/resolvedOptions.
// resolve option
const resolvedOption: Intl.RelativeTimeFormatOptions = {style: 'narrow'};
const resolvedOptionObj = () => {
return new Intl.RelativeTimeFormat('en', resolvedOption).resolvedOptions();
};
Intl.RelativeTimeFormat.supportedLocalesOf
The supportedLocalesOf() static method returns an Array locales from the supplied array of input locales that are supported in relative time formatting without having to fall back to the runtime's default locale.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf.
// supportedLocalesOf
const supportedLocales = ['ban', 'id-u-co-pinyin', 'de-ID'];
const options: Intl.RelativeTimeFormatOptions = {localeMatcher: 'lookup'};
const supportedLocalesOfObj = () => {
const supportedLocalesOf = Intl.RelativeTimeFormat.supportedLocalesOf(
supportedLocales,
options,
);
return supportedLocalesOf;
};
Intl.NumberFormat
The Intl.NumberFormat object enables language-sensitive number formatting.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat.
Intl.NumberFormat() Creates a new NumberFormat object.
Intl.NumberFormat.format
The format() method formats a number according to the locale and formatting options of the Intl.NumberFormat object.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format.
const format = () => {
const number = 123456.789;
return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(
number,
);
}
// Expected output: "123.456,79 €"
Intl.NumberFormat.formatRange
The formatRange() method formats a range of numbers according to the locale and formatting options of the Intl.NumberFormat object.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange.
const formatRange = () => {
const nf = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
maximumFractionDigits: 0,
});
return nf.formatRange(3, 5);
};
Intl.NumberFormat.formatRangeToParts
The formatRangeToParts() returns an Array of objects containing the locale-specific tokens from which it is possible to build custom strings while preserving the locale-specific parts. This enables locale-aware custom formatting ranges of number strings.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRangeToParts.
const formatRangeToParts = () => {
const startRange = 3500;
const endRange = 9500;
const formatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
});
return formatter.formatRangeToParts(startRange, endRange);
};
Intl.NumberFormat.formatToParts
The formatToParts() method returns locale-aware formatting of strings produced by this Intl.NumberFormat object.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts.
const formatToParts = () => {
const amount = 654321.987;
const options: Intl.NumberFormatOptions = {
style: 'currency',
currency: 'USD',
};
const numberFormat = new Intl.NumberFormat('en-US', options);
return numberFormat.formatToParts(amount);
};
Intl.NumberFormat.resolvedOptions
The resolvedOptions() method returns a new object with properties reflecting the locale and number formatting options specified during initialization of the Intl.NumberFormat object.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions.
const resolvedOptions = () => {
const numberFormat1 = new Intl.NumberFormat('de-DE');
const options1 = numberFormat1.resolvedOptions();
return {
locale: options1.locale,
numberingSystem: options1.numberingSystem,
style: options1.style,
};
};
Intl.NumberFormat.supportedLocalesOf
The supportedLocalesOf() static method returns an array containing the locales from the supplied list of locales that are supported in number formatting without having to fall back to the runtime's default locale.
For more detailed information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf.
const supportedLocalesOf = () => {
const locales1 = ['ban', 'id-u-co-pinyin', 'de-ID'];
const options1: Intl.NumberFormatOptions = {localeMatcher: 'lookup'};
return Intl.NumberFormat.supportedLocalesOf(locales1, options1);
};
Intl.Locale
The Intl.Locale object is a standard built-in property of the Intl object that represents a Unicode locale identifier. The Intl.Locale object was created to allow for easier manipulation of Unicode locales. Unicode represents locales with a string, called a locale identifier. The locale identifier consists of a language identifier and extension tags. Language identifiers are the core of the locale, consisting of language, script, and region subtags. Additional information about the locale is stored in the optional extension tags. Extension tags hold information about locale aspects such as calendar type, clock type, and numbering system type.
Traditionally, the Intl API used strings to represent locales, just as Unicode does. This is a simple and lightweight solution that works well. Adding a Locale class, however, adds ease of parsing and manipulating the language, script, and region, as well as extension tags.
For more information about the Intl.Locale object, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale in the MDN Web Docs.
Intl.Locale() creates a new Locale object.
Intl.Locale.maximize()
The maximize() method of Intl.Locale instances gets the most likely values for the language, script, and region of this locale based on existing values.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize.
// Intl.Locale.prototype.maximize()
const LocaleMaximize = (): Intl.Locale => {
const locale = "en";
const option: Intl.LocaleOptions = {
"calendar": "gregory",
"hourCycle": "h12"
};
const result = new Intl.Locale(locale, option).maximize();
console.log(result); // en-Latn-US-u-ca-gregory-hc-h12
return result;
};
Intl.Locale.minimize()
The minimize() method of Intl.Locale instances attempts to remove information about this locale that would be added by calling maximize().
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize.
// Intl.Locale.prototype.minimize()
const LocaleMinimize = (): Intl.Locale => {
const locale = "ar-Arab-EG";
const option: Intl.LocaleOptions = {
"calendar": "gregory",
"hourCycle": "h12"
};
const result = new Intl.Locale(locale, option).minimize();
console.log(result); // ar-u-ca-gregory-hc-h12
return result;
};
Intl.Locale.toString()
The toString() method of Intl.Locale instances returns this Locale's full locale identifier string.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString.
// Intl.Locale.prototype.toString()
const LocaleToString = (): string => {
const locale = "jp";
const option: Intl.LocaleOptions = {
"calendar": "gregory",
"hourCycle": "h12"
};
const result = new Intl.Locale(locale, option).toString();
console.log(result); // "jp-u-ca-gregory-hc-h12"
return result;
};
Intl.Locale.baseName
The baseName accessor property of 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. baseName returns the language ["-" script] ["-" region] *("-" variant) subsequence of the unicode_language_id grammar. It only includes information explicitly specified in the constructor, either through the locale identifier string or the options object.
The set accessor of baseName is undefined. This property cannot be changed directly.
For more infomation, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/baseName.
// Intl.Locale.prototype.baseName
const LocalePropertyBaseName = (): string => {
const locale = 'ko';
const option: Intl.LocaleOptions = {
script: 'Kore',
region: 'KR',
hourCycle: 'h23',
calendar: 'gregory',
};
const result = new Intl.Locale(locale, option).baseName;
console.log(result); // "ko-Kore-KR"
return result;
};
Intl.Locale.calendar
The calendar accessor property of Intl.Locale instances returns the calendar type for this locale. 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 Intl.Locale() constructor. The latter takes priority if they are both present; and if neither is present, the property has value undefined. For a list of supported calendar types, see Intl.Locale.prototype.getCalendars().
The set accessor of calendar is undefined. This property cannot be changed directly.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar.
// Intl.Locale.prototype.calendar
const LocalePropertyCalendar = (): string | undefined => {
const locale = 'ko';
const option: Intl.LocaleOptions = {
script: 'Kore',
region: 'KR',
hourCycle: 'h23',
calendar: 'gregory',
};
const result = new Intl.Locale(locale, option).calendar;
console.log(result); // "gregory"
return result;
};
Intl.Locale.caseFirst
The caseFirst accessor property of Intl.Locale instances returns whether case is taken into account for this locale's collation rules. 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 Intl.Locale object's caseFirst property. There are three values that the caseFirst property can have - upper, lower and false. 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 Intl.Locale() constructor. The latter takes priority if they are both present; and if neither is present, the property has value undefined.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst.
// Intl.Locale.prototype.caseFirst
const LocalePropertyCaseFirst = (): Intl.LocaleCollationCaseFirst | undefined => {
const locale = new Intl.Locale("fr-Latn-FR-u-kf-upper");
const result = locale.caseFirst
console.log(result); // upper
return result;
};
Intl.Locale.collation
The collation accessor property of Intl.Locale instances returns the collation type for this locale, which is used to order strings according to the locale's rules. 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 Intl.Locale() constructor. The latter takes priority if they are both present and if neither is present, the property has value undefined. For a list of supported collation types, see Intl.Locale.prototype.getCollations().
The set accessor of collation is undefined. This property cannot be changed directly.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/collation.
// Intl.Locale.prototype.collation
const LocalePropertyCollation = (): string | undefined => {
const locale = 'zh-Hant-u-co-zhuyin';
const result = new Intl.Locale(locale).collation;
console.log(result); // zhuyin
return result;
};
Intl.Locale.hourCycle
The hourCycle accessor property of Intl.Locale instances returns the hour cycle type for this locale. 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 Intl.Locale() constructor. The latter takes priority if they are both present; and if neither is present, the property has value undefined. For a list of supported hour cycle types, see Intl.Locale.prototype.getHourCycles().
The set accessor of hourCycle is undefined. This property cannot be changed directly.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle.
// Intl.Locale.prototype.hourCycle
const LocalePropertyHourCycle = (): Intl.LocaleHourCycleKey | undefined => {
const locale = 'ko';
const option: Intl.LocaleOptions = {
script: 'Kore',
region: 'KR',
hourCycle: 'h23',
calendar: 'gregory',
};
const result = new Intl.Locale(locale, option).hourCycle;
console.log(result); // "h23"
return result;
};
Intl.Locale.language
The language accessor property of Intl.Locale instances returns the language associated with this locale. Language is one of the core attributes of a locale. The Unicode specification treats the language identifier of a locale as the language and the region together (to make a distinction between dialects and variations, e.g. British English vs. American English). The language property of a Intl.Locale returns strictly the locale's language subtag. The language property's value is set at construction time, either through the language subtag (first part) of the locale identifier or through the language option of the Intl.Locale() constructor. The latter takes priority if they are both present.
The set accessor of language is undefined. This property cannot be changed directly.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/language.
// Intl.Locale.prototype.language
const LocalePropertyLanguage = (): string => {
const locale = 'ko';
const option: Intl.LocaleOptions = {
script: 'Kore',
region: 'KR',
hourCycle: 'h23',
calendar: 'gregory',
};
const result = new Intl.Locale(locale, option).language;
console.log(result); // "ko"
return result;
};
Intl.Locale.numberingSystem
The numberingSystem accessor property of Intl.Locale instances returns the numeral system for this locale. A numeral system is a system for expressing numbers. The numberingSystem property's value is set at construction time, either through the nu key of the locale identifier or through the numberingSystem option of the Intl.Locale() constructor. The latter takes priority if they are both present; and if neither is present, the property has value undefined. For a list of supported numbering system types, see Intl.Locale.prototype.getNumberingSystems().
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem.
// Intl.Locale.prototype.numberingSystem
const LocalePropertyNumberingSystem = (): string | undefined => {
const locale = 'ko';
const option: Intl.LocaleOptions = {
script: 'Kore',
region: 'KR',
hourCycle: 'h23',
calendar: 'gregory',
numberingSystem: 'latn'
};
const result = new Intl.Locale(locale, option).numberingSystem;
console.log(result); // "latn"
return result;
};
Intl.Locale.numeric
The numeric accessor property of Intl.Locale instances returns whether this locale has special collation handling for numeric characters. Like caseFirst, numeric represents a modification to the collation rules utilized by the locale. numeric is a boolean value, which means that it can be either true or false. If numeric is set to false, there will be no special handling of numeric values in strings. If numeric is set to true, then the locale will take numeric characters into account when collating strings. This special numeric handling means that sequences of decimal digits will be compared as numbers.
For example, the string "A-21" will be considered less than "A-123".
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numeric.
// Intl.Locale.prototype.numeric
const LocalePropertyNumeric = (): boolean | undefined => {
const locale = 'ko';
const option: Intl.LocaleOptions = {
script: 'Kore',
region: 'KR',
hourCycle: 'h23',
calendar: 'gregory',
numeric: true
};
const result = new Intl.Locale(locale, option).numeric;
console.log(result); // true
return result;
};
Intl.Locale.region
The region accessor property of Intl.Locale instances returns the region of the world (usually a country) associated with this locale. Region is one of the core attributes of a locale. It allows selection for differences between the same language in, say, different countries.
For example, English is spoken in the United Kingdom and the United States of America, but there are differences in spelling and other language conventions between those two countries. Knowing the locale's region helps JavaScript programmers make sure that the content from their sites and applications is correctly displayed when viewed from different areas of the world. The region property's value is set at construction time, either through the region subtag (third part if script is present, second part otherwise) of the locale identifier or through the region option of the 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 region is undefined. This property cannot be changed directly.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/region.
// Intl.Locale.prototype.region
const LocalePropertyRegion = (): string | undefined => {
const locale = 'ko';
const option: Intl.LocaleOptions = {
script: 'Kore',
region: 'KR',
hourCycle: 'h23',
calendar: 'gregory',
};
const result = new Intl.Locale(locale, option).region;
console.log(result); // "KR"
return result;
};
Intl.Locale.script
The script accessor property of Intl.Locale instances returns the script used for writing the particular language used in this locale Script, sometimes called writing system, is one of the core attributes of a locale. It indicates the set of symbols, or glyphs, that are used to write a particular language. For instance, the script associated with English is Latin, whereas the script typically associated with Korean is Hangul. In many cases, denoting a script is not strictly necessary, since the language (which is necessary) is only written in a single script. There are exceptions to this rule, however, and it is important to indicate the script when multiple scripts are applicable. The script property's value is set at construction time, either through the script subtag (second part, if present) of the locale identifier or through the script option of the 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 script is undefined. This property cannot be changed directly.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/script.
// Intl.Locale.prototype.script
const LocalePropertyScript = (): string | undefined => {
const locale = 'ko';
const option: Intl.LocaleOptions = {
script: 'Kore',
region: 'KR',
hourCycle: 'h23',
calendar: 'gregory',
numeric: true
};
const result = new Intl.Locale(locale, option).script;
console.log(result); // "Kore"
return result;
};
Intl.Collator example
The Intl.Collator object enables language-sensitive string comparison.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator.
import React, { useState } from 'react';
import { AppRegistry, I18nManager, ScrollView, StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
intlText: {
fontSize: 18,
color: 'white',
}
});
const I18nManagerApp = () => {
const ac = Intl ? new Intl.Collator().compare('a', 'c') : "Intl not avaliable";
const ca = Intl ? new Intl.Collator().compare('c', 'a') : "Intl not avaliable";
const aa = Intl ? new Intl.Collator().compare('a', 'a') : "Intl not avaliable";
const de = Intl ? new Intl.Collator('de').compare('ä', 'z') : "Intl not avaliable";
const sv = Intl ? new Intl.Collator('sv').compare('ä', 'z') : "Intl not avaliable";
const des = Intl ? new Intl.Collator('de', { sensitivity: 'base' }).compare('ä', 'a') : "Intl not avaliable";
const svs = Intl ? new Intl.Collator('sv', { sensitivity: 'base' }).compare('ä', 'a') : "Intl not avaliable";
const des_base = Intl ? new Intl.Collator('de', { sensitivity: 'base' }).compare('äbc', 'abc') : "Intl not avaliable";
const svs_base = Intl ? new Intl.Collator('sv', { sensitivity: 'base' }).compare('äbc', 'abc') : "Intl not avaliable";
const des_accent = Intl ? new Intl.Collator('de', { sensitivity: 'accent' }).compare('äbc', 'abc') : "Intl not avaliable";
const svs_accent = Intl ? new Intl.Collator('sv', { sensitivity: 'accent' }).compare('äbc', 'abc') : "Intl not avaliable";
const desc_base = Intl ? new Intl.Collator('de', { sensitivity: 'base' }).compare('abcDef', 'abcdef') : "Intl not avaliable";
const desc_accent = Intl ? new Intl.Collator('de', { sensitivity: 'accent' }).compare('abcDef', 'abcdef') : "Intl not avaliable";
const desc_case = Intl ? new Intl.Collator('de', { sensitivity: 'case' }).compare('abcDef', 'abcdef') : "Intl not avaliable";
const desc_variant = Intl ? new Intl.Collator('de', { sensitivity: 'variant' }).compare('abcDef', 'abcdef') : "Intl not avaliable";
const cn = Intl ? new Intl.Collator('zh-CN').compare('你好', '再见') : "Intl not avaliable";
const jp = Intl ? new Intl.Collator('jp-JP').compare('こんにちは', 'さようなら') : "Intl not avaliable";
const emptyOptions = {
locale: "Intl not avaliable",
usage: "Intl not avaliable",
sensitivity: "Intl not avaliable",
ignorePunctuation: "Intl not avaliable",
collation: "Intl not avaliable",
numeric: "Intl not avaliable",
caseFirst: "Intl not avaliable"
};
const inputLocale01 = 'sl-SI-u-co-phonebk-cu-usd';
const inputOptions01 = { sensitivity: 'base' };
const collator01 = Intl ? new Intl.Collator(inputLocale01, inputOptions01) : undefined;
const usedOptions01 = collator01 ? collator01.resolvedOptions() : emptyOptions;
const inputLocale02 = 'sl-SI-u-co-phonebk-cu-usd';
const inputOptions02 = { collation: 'emoji' };
const collator02 = Intl ? new Intl.Collator(inputLocale02, inputOptions02) : undefined;
const usedOptions02 = collator02 ? collator02.resolvedOptions() : emptyOptions;
const inputSupportedLocales = ['ban', 'id-u-co-pinyin', 'de-ID'];
const inputSupportedOptions = { localeMatcher: 'lookup' };
const supportedLocales = Intl ? Intl.Collator.supportedLocalesOf(inputSupportedLocales, inputSupportedOptions) : [];
return (
<ScrollView>
<Text style={styles.intlText}>
Intl.Collator().compare('a', 'c') = {ac} // expect negative value
</Text>
<Text style={styles.intlText}>
Intl.Collator().compare('c', 'a') = {ca} // expect positive value
</Text>
<Text style={styles.intlText}>
Intl.Collator().compare('a', 'a') = {aa} // expect 0
</Text>
<Text style={styles.intlText}>
Intl.Collator('de').compare('ä', 'z') = {de} // expect negative value
</Text>
<Text style={styles.intlText}>
Intl.Collator('sv').compare('ä', 'z') = {sv} // expect positive value
</Text>
<Text style={styles.intlText}>
Intl.Collator('de', {"{"} sensitivity: 'base' {"}"}).compare('ä', 'a') = {des} // expect 0
</Text>
<Text style={styles.intlText}>
Intl.Collator('sv', {"{"} sensitivity: 'base' {"}"}).compare('ä', 'a') = {svs} // expect positive value
</Text>
<Text style={styles.intlText}>
Intl.Collator('de', {"{"} sensitivity: 'base' {"}"}).compare('äbc', 'abc') = {des_base} // expect 0
</Text>
<Text style={styles.intlText}>
Intl.Collator('sv', {"{"} sensitivity: 'base' {"}"}).compare('äbc', 'abc') = {svs_base} // expect positive value
</Text>
<Text style={styles.intlText}>
Intl.Collator('de', {"{"} sensitivity: 'accent' {"}"}).compare('äbc', 'abc') = {des_accent} // expect positive value
</Text>
<Text style={styles.intlText}>
Intl.Collator('sv', {"{"} sensitivity: 'accent' {"}"}).compare('äbc', 'abc') = {svs_accent} // expect positive value
</Text>
<Text style={styles.intlText}>
Intl.Collator('de', {"{"} sensitivity: 'base' {"}"}).compare('abcDef', 'abcdef') = {desc_base} // expect 0
</Text>
<Text style={styles.intlText}>
Intl.Collator('de', {"{"} sensitivity: 'accent' {"}"}).compare('abcDef', 'abcdef') = {desc_accent} // expect 0
</Text>
<Text style={styles.intlText}>
Intl.Collator('de', {"{"} sensitivity: 'case' {"}"}).compare('abcDef', 'abcdef') = {desc_case} // expect positive value
</Text>
<Text style={styles.intlText}>
Intl.Collator('de', {"{"} sensitivity: 'variant' {"}"}).compare('abcDef', 'abcdef') = {desc_variant} // expect positive value
</Text>
<Text style={styles.intlText}>
Intl.Collator('zh-CN').compare('你好', '再见') = {cn} // expect negative value
</Text>
<Text style={styles.intlText}>
Intl.Collator('jp-JP').compare('こんにちは', 'さようなら') = {jp} // expect negative value
</Text>
<Text style={styles.intlText}>usedOptions01 = Intl.Collator({inputLocale01}, {JSON.stringify(inputOptions01)}).resolvedOptions();</Text>
<Text style={styles.intlText}>usedOptions01.locale = {usedOptions01.locale}</Text>
<Text style={styles.intlText}>usedOptions01.usage = {usedOptions01.usage}</Text>
<Text style={styles.intlText}>usedOptions01.sensitivity = {usedOptions01.sensitivity}</Text>
<Text style={styles.intlText}>usedOptions01.ignorePunctuation = {usedOptions01.ignorePunctuation.toString()}</Text>
<Text style={styles.intlText}>usedOptions01.collation = {usedOptions01.collation}</Text>
<Text style={styles.intlText}>usedOptions01.numeric = {usedOptions01.numeric.toString()}</Text>
<Text style={styles.intlText}>usedOptions01.caseFirst = {usedOptions01.caseFirst}</Text>
<Text style={styles.intlText}>usedOptions02 = Intl.Collator({inputLocale02}, {JSON.stringify(inputOptions02)}).resolvedOptions();</Text>
<Text style={styles.intlText}>usedOptions02.locale = {usedOptions02.locale}</Text>
<Text style={styles.intlText}>usedOptions02.usage = {usedOptions02.usage}</Text>
<Text style={styles.intlText}>usedOptions02.sensitivity = {usedOptions02.sensitivity}</Text>
<Text style={styles.intlText}>usedOptions02.ignorePunctuation = {usedOptions02.ignorePunctuation.toString()}</Text>
<Text style={styles.intlText}>usedOptions02.collation = {usedOptions02.collation}</Text>
<Text style={styles.intlText}>usedOptions02.numeric = {usedOptions02.numeric.toString()}</Text>
<Text style={styles.intlText}>usedOptions02.caseFirst = {usedOptions02.caseFirst}</Text>
<Text style={styles.intlText}>Intl.Collator.supportedLocalesOf({JSON.stringify(inputSupportedLocales)}, {JSON.stringify(inputSupportedOptions)}) = {JSON.stringify(supportedLocales)}</Text>
</ScrollView>
</View>
);
};
export default I18nManagerApp;
AppRegistry.registerComponent('I18nManagerApp', () => I18nManagerApp);
Intl.DurationFormat example
The Intl.DurationFormat object enables language-sensitive duration formatting.
For more information, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat.
import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
const DurationFormatDemo = () => {
if (!Intl || !Intl.DurationFormat) {
return (
<View>
<Text>
Intl.DurationFormat : unavailable
</Text>
</View>
);
}
const defaultDF = new Intl.DurationFormat();
const enUSDigitalDF = new Intl.DurationFormat(['en-US'], { style: 'digital' });
const frFRLongDF = new Intl.DurationFormat('fr-FR', { style: 'long' });
const duration1 = { years: 1, months: 2, weeks: 3, days: 4 };
const duration2 = { hours: 3, minutes: 18, seconds: 52 };
return (
<View>
<Text>
Intl.DurationFormat : available
</Text>
<Text>
Example: Default locale and options,
duration = {JSON.stringify(duration1)}
</Text>
<Text>
format : {defaultDF.format(duration1)}
</Text>
<Text>
formatToParts : {JSON.stringify(defaultDF.formatToParts(duration1))}
</Text>
<Spacer />
<Text>
Example: en-US locale and digital style,
duration = {JSON.stringify(duration2)}
</Text>
<Text>
format : {enUSDigitalDF.format(duration2)}
</Text>
<Text>
formatToParts : {JSON.stringify(enUSDigitalDF.formatToParts(duration2))}
</Text>
<Spacer />
<Text>
Example: fr-FR locale and long style,
duration = {JSON.stringify(duration1)}
</Text>
<Text>
format : {frFRLongDF.format(duration1)}
</Text>
<Text>
formatToParts : {JSON.stringify(frFRLongDF.formatToParts(duration1))}
</Text>
<Spacer />
<Text>
Example: fr-FR locale and long style,
duration = {JSON.stringify(duration2)}
</Text>
<Text>
format : {frFRLongDF.format(duration2)}
</Text>
<Text>
formatToParts : {JSON.stringify(frFRLongDF.formatToParts(duration2))}
</Text>
</View>
);
};
const IntlApp = () => {
console.log('Intl Demo');
return (
<View style={DEFAULT_STYLES.CONTAINER}>
<Text style={DEFAULT_STYLES.TITLE}>Intl Demos</Text>
<ScrollView>
<Text>
Intl : {Intl ? 'available' : 'unavailable'} // expect available
</Text>
<Text style={DEFAULT_STYLES.HEADING}>Intl.DurationFormat Demo</Text>
<DurationFormatDemo />
</ScrollView>
</View>
);
};
export default IntlApp;
I18nManager
Other internationalization and localization utilities for apps can be accessed via the I18nManager.
I18nManager Example
import React, { useState } from 'react';
import { AppRegistry, Button, I18nManager ,Text, View } from 'react-native';
const I18nManagerApp = () => {
const [response, setResponse] = useState('');
const [locale, setLocale] = useState('');
const [timezone, setTimezone] = useState('');
const displayLocale = () => {
setLocale(`I18nManager locale value - ${I18nManager.getAppLocale()}`);
};
const displayTimezone = () => {
setTimezone(`I18nManager timezone value - ${I18nManager.getTimezone()}`);
};
const updateLocaleSetting = (newLocale: string) => {
I18nManager.setAppLocale(newLocale);
};
const updateTimezoneSetting = (newTimezone: string) => {
I18nManager.setTimezone(newTimezone);
};
I18nManager.addListener(I18nManager.SettingEventName.Locale, displayLocale);
I18nManager.addListener(I18nManager.SettingEventName.Timezone, displayTimezone);
return (
<View>
<Button title="Display I18n Preferences" onPress={displayI18nPreferences} />
<Text>{response}</Text>
<Button title="Set Locale - en-CA" onPress={updateLocaleSetting("en-CA")} />
<Text>{locale}</Text>
<Button title="Set App TZ - Paris" onPress={updateTimezoneSetting("Europe/Paris")} />
<Text>{timezone}</Text>
</View>
);
};
export default I18nManagerApp;
Related topics
Last updated: Sep 30, 2025
