在多语言网站或应用程序中,国际化是一个必要而且重要的功能。不同的用户讲不同的语言,因此需要对它们进行翻译,以便让他们更好地理解和使用我们的产品。nmp 包 lets-i18n
提供了一种简单和灵活的方法来实现网站或应用的国际化。
在本文中,我们将详细介绍如何使用 lets-i18n
包实现网站的国际化。下面是我们的学习和指导目标:
1.学习如何安装 lets-i18n
包,并了解其基本功能。
2.学习如何配置 lets-i18n
包,并将其用于网站的国际化。
3.了解 lets-i18n
包的高级功能,并调整它以适应特殊需求。
安装 lets-i18n
包
我们可以使用 npm
包管理器来从 npm
上安装 lets-i18n
包。在终端中,输入以下命令即可安装 lets-i18n
包。
npm install lets-i18n --save
--save
参数将 lets-i18n
包作为我们项目的依赖项保存。
基本用法
初始化
使用 lets-i18n
包的第一步是初始化一个 i18n 对象。我们可以在 JavaScript 文件中引入包并使用以下代码进行初始化。
-- -------------------- ---- ------- ----- -------- - -------------------- ----- -------- - --- ---------- -------- ------ ------ -- ------ ---------- --------- - ----------- -- ----------- -------------- ---- -- ------ -- ------------------------------ ---------展开代码
在这个示例中,我们使用locales
属性来定义支持的语言环境列表,使用directory
属性来定义语言文件所在的目录,使用defaultLocale
属性来定义默认的语言环境。然后,通过调用 I18n 对象的__
方法来获取翻译后的字符串。
翻译字符串
lets-i18n
包提供了一个 __
方法来翻译字符串。该方法使用对象和 key
来获取翻译后的字符串。如果找不到相应的翻译,则会使用默认的字符串。
console.log(letsI18n.__('Hello World!'))
__
方法还可以使用占位符来插入变量。我们可以通过添加占位符 {x}
来将变量插入字符串。
console.log(letsI18n.__('Hello, {x}!', { x: 'World' }))
在这个示例中,我们使用了占位符 {x}
将变量 World
插入到字符串中。我们还可以一次添加多个变量。
console.log(letsI18n.__('Hello, {x}! My name is {y}.', { x: 'World', y: 'John' }))
获取语言环境列表
lets-i18n
包也提供了一个方法来获取支持的语言环境列表。
console.log(letsI18n.getLocales())
该方法将返回一个数组,其中包含支持的语言环境列表。
国际化设置
语言文件格式
让你的应用程序支持多语言的一个重要方面是定义各种翻译,它们属于特定的语言环境。语言文件保存在一个易于访问的目录结构中,并且遵循特定的格式。在 lets-i18n
包中,翻译保存在 JSON 文件中,文件名遵循 ISO 639 标准。比如,对于英文,文件名应该是 en.json
。文件的内容只需包含 JSON 格式的键值对,键表示原始字符串,值表示翻译后的字符串。
语言文件的目录结构看起来可能像这样:
locales/ ├── en.json └── fr.json
其中,en.json
和 fr.json
分别代表英语和法语。
加载语言文件
lets-i18n
包支持多种加载语言文件的方式。最常用的方式是使用 lets-i18n
包的 use
方法,如下所示:
letsI18n.use('en') // 设置英文为活动语言环境
该方法将从定义的目录中加载名为 en.json
的文件。
选择语言环境
我们可以通过调用 use
方法,将特定的语言环境设置为活动语言环境。
letsI18n.use('fr')
该方法将从定义的目录中加载名为 fr.json
的文件。
代码示例
下面是一个完整的代码示例,演示如何使用 lets-i18n
包实现网站的国际化。
创建一个名为 index.js 的文件:
-- -------------------- ---- ------- ----- -------- - -------------------- ----- -------- - --- ---------- -------- ------ ------ -- ------ ---------- --------- - ----------- -- ----------- -------------- ---- -- ------ -- ------------------ -- ----------- ------------------------------ --------- ------------------------------- ------ --- ---------- ------------------------------- ---- -- ---- -- ------ --- -------- -- --------- ------------------ -- ----------- ------------------------------ --------- ------------------------------- ------ --- ---------- ------------------------------- ---- -- ---- -- ------ --- -------- -- ---------展开代码
在这个示例中,我们实例化一个 letsI18n 对象,并在其构造函数中设置语言环境列表、语言文件存储目录和默认语言环境。我们之后使用 letsI18n.use('en')
将活动的语言环境设置为英语,并使用 letsI18n.__('Hello, {x}!', {x: 'World'})
来翻译字符串。我们还使用 letsI18n.use('fr')
将活动的语言环境设置为法语,并再次翻译字符串。
我们在 /locales
文件夹下定义 JSON 语言文件。在英语的语言文件 en.json
中定义了如下的 JSON 对象:
{ "Hello World!": "Hello World!", "Hello, {x}!": "Hello, {x}!", "Hello, {x}! My name is {y}.": "Hello, {x}! My name is {y}." }
在法语的语言文件 fr.json
中定义了如下的 JSON 对象:
{ "Hello World!": "Bonjour tout le monde!", "Hello, {x}!": "Bonjour, {x}!", "Hello, {x}! My name is {y}.": "Bonjour, {x}! Je m'appelle {y}." }
现在,在终端中运行 node index.js
命令,你将看到输出:
Hello World! Hello, World! Hello, World! My name is John. Bonjour tout le monde! Bonjour, World! Bonjour, World! Je m'appelle John.
我们成功使用 lets-i18n
包实现了网站的国际化。
高级用法
其他初始化选项
除了上面列出的选项之外,lets-i18n
包还提供了许多其他的初始化选项,以及一些方法和事件,以便更好地定制其行为。请参阅 [lets-i18n] 在 Github 上获得完整的文档。
缓存语言文件
在大型网站上,读取语言文件可能会成为性能瓶颈。为了避免浪费时间和资源,我们可以使用 lets-i18n
包的缓存功能。通过设置 cache
属性为 true,我们可以缓存语言文件。该方法将加快翻译字符串的速度,但占用内存较多。
-- -------------------- ---- ------- ----- -------- - -------------------- ----- -------- - --- ---------- -------- ------ ------ -- ------ ---------- --------- - ----------- -- ----------- -------------- ----- -- ------ ------ ---- -- ---- -- ------------------ -- ----------- ------------------------------ --------- ------------------------------- ------ --- ---------- ------------------------------- ---- -- ---- -- ------ --- -------- -- --------- ------------------ -- ----------- ------------------------------ --------- ------------------------------- ------ --- ---------- ------------------------------- ---- -- ---- -- ------ --- -------- -- ---------展开代码
自定义语言文件后缀
默认情况下,lets-i18n
包会查找 .json
文件作为语言文件,如果你需要使用其他的语言文件后缀,则可以使用 extension
属性进行指定。
-- -------------------- ---- ------- ----- -------- - -------------------- ----- -------- - --- ---------- -------- ------ ------ -- ------ ---------- --------- - ----------- -- ----------- -------------- ----- -- ------ ---------- ----- -- --------- --- -- ------------------ -- ----------- ------------------------------ --------- ------------------------------- ------ --- ---------- ------------------------------- ---- -- ---- -- ------ --- -------- -- --------- ------------------ -- ----------- ------------------------------ --------- ------------------------------- ------ --- ---------- ------------------------------- ---- -- ---- -- ------ --- -------- -- ---------展开代码
在上面的示例中,我们定义了 extension
属性为 .js
,这将使 lets-i18n
包查找名为 en.js
和 fr.js
的文件作为语言文件。
使用默认的 i18n 对象
如果我们需要在模块之间共享 lets-i18n
包的 i18n 对象,则可以使用默认的对象。
-- -------------------- ---- ------- ----- -------- - -------------------- ----- -------- - ---------------------- ------------------------------ --------- ------------------ ------------------------------ --------- ------------------------------- ------ --- ---------- ------------------------------- ---- -- ---- -- ------ --- -------- -- ---------展开代码
在这个示例中,我们将 lets-i18n
包导入 letsI18n
,并调用 letsI18n
函数以获取默认的 i18n 对象。默认的 i18n 对象将为整个应用程序共享,这里我们调用此函数两次,以演示不同模块之间如何共享 i18n 对象。我们可以通过调用 use
方法将其语言环境更改为法语。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056e8481e8991b448e74ef