了解 Intl 对象及其在国际化中的应用

Intl 对象是 JavaScript 提供的一个强大的国际化 API，帮助开发者处理各种跨语言和跨地区的格式化问题，包括字符串比较、日期时间格式化、数字格式化、复数规则、语言名称显示等。通过这些 API，开发者能够确保应用在不同语言和地区环境下的行为符合本地化标准。本文将介绍 Intl 对象下的多个 API，并提供每个 API 至少 5 个示例，帮助开发者更好地理解和应用这些功能。

---

1. Intl.Collator

Intl.Collator 用于根据语言环境对字符串进行比较和排序。

参数说明

参数	类型	描述	必需	可选值/默认值
locales	string[]	一个或多个语言环境标识符，用于指定排序规则。	否	-
options	object	配置选项，包含以下字段：	否	-
sensitivity	string	设置比较的敏感度，值为 'base', 'accent', 'case', 'variant'。	否	'variant'
ignorePunctuation	boolean	是否忽略标点符号，true 表示忽略，false 表示不忽略。	否	false

示例

// 英语环境下比较字符串
const collator1 = new Intl.Collator('en', { sensitivity: 'base' });
console.log(collator1.compare('apple', 'banana')); // -1

// 中文环境下忽略标点符号比较
const collator2 = new Intl.Collator('zh-CN', { ignorePunctuation: true });
console.log(collator2.compare('你好，世界', '你好 世界')); // 0

// 法语环境下的大小写敏感比较
const collator3 = new Intl.Collator('fr', { sensitivity: 'case' });
console.log(collator3.compare('Apple', 'apple')); // 1

// 忽略大小写的比较
const collator4 = new Intl.Collator('en', { sensitivity: 'base' });
console.log(collator4.compare('Apple', 'apple')); // 0

// 西班牙语环境下的标点符号比较
const collator5 = new Intl.Collator('es', { ignorePunctuation: true });
console.log(collator5.compare('¡Hola!', 'Hola')); // 0

---

2. Intl.DateTimeFormat

Intl.DateTimeFormat 用于根据语言环境格式化日期和时间。

参数说明

参数	类型	描述	必需	可选值/默认值
locales	string[]	一个或多个语言环境标识符，用于格式化日期和时间的规则。	否	-
options	object	配置选项，包含以下字段：	否	-
weekday	string	显示星期几的方式，取值：'long', 'short', 'narrow'。	否	-
year	string	显示年份的方式，取值：'numeric', '2-digit'。	否	'numeric'
month	string	显示月份的方式，取值：'numeric', '2-digit', 'long'。	否	'numeric'
day	string	显示日期的方式，取值：'numeric', '2-digit'。	否	'numeric'
hour	string	显示小时的方式，取值：'numeric', '2-digit'。	否	'numeric'
minute	string	显示分钟的方式，取值：'numeric', '2-digit'。	否	'numeric'
second	string	显示秒数的方式，取值：'numeric', '2-digit'。	否	'numeric'

示例

// 英文格式化日期
const date1 = new Date(2024, 0, 1);
const formatter1 = new Intl.DateTimeFormat('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
console.log(formatter1.format(date1)); // "Monday, January 1, 2024"

// 中文格式化日期
const formatter2 = new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
console.log(formatter2.format(date1)); // "2024年1月1日"

// 使用其他选项来显示时间
const formatter3 = new Intl.DateTimeFormat('fr-FR', { weekday: 'short', hour: '2-digit', minute: '2-digit' });
console.log(formatter3.format(new Date())); // "ven. 20:02"

// 使用长日期格式
const formatter4 = new Intl.DateTimeFormat('ja-JP', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
console.log(formatter4.format(new Date())); // "2024年12月27日金曜日"

// 使用简短的日期格式
const formatter5 = new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
console.log(formatter5.format(new Date())); // "27 Dec 2024"

---

3. Intl.DisplayNames

Intl.DisplayNames 用于根据语言环境显示语言、地区、货币等名称。

参数说明

参数	类型	描述	必需	可选值/默认值
locales	string[]	一个或多个语言环境标识符，用于确定显示的名称。	是	-
options	object	配置选项，包含以下字段：	否	-
type	string	'language', 'region', 'currency'，指定要显示的名称类型。	否	'language'
style	string	'long', 'short', 'narrow'，指定名称的风格。	否	'long'

示例

// 显示语言名称
const displayNames1 = new Intl.DisplayNames('en', { type: 'language', style: 'long' });
console.log(displayNames1.of('zh')); // "Chinese"

// 显示地区名称
const displayRegion1 = new Intl.DisplayNames('zh-CN', { type: 'region', style: 'short' });
console.log(displayRegion1.of('US')); // "美国"

// 显示货币名称
const displayCurrency1 = new Intl.DisplayNames('fr-FR', { type: 'currency', style: 'long' });
console.log(displayCurrency1.of('USD')); // "dollar des États-Unis"

// 显示地区名称（短）
const displayRegion2 = new Intl.DisplayNames('en-US', { type: 'region', style: 'short' });
console.log(displayRegion2.of('IN')); // "India"

// 显示语言名称（简短）
const displayNames2 = new Intl.DisplayNames('fr', { type: 'language', style: 'short' });
console.log(displayNames2.of('en')); // "anglais"

---

4. Intl.ListFormat

Intl.ListFormat 用于根据语言环境格式化列表项。

参数说明

参数	类型	描述	必需	可选值/默认值
locales	string	一个或多个语言环境标识符，用于指定格式化列表项的规则。	是	-
options	object	配置选项，包含以下字段：	否	-
type	string	'conjunction', 'disjunction'，表示连接类型。	否	'conjunction'
style	string	'long', 'short', 'narrow'，表示显示的风格。

否 | 'long' |

示例

// 英语环境格式化连接符列表
const listFormatter1 = new Intl.ListFormat('en', { type: 'conjunction', style: 'long' });
console.log(listFormatter1.format(['apple', 'banana', 'cherry'])); // "apple, banana, and cherry"

// 英语环境格式化分隔符列表
const listFormatter2 = new Intl.ListFormat('en', { type: 'disjunction', style: 'short' });
console.log(listFormatter2.format(['apple', 'banana', 'cherry'])); // "apple, banana or cherry"

// 法语环境格式化连接符列表
const listFormatter3 = new Intl.ListFormat('fr', { type: 'conjunction', style: 'short' });
console.log(listFormatter3.format(['pomme', 'banane', 'cerise'])); // "pomme, banane et cerise"

// 法语环境格式化分隔符列表
const listFormatter4 = new Intl.ListFormat('fr', { type: 'disjunction', style: 'long' });
console.log(listFormatter4.format(['pomme', 'banane', 'cerise'])); // "pomme, banane ou cerise"

// 德语环境格式化连接符列表
const listFormatter5 = new Intl.ListFormat('de', { type: 'conjunction', style: 'narrow' });
console.log(listFormatter5.format(['Apfel', 'Banane', 'Kirsche'])); // "Apfel, Banane und Kirsche"

---

5. Intl.Locale

Intl.Locale 用于表示和处理语言环境信息。

参数说明

参数	类型	描述	必需	可选值/默认值
languageTag	string	语言标识符，形如 'en-US' 或 'zh-CN'。	是	-

示例

// 英文环境 Locale
const locale1 = new Intl.Locale('en-US');
console.log(locale1.language);  // "en"
console.log(locale1.region);    // "US"

// 法国环境 Locale
const locale2 = new Intl.Locale('fr-FR');
console.log(locale2.language);  // "fr"
console.log(locale2.region);    // "FR"

// 中文环境 Locale
const locale3 = new Intl.Locale('zh-CN');
console.log(locale3.language);  // "zh"
console.log(locale3.region);    // "CN"

// 日本环境 Locale
const locale4 = new Intl.Locale('ja-JP');
console.log(locale4.language);  // "ja"
console.log(locale4.region);    // "JP"

// 意大利环境 Locale
const locale5 = new Intl.Locale('it-IT');
console.log(locale5.language);  // "it"
console.log(locale5.region);    // "IT"

---

6. Intl.NumberFormat

Intl.NumberFormat 用于根据语言环境格式化数字。

参数说明

参数	类型	描述	必需	可选值/默认值
locales	string[]	一个或多个语言环境标识符，用于格式化数字的规则。	否	-
options	object	配置选项，包含以下字段：	否	-
style	string	'decimal', 'currency', 'percent'，格式化类型。	否	'decimal'
currency	string	货币类型，仅在 style: 'currency' 时有效。	否	-

示例

// 美元格式化
const numberFormatter1 = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(numberFormatter1.format(12345.67)); // "$12,345.67"

// 欧元格式化
const numberFormatter2 = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
console.log(numberFormatter2.format(12345.67)); // "12.345,67 €"

// 百分比格式化
const percentFormatter1 = new Intl.NumberFormat('de-DE', { style: 'percent' });
console.log(percentFormatter1.format(0.45)); // "45%"

// 千分位格式化
const numberFormatter3 = new Intl.NumberFormat('en-US');
console.log(numberFormatter3.format(1234567)); // "1,234,567"

// 日元格式化
const numberFormatter4 = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });
console.log(numberFormatter4.format(12345)); // "￥12,345"

---

7. Intl.PluralRules

Intl.PluralRules 用于根据语言环境处理复数规则。

参数说明

参数	类型	描述	必需	可选值/默认值
locales	string[]	一个或多个语言环境标识符。	否	-
options	object	配置选项，包含以下字段：	否	-
type	string	'cardinal', 'ordinal'，选择复数类型。	否	'cardinal'

示例

// 英文复数规则
const pluralRule1 = new Intl.PluralRules('en', { type: 'cardinal' });
console.log(pluralRule1.select(1));  // "one"
console.log(pluralRule1.select(2));  // "other"

// 阿拉伯语复数规则
const pluralRule2 = new Intl.PluralRules('ar', { type: 'ordinal' });
console.log(pluralRule2.select(5));  // "other"

// 德语复数规则
const pluralRule3 = new Intl.PluralRules('de', { type: 'cardinal' });
console.log(pluralRule3.select(1));  // "one"
console.log(pluralRule3.select(2));  // "other"

// 西班牙语复数规则
const pluralRule4 = new Intl.PluralRules('es', { type: 'ordinal' });
console.log(pluralRule4.select(3));  // "other"

// 法语复数规则
const pluralRule5 = new Intl.PluralRules('fr', { type: 'cardinal' });
console.log(pluralRule5.select(1));  // "one"

---

8. Intl.RelativeTimeFormat

Intl.RelativeTimeFormat 用于以相对时间格式显示日期和时间。

参数说明

参数	类型	描述	必需	可选值/默认值
locales	string[]	一个或多个语言环境标识符。	是	-
options	object	配置选项，包含以下字段：	否	-
numeric	string	'auto' 或 'always'，决定是否使用数字形式。	否	'auto'

示例

// 英语相对时间
const relativeFormatter1 = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(relativeFormatter1.format(-1, 'day')); // "yesterday"
console.log(relativeFormatter1.format(1, 'month')); // "next month"

// 中文相对时间
const relativeFormatter2 = new Intl.RelativeTimeFormat('zh-CN', { numeric: 'always' });
console.log(relativeFormatter2.format(-1, 'day')); // "1天前"
console.log(relativeFormatter2.format(3, 'week')); // "3 周后"

// 法语相对时间
const relativeFormatter3 = new Intl.RelativeTimeFormat('fr-FR', { numeric: 'auto' });
console.log(relativeFormatter3.format(1, 'year')); // "l’année prochaine"

// 德语相对时间
const relativeFormatter4 = new Intl.RelativeTimeFormat('de-DE', { numeric: 'always' });
console.log(relativeFormatter4.format(-2, 'minute')); // "vor 2 Minuten"

// 日语相对时间
const relativeFormatter5 = new Intl.RelativeTimeFormat('ja-JP', { numeric: 'always' });
console.log(relativeFormatter5.format(-1, 'hour')); // "1時間前"

---

9. Intl.Segmenter

Intl.Segmenter 用于根据语言环境分割文本。

参数说明

参数	类型	描述	必需	可选值/默认值
locales	string[]	一个或多个语言环境标识符，用于分割文本的规则。	是	-
options	object	配置选项，包含如下字段：	否	-
granularity	`string

|'word', 'sentence'，指定分割的粒度。 | 否 | 'word'` |

示例

const segmenter1 = new Intl.Segmenter('en', { granularity: 'word' });
console.log([...segmenter1.segment('Hello world!')]); // ['Hello',' ', 'world', '!']

const segmenter2 = new Intl.Segmenter('zh', { granularity: 'word' });
console.log([...segmenter2.segment('我爱编程')]); // ['我', '爱', '编', '程']

---

总结

通过本文的详细介绍和示例，您可以更深入地理解和使用 Intl API。它不仅使得在多语言环境中进行开发变得更加简单，还为处理各种国际化需求提供了强大的工具。