有时候在前端开发中，需要实现国际化的功能。而在多语言应用中，翻译是必不可少的一部分。npm 包 translater.js 就是一个非常方便的翻译工具，它可以帮助我们快速地实现页面文本的多语言翻译。
安装
要使用 translater.js，首先需要安装它。可以通过 npm 进行安装：
npm install translater
安装完成后，就可以在项目中使用了。
使用方法
初始化
在使用 translater.js 之前，需要先进行初始化。可以在 JavaScript 文件中添加以下代码：
-- -------------------- ---- -------
--- ---------- - --- ------------
----- ----- -- ----
----- -
--- -
------------ ------- --------
-------- -------- -- -- ---------
--
--- -
------------ ---------
-------- -----------
-
- -- ----
---这个例子中定义了两种语言（英语和中文），并将它们对应的翻译存储在了字典中。Translater 的构造函数接收一个对象作为参数，其中可以指定默认语言和翻译字典。
在 HTML 中使用
在 HTML 中，可以使用 data-trans 属性来指定需要翻译的文本。例如：
<h1 data-trans="hello_world"></h1>
在这个例子中，data-trans 的值为 hello_world，表示需要将该元素的文本内容翻译为当前语言对应的值。
切换语言
使用 translater.js 时，可以通过以下方法来切换当前的语言：
translater.setLang('zh');这个例子中将当前语言设置为了中文。
添加新语言
如果需要添加新的语言，只需要向 dict 中添加一个新的键值对即可。例如，要添加法语的支持，可以将代码修改为：
-- -------------------- ---- -------
--- ---------- - --- ------------
----- -----
----- -
--- -
------------ ------- --------
-------- -------- -- -- ---------
--
--- -
------------ ---------
-------- -----------
--
--- -
------------ --------- -- ----- ---
-------- ---------- --- --- ---- --- --
-
-
---这个例子中，添加了法语的翻译。
示例代码
以下是一个完整的示例代码，包含了初始化、在 HTML 中使用和切换语言等功能：
-- -------------------- ---- -------
--------- -----
------
------
------- ------------------------------------------------------------------------------
--------
--- ---------- - --- ------------
----- -----
----- -
--- -
------------ ------- --------
-------- -------- -- -- ---------
--
--- -
------------ ---------
-------- -----------
-
-
---
---------
-------
------
--- ------------------------------
-- -------------------------
------- ----------------------------------------------
------- ---------------------------------------------------
-------
-------这个例子中，页面包含了一个标题和一个段落，均使用了 data-trans 属性进行了标记。还有两个按钮，用于切换当前的语言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37980