随着全球化和多语言需求的增长，前端开发中的国际化问题也变得越来越重要。http-i18n 是一款较为成熟的 npm 包，它可以方便我们进行多语言处理。本篇文章将介绍如何使用 http-i18n，来实现网站的多语言展示。
安装
使用 npm 安装 http-i18n：
npm install http-i18n
用法
初始化
-- -------------------- ---- ------- ----- ---- - --------------------- ----- ------- - - -- ---- ---------- ------------ -- ---- -------- ------ ------ -- ------ ---- ----------- --------- -- ------ ----------- ----- -- ---- -------------- ----- -- ----- ---- - --- --------------
我们调用了 http-i18n 的构造函数，传入相关参数 options。其中：
directory：存放语言文件的目录，如存放于./locales目录下locales：支持的语言，支持多语言，以数组的形式传入cookieName：存储当前语言的 cookie 名称autoDetect：是否自动检测用户的语言设置defaultLocale：当自动检测不到语言时，默认使用的语言
使用
在使用时，我们先要加载语言文件：
i18n.load('en', './locales/en.json');
i18n.load('zh', './locales/zh.json');然后，我们就可以通过 i18n.__('key') 这个方法进行多语言翻译了。其中，key 是语言文件内的键值对应。例如，我们在 en.json 文件内有如下的键值对：
{
"hello": "Hello World!"
}那么，我们就可以在 js 文件中通过 i18n.__('hello') 来获取到相应的文字内容。
当然，我们也可以通过占位符来进行语言的动态替换。例如：
{
"greet": "Hello, {0}!"
}我们可以通过 i18n.__('greet', '你好') 来获取到 Hello, 你好! 的翻译结果。
除了在 js 中使用外，我们还可以在模板引擎中使用。以 ejs 为例：
<p><%= i18n.__('hello') %></p>在 ejs 中可以直接使用 i18n.__ 输出符合当前语言的翻译结果。
新增/删除语言
新增/删除语言非常方便，只需要调用 i18n.load() 方法，分别传入语言和语言文件，或者调用 i18n.unload() 方法传入待删除的语言即可。
i18n.load('fr', './locales/fr.json');
i18n.unload('zh');检测用户语言设置
当设置 autoDetect 为 true 后，http-i18n 会自动根据用户浏览器的语言设置来切换网站语言。使用者也可以通过手动切换语言来实现多语言的展示。
i18n.setLocaleFromCookie('fr') // 从 cookie 中设置语言当用户使用网站时，我们可以把获取到的语言存放至 cookie 中，再通过 setLocaleFromCookie 方法来实现语言切换。
示例代码
初始化：
-- -------------------- ---- ------- ----- ---- - --------------------- ----- ------- - - ---------- ------------ -------- ------ ------ ----------- --------- ----------- ----- -------------- ----- -- ----- ---- - --- -------------- --------------- --------------------- --------------- ---------------------
语言文件 en.json：
{
"hello": "Hello World!"
}语言文件 zh.json：
{
"hello": "你好，世界！"
}使用：
-- -------------------- ---- ------- -- ------ ----- ------------- - ----------------- -- ------ ----- ----- - ----------------- -- ---------- ----- ----- - ---------------- ------ -- ----- ------ -------------------------------
在 ejs 模板中使用：
<p><%= i18n.__('hello') %></p>总结
http-i18n 是一款便捷的多语言处理 npm 包，适用于需要实现多语言的网站项目。通过本文对该 npm 包的介绍，相信读者能够轻松掌握其使用方法。同时，多语言处理是前端开发中的重要问题，我们也应该不断探索更多类似的工具，提高我们的开发效率和项目质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557c081e8991b448d4c99