聊聊什么是 i18n?JavaScript 中的 i18n 基本概念

14,168 阅读5分钟

我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第2篇文章,点击查看活动详情

为什么需要 i18n?

英语是世界上使用最广泛的语言,但只有七分之一的人会说英语。它是 3.79 亿人的第一(母语)语言,但有 9.17 亿人说中文普通话,4.6 亿人说西班牙语,3.41 亿人说印地语。

在互联网呈指数级增长的新兴市场,存在大量非英语用户。如果你的网站可以在全球范围内进行翻译,那么你的潜在目标市场可能会增加 700%!

i18n 全称 Internationalization,也就是国际化的意思,因为单词太长,所以中间的 18 个字母被缩写为 18,再加上开头和结尾的字母,就组成了 i18n。

JavaScript i18n API 可以帮助我们对网站进行多语言翻译,让它们可以轻松适应使用不同语言用户的需求。

在本文中,我将介绍 i18n API 提供的各种方法,以及如何在实际项目中实现 i18n 来覆盖更广泛、更国际化的用户。

i18n 其实很难

从上面的描述中,i18n 看起来很容易,但是当你尝试去做的时候,又发现它并不简单。

基于拉丁语的语言可能表面上相似。比如,请求姓名、电子邮件和日期的表单翻译如下:

英语nameemaildate
西班牙语nombreemailfecha
法语nome-maildate
德语nameemaildatum

Gettext 是一种在类 Unix 计算机操作系统上实现国际化和本地化程序的系统,它已经存在了几十年,而且这个库可以用在大多数编程语言中,在 nodejs 也可用。

在最简单的场景下,我们可以使用某种形式的标记来实现它。比如下面这段 HTML 模板:

<label for="name">{{ NAME }}</label>

当用户将英语设置为主要语言时,NAME 会被动态替换。

但是只是最简单的案例,实际情况中会有很多问题:

  1. 同一种语言可以有不同的变体。在西班牙使用的西班牙语与在南美洲使用的西班牙语不同。
  2. 一种语言中的单词在其他语言中可能会更长。例如,“电子邮件”在俄语中翻译为“электронное письмо”。
  3. 文本并不总是从左到右。有些语言是从右向左书写的,例如阿拉伯语、希伯来语、库尔德语和意第绪语。也有一些语言是可以从上到下书写的,比如中文、韩文、日文和闽南文。

更糟糕的问题

除了上面提到的问题,还有更糟糕的情况。

当我们需要显示日期、时间、数字、货币或单位时,会出现进一步的复杂问题。

在英文中显示其日,通常是 12/03/24 这种格式。但是在其他语言中:

  • 使用 MDY 格式的美国居民会使用 3 December 2024。
  • 使用 DMY 格式的欧洲、南美和亚洲居民会使用 12 March 2024
  • 加拿大、中国、日本和匈牙利居民会使用 2012 年 3 月 24 日,他们选择了实用得多的 YMD 格式。

英文中的数字 1,000,在其他语言中:

  • 美国、英国、加拿大、中国和日本会以千为单位,表示为一千。
  • 西班牙、法国、德国和俄罗斯会表示为一个零点,其中数字的小数部分用逗号分隔。

JavaScript Intl API

其实很多人不知道,在 JavaScript 中存在 Intl 对象

在大多数现代浏览器和运行时中都实现了 ECMAScript 国际化 API,并且兼容性还不错。甚至在 IE11 中也有很多比较有用的方法。

对于较旧的浏览器,还有一个 polyfill 可以用。

Intl API 有点不寻常。它为日期、时间、数字和列表分别提供了几个构造函数,它们会接收一个语言环境和一个包含配置参数的可选对象。

比如,指定美国英语的 DateTime 对象:

const dateFormatter = new Intl.DateTimeFormat('en-US'); 

这个对象可以被多次调用,传递一个 Date 实例,或者是一个 ES6 Temporal,如果它被支持的话。

format 是最常用也是最实用的方法。它的用法如下:

const valentinesDay = dateFormatter.format(new Date('2022-02-14')); 
// "2/14/2022" 
const starwarsDay = dateFormatter.format(new Date('2022-05-04')); 
// "5/4/2022" 

你也可以这么用:

const starwarsDay = new Intl
  .DateTimeFormat('en-US')
  .format(new Date('2022-05-04')); 

除了 format() 方法之外,某些对象还支持这些:

  • formatToParts():返回一个包含格式化字符串的对象数组,例如 { type: 'weekday', value: 'Monday' }
  • resolvedOptions(): 返回一个新对象,其属性反映所使用的语言环境和格式选项,例如 dateFormatter.resolvedOptions().locale。

定义语言环境

所有 Intl 对象都需要一个语言环境参数。它是一个字符串,它可以表示以下含义:

  • 语言子标签
  • 脚本子标签(可选)
  • 地区(或国家)子标签(可选)
  • 一个或多个变体子标签(可选)
  • 一个或多个 BCP 47 扩展序列(可选)
  • 私人使用的扩展序列(可选)

通常来说,只需要指定语言和地区就足够了。例如,"en-US"、"fr-FR"等。

除了使用字符串外,Intl.locale 对象还可用于构造语言环境,例如具有 12 小时时间格式的美国英语:

const us = new Intl.Locale('en', {
  region: 'US', hourCycle: 'h12', calendar: 'gregory'
});

这也可以在另一个 Intl 构造函数中使用。

new Intl
  .DateTimeFormat(us, { timeStyle: 'medium' })   
  .format( new Date('2022-05-04T13:00:00') ); 
// "1:00:00 PM" 

如果没定义区域设置,则使用设备的当前语言和区域设置。

new Intl
  .DateTimeFormat()
  .format( new Date('2022-05-04') ); 

I18n 的 API 其实比较多,在这里就不再多赘述,更加详细的内容可以参考 MDN 文档

我会在下一篇文章中详细聊聊更详细的业界解决方案。

下一篇: 前端 i18n 最佳实践:在 React 中使用 i18next