说同一种语言：JavaScript 应用的国际化

您的应用将能说世界上的任何语言

想象一下：您创建了一个很棒的在线服务，将其发布到网上，但来自德国、日本或巴西的用户在 10 秒内就关闭了网站。为什么？因为他们完全看不懂按钮上写的是什么。在全球化的时代，JavaScript 国际化 不是奢侈品，而是基本需求。如果您希望您的产品征服世界（或者至少是几个邻国），那么 i18n JavaScript 是必不可少的。

在本文中，我们将探讨如何将一个普通应用转变为一个多语言通。您将了解有哪些 i18n 库，如何正确组织翻译文件，并编写用于国际化的实际代码。我们开始吧！

什么是国际化，为什么需要它？

技术术语 i18n（其中 18 是第一个字母 "i" 和最后一个字母 "n" 之间的字母数量）意味着在架构上准备应用以支持不同的语言和文化。这不仅仅是翻译单词——它还涉及日期格式、数字、货币、文本方向（从左到右或从右到左）甚至配色方案的适配。

想象一下日期 "03/04/2025"。对于美国居民来说，这是 4 月 3 日，而对于欧洲人来说，这是 3 月 4 日。如果您的应用向日本用户显示美元价格呢？那将是一场灾难。网页应用国际化 在代码层面解决了所有这些问题。

为什么应该立即开始？

\n
• 受众增长——75% 的用户更喜欢用母语购物
\n
• SEO 提升——搜索引擎在本地搜索结果中对多语言网站的排名更高
\n
• 可用性——降低跳出率并增加用户在网站上的停留时间
\n

JavaScript 中 i18n 的主要方法

对于 JavaScript 本地化，有两种全局方法：自行编写解决方案和使用现成的库。我们将讨论这两种方法，但我强烈推荐第二种——更少的错误，更多的功能。

自行编写国际化：基本示例

如果您的应用只是一个只有 10 行文字的简单着陆页，您可以不使用库。创建一个包含翻译的对象：

const translations = {\n    ru: {\n        greeting: "Привет, мир!",\n        button: "Нажми меня"\n    },\n    en: {\n        greeting: "Hello, World!",\n        button: "Click me"\n    },\n    de: {\n        greeting: "Hallo, Welt!",\n        button: "Klick mich"\n    }\n};

现在是一个用于切换语言的函数：

function translate(lang) {\n    document.querySelectorAll('[data-i18n]').forEach(el => {\n        const key = el.dataset.i18n;\n        if (translations[lang] && translations[lang][key]) {\n            el.textContent = translations[lang][key];\n        }\n    });\n}\n\n// 在 HTML 中使用：\n// <h1 data-i18n="greeting">Привет, мир!</h1>\n// <button data-i18n="button">Нажми меня</button>

这可行，但想象一下，如果您有 500 行文本，还需要处理复数形式（1 个苹果，2 个苹果，5 个苹果）和插值（你好，{username}）。这时 国际化库 就派上用场了。

JavaScript 顶级 i18n 库

i18n 库 市场多种多样。以下是三个值得您关注的领导者：

1. i18next — 库中之王

i18next JavaScript 是事实上的标准。它与 React、Vue、Angular 和纯 JS 一起使用。支持复数形式、插值、嵌套翻译和按需加载资源。

import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\ni18n.use(initReactI18next).init({\n    resources: {\n        en: {\n            translation: {\n                welcome: "Welcome b