Internationalization（国际化）是现代 web 应用程序开发中不可或缺的一部分。在这样的项目中，对于多种语言的支持一直是一个首要问题。本文将介绍一个非常有用的 npm 包：ember-i18n-extended.此 emer-i18n-extended npm 包能够帮助实现 HTML 内的多语言支持。本文将详细介绍ember-i18n-extended 的用法，并且附有示例代码，帮助大家更好地理解。
安装
使用 ember-cli 命令安装
ember install ember-i18n-extended
配置
在 app/config/environment.js 中设置语言包路径
-- -------------------- ---- -------
-------------- - -------- ------------- -
--- --- - -
-- ----- -------------
---- -
-- ----- --- -------------
----- -
-------------- -----
-------- ------------
-------------------------- ------
--
--
--
-- ----- ----
-这里将默认语言设置为英语，同时在 locales 中设定支持中文。
策略
在为项目配置好了支持语言包以后，我们需要告诉应用程序如何查找它们。包含节流策略 throttle 和惰性策略 lazy。 这个配置在环境配置文件 app/config/environment.js 的 APP.i18n 中设置。这里只演示一下 throttle 的设置，lazy 策略可自行在官方文档查阅。
-- -------------------- ---- -------
-------------- - -------- ------------- -
--- --- - -
-- ----- -------------
---- -
-- ----- --- -------------
----- -
--------- ---
--
--
--
-- ----- ----
-在使用 throttle 策略时，语言包会在应用程序使用之前被加载。加载之后，i18n 服务将等待 throttle 配置时间（以毫秒为单位），之后才生效。
使用
添加语言包到项目，将 i18n.RSVP.Promise 传递给应用程序的 present 与 absent 函数。
我们可以简单地通过调用 i18n.present('key_str') 和相应的 i18n.absent('key_str') 函数来使用支持的语言包。其中，第一种语言包存储了 key_str，而第二种则未在语言包中找到。
import i18n from 'i18n';
class TestComponent extends Component {
init() {
i18n.present('key_str');
i18n.absent('key_str');
}
}它会检查指定的语言包，找到 key_str 并返回相应的文本。
如上所述，我们将在之前的配置中包含中文语言支持，因此，我们如果在 HTML 中插入 i18n 函数所需的 key_str，它将在正确的位置自动替换为已经包含的中文文本。 示例代码如下：
<h1>{{i18n 'greeting'}}</h1> <!-- shows "你好" if the I18n default locale is set to "zh" -->
<h2>{{i18n 'greeting.absent'}}</h2> <!-- shows "greeting.absent" if no matching key is found in the I18n definition -->结束
ember-i18n-extended 是一个非常有用的工具，可以轻松地实现前端多语言支持。通过语言包、策略、语法等的结合使用，我们可以实现一个能够很好执行多语言的前端项目，在开发过程中只需要根据实际情况进行调整即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecaac