什么是 i18n ?
i18n 指的是 Internationalization（国际化）的缩写，其目的是为了让应用程序能够适应不同的语言和文化环境。在前端开发中，使用 i18n 可以轻松地将一个应用程序本地化到多个语言版本，同时提供更好的用户体验。
安装 i18n
使用 npm 包管理器安装 i18n：
$ npm install i18n配置 i18n
在项目中初始化 i18n，代码如下：
const i18n = require('i18n'); i18n.configure({ locales: ['en', 'fr', 'de'], directory: __dirname + '/locales', defaultLocale: 'en', queryParameter: 'lang' });
locales：支持的语言列表。directory：语言文件所在的目录路径。defaultLocale：默认语言。queryParameter：URL 参数名，用于指定当前语言。
使用 i18n
加载语言文件
创建一个语言文件，在 directory 目录下放置相应语言的 JSON 文件，例如：
{ "welcome": "欢迎", "greeting": "你好", "farewell": "再见" }
在应用程序中加载语言文件，代码如下：
i18n.init(request, response); var welcome = i18n.__('welcome'); var greeting = i18n.__('greeting'); var farewell = i18n.__('farewell');
动态切换语言
可以通过修改 queryParameter 参数，动态改变当前语言。例如：
<a href="?lang=en">English</a> <a href="?lang=fr">Français</a> <a href="?lang=de">Deutsch</a>
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ---------------- -------- ------ ----- ------ ---------- --------- - ----------- -------------- ----- --------------- ------ --- --------------------- ---- ----- - -------------- ---- ------ --- ------------ ------------- ---- - ---------- ------ ------ ------------------------------------ ------- ------ ------------------------------- ----------------------------- ---- ------ -------------------------------- ------ --------------------------------- ------ -------------------------------- ----- ------- ------- --- --- ---------------- ---------- - -------------------- --- --------- -- ---- -------- ---展开代码
在运行以上示例代码后，访问 http://localhost:3000 即可看到效果。
总结
使用 i18n 可以让应用程序适应不同的语言和文化环境，提供更好的用户体验。通过本文介绍的 i18n 的安装、配置和使用方法，可以快速地实现前端国际化功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52297
