Handlebars.js 是一个流行的 JavaScript 模板引擎，它简化了前端 UI 开发中的数据绑定和渲染。国际化是现代 Web 应用程序必不可少的一部分，因此在本文中，我们将探讨如何使用 Handlebars.js 实现国际化。
准备工作
首先，需要确保您已经安装了 Handlebars.js 库以及其他必要的依赖项。如果没有，请在您的项目中执行以下命令进行安装：
npm install handlebars i18next i18next-handlebars --save
在本文中，我们将使用 i18next 作为我们的翻译框架，并使用 i18next-handlebars 插件来扩展 Handlebars.js 的功能以支持国际化。
配置
- 初始化 i18next 并添加适当的语言文件：
-- -------------------- ---- -------
------ ------- ---- ----------
------ ------- ---- ---------------------- -- -----------------------
---------------------------
---- ----- -- ----
------------ ----- -- ----------------
------ ----- -- --------
-------------- -
------------ ------ -- ----------
--
-------- -
-- ----------------------
--------- -------------------------------
-------- ------------------------------
--
---------- -
-- --------
--- -
------------ -
------ ------- --------
--------- --------- -----------
-------- ---- ---- --------- ------ ----------
--------------- ---- ---- --------- ------ -----------
--
--
--- -
------------ -
------ -------- -- ----- ---
--------- ----------- -------- ---
-------- ----- ---- --------- ------- --- -----
--------------- ----- ---- --------- -------- --- ------
--
--
--
---- 安装和配置 i18next-handlebars 插件：
-- -------------------- ---- ------- ------ ---------- ---- ------------- ------ ---- ---- ---------- ------ - ---------- -- ---------------- - ---- --------------------- ------------ ------------------ ---------- ---------- -- ---- --- -- -- ------------- --------- ------------------------------- -------- ----- -------- - ----- ------ - ------------ ------ --- ------------------------------ ---
现在，我们已经完成了配置并准备好开始使用 Handlebars.js 进行国际化。
示例
以下是一个简单的示例，展示了如何在模板中使用 i18next 和 Handlebars.js 助手以支持国际化：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- --------------- --
----------- -----------------
-------
------
-------- ---------- ------------------
---
---- --------- ---------
----
------- -------------------------
-------
-------// app.js
import "./i18n"; // 初始化 i18next
const template = Handlebars.compile(document.querySelector("#template").innerHTML);
const context = { /* 模板上下文 */ };
const html = template(context);
document.body.innerHTML = html;在上面的示例中，我们首先在 <title> 元素中使用了助手 {{__ "title"}} 以获取翻译后的标题。接着，在 `<h
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25601