在前端应用程序中，往往需要多语言支持。对于多语言支持而言，需用到 i18n。在 i18n 中使用到的方法，是本文所介绍的 npm 包 message-format-translate-json。
什么是 Message-Format-Translate-JSON？
Message-Format-Translate-JSON 是一个用于实现多语言的 npm 包。多语言必须满足翻译内容的格式统一，方便使用。本npm包就是为此开发出来的。 Message-Format-Translate-JSON 可以将一个 JSON 文件，翻译成为不同语言、不同文化的字符串。
安装 Message-Format-Translate-JSON
在使用 Message-Format-Translate-JSON 之前，需要先安装它。使用 npm 命令即可：
npm install --save message-format-translate-json
怎么用？
使用 Message-Format-Translate-JSON 很简单。
- 创建 JSON 文件，存放在项目的语言包目录中，例如：
{
"welcomeMessage": {
"en": "Welcome, {name}!",
"zh-CN": "欢迎，{name}!"
}
}- 在项目中使用:
-- -------------------- ---- ------- ------ ---- ---- ------------------------------- ----- - - ------ ------------ ----- -- ------- --------- ------ -------- -- --------- -- - ----- ---- - ------- ----- ------- - ------------------- - ---- -- -------------------- -- --------- -------
注意：写作时，需要先引入 Message-Format-Translate-JSON，否则将会报错。
以上示例中，t 是一个函数，可以封装在一个单独的文件中，供全局使用。
简而言之，使用 Message-Format-Translate-JSON 的过程就是：创建 JSON 文件，调用 t 函数，传入需要翻译的 key 和翻译后的参数。
更多使用示例
下面是更详细的使用示例。
向 i18n JSON 文件添加新语言
简单来说，只需在 JSON 文件中添加新语言：
{
"welcomeMessage": {
"en": "Welcome, {name}!",
"zh-CN": "欢迎，{name}!",
"fr": "Bienvenue, {name}!"
}
}在调用时也要修改一下代码：
const t = MFTJ({
defaultLang: 'en',
langList: ['en', 'zh-CN', 'fr']
})添加默认的 key 值
添加默认的 key 值的好处是，当 key 在当前语言文件中不存在时，会使用默认值。假设你有这样一个 JSON 语言文件：
{
"welcomeMessage": {
"en": "Welcome, {name}!",
"zh-CN": "欢迎，{name}!"
}
}可以设置该 key 的默认值：
const t = MFTJ({
defaultLang: 'en',
langList: ['en', 'zh-CN'],
defaults: {
welcomeMessage: 'hello, {name}!'
}
})使用不同的模式格式化字符串
模板元素在模板字符串中的语法是 ${ expression }，这种语法是 ECMAScript 的字符串模板形式。例如：
{
"welcomeMessage": {
"en": "Welcome, ${name}!",
"zh-CN": "欢迎，${name}!"
}
}在调用时也要修改一下代码，设置 t 的第二个参数：
const message = t('welcomeMessage', {
name
}, {
interpolationPattern: /\${([\s\S]*?)}/g
})为什么要使用 Message-Format-Translate-JSON？
Message-Format-Translate-JSON 简化多语言的支持操作。使用该 npm 包，能够快速地为前端应用程序增加一个多语言支持。
Message-Format-Translate-JSON 的目标是做到极简易用。使用者只需要简单地创建一个 JSON 文件即可。而且，Message-Format-Translate-JSON 支持多种语言翻译，包括不同语言、不同文化。这是 Message-Format-Translate-JSON 最主要的优势。
更重要的是，由于Message-Format-Translate-JSON 能够自动翻译 JSON 文件，进而实现的多语言支持，因此很大程度上避免了犯慢繁琐错误的问题。尤其对于初学者而言，可以大大减轻心理负担，让他们关注应用程序的其他方面。
总结
本文介绍了如何使用 Message-Format-Translate-JSON 来实现多语言支持。我们看到，使用 Message-Format-Translate-JSON 简单易懂，使用它，能够自动翻译 JSON 文件，并支持多种语言，让你的前端应用程序看起来更加专业和全球化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731681e8991b448e9473