js使用i18n实现页面国际化的方法

实现页面国际化（Internationalization，简称i18n）的方法在前端开发中非常常见，可以让我们的网站更易于被全球用户理解和使用。下面我将详细讲解如何使用JavaScript实现网站的i18n。

1. 建立语言包

首先，我们需要建立站点所需的多语言文字资源。针对不同语言，我们可以分别建立不同的语言包（language pack），其中保存着相应语言的翻译文字。通常，我们使用JSON格式进行保存，如下面的示例所示：

// lang/zh-CN.json
{
  "title": "网站标题",
  "hello": "您好！",
  "welcome": "欢迎访问我们的网站！"
}

// lang/en-US.json
{
  "title": "Website Title",
  "hello": "Hello!",
  "welcome": "Welcome to our website!"
}

上述代码中，我们分别建立了中文简体和英文语言包，分别保存着相应语言的翻译文字。

2. 根据用户语言设置加载语言包

接下来，我们需要根据用户的语言设置自动加载相应的语言包。可通过如下代码判断浏览器所用语言：

const userLang = navigator.language || navigator.userLanguage; // 获取用户语言
const langCode = userLang.startsWith("zh") ? "zh-CN" : "en-US"; // 判断用户语言是否为中文

以上代码利用navigator.language或navigator.userLanguage获取浏览器所用语言（如"zh-CN"、"en-US"等），并根据语言代码确定加载的语言包。

接下来我们可以通过fetch方法异步请求语言包文件，并将其解析成对象。可以定义一个loadLangPack函数来实现：

function loadLangPack(langCode) {
  return fetch(`lang/${langCode}.json`)
    .then(res => res.json())
    .catch(err => {
      console.warn(`Failed to load language pack ${langCode}:`, err);
      return {}; // 如果加载失败返回一个空对象
    });
}

3. 构建翻译功能

在完成语言包的加载后，我们需要使用i18n函数对页面内容进行动态翻译。下面我们将i18n函数实现为一个在全局范围内可用的函数：

let langPack; // 全局语言包变量

async function i18n(key, ...args) {
  if (!langPack) { // 如果语言包未加载则进行加载
    langPack = await loadLangPack(langCode);
  }
  const text = langPack[key] || key; // 如果语言包中无对应的翻译则使用自身作为显示内容
  return text.replace(/\{(\d+)\}/g, (_, num) => args[num] || ""); // 替换文本中的占位符
}

在上述代码中，我们通过传递一个关键字key和需要替换的变量参数args来实现翻译功能。我们首先检查语言包是否已经加载，如果未加载则调用loadLangPack函数来进行加载。然后我们在语言包中查找关键字对应的翻译文本，如果没有找到则使用原来的文本内容。最后，我们将翻译后的文本中的占位符替换成对应的变量。

通过以上方式，我们可以实现网站的国际化（i18n）功能。

示例

下面我们通过两个示例来演示如何在网站中实现i18n功能。

示例1：翻译页面标题

在示例中，我们通过文档标题来演示如何使用i18n来实现标题的翻译。HTML页面代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title data-i18n="title">Website Title</title>
    <script src="./i18n.js"></script>
  </head>
  <body>
    <h1 data-i18n="hello">Hello!</h1>
    <p data-i18n="welcome">Welcome to our website!</p>
    <button onclick="changeLang()">Change language</button>
    <script>
      async function changeLang() {
        langCode = langCode === "zh-CN" ? "en-US" : "zh-CN";
        langPack = await loadLangPack(langCode);
        document.querySelectorAll("[data-i18n]").forEach(el => {
          const key = el.getAttribute("data-i18n");
          i18n(key).then(text => (el.textContent = text));
        });
      }
      changeLang(); // 首次加载时进行语言切换
    </script>
  </body>
</html>

在上述代码中，我们使用data-i18n属性来对需要翻译的元素进行标记。在页面加载完成后，通过遍历页面上的所有标记数据，使用i18n方法进行翻译。

我们在i18n.js中实现我们的i18n逻辑：

let langPack;

async function loadLangPack(langCode) {
  return fetch(`lang/${langCode}.json`)
    .then(res => res.json())
    .catch(err => {
      console.warn(`Failed to load language pack ${langCode}:`, err);
      return {};
    });
}

async function i18n(key, ...args) {
  if (!langPack) {
    langPack = await loadLangPack(langCode);
  }
  const text = langPack[key] || key;
  return text.replace(/\{(\d+)\}/g, (_, num) => args[num] || "");
}

我们首先定义了一个全局变量langPack用于保存当前的语言包。在loadLangPack函数中通过fetch和Promise异步加载语言包文件并返回JSON对象，i18n函数则是用于翻译文字的主要方法，其中key参数指定了需要翻译的关键字，args是需要替换的变量。

现在，我们可以打开这个HTML文件并查看效果了。

示例2：翻译表单项

在这个示例中，我们演示如何使用i18n来实现表单翻译功能，HTML代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Example i18n</title>
    <script src="./i18n.js"></script>
  </head>
  <body>
    <form>
      <div>
        <label for="name" data-i18n="nameLabel">Name:</label>
        <input type="text" name="name" id="name" placeholder="Enter your name" />
      </div>
      <div>
        <label for="email" data-i18n="emailLabel">Email:</label>
        <input type="email" name="email" id="email" placeholder="Enter your email" />
      </div>
      <div>
        <button type="submit" data-i18n="submitBtn">Submit</button>
      </div>
    </form>
    <button onclick="changeLang()">Change language</button>
    <script>
      async function changeLang() {
        langCode = langCode === "zh-CN" ? "en-US" : "zh-CN";
        langPack = await loadLangPack(langCode);
        document.querySelectorAll("[data-i18n]").forEach(el => {
          const key = el.getAttribute("data-i18n");
          i18n(key).then(text => (el.textContent = text));
        });
        document.querySelectorAll("[placeholder]").forEach(el => {
          const key = el.getAttribute("placeholder");
          i18n(key).then(text => (el.placeholder = text));
        });
      }
      changeLang(); // 首次加载时进行语言切换
    </script>
  </body>
</html>

在上述代码中，我们通过data-i18n属性和querySelectorAll方法选择需要翻译的元素，并将其翻译成当前语言的文本。我们还使用placeholder属性来对表单项的占位符进行翻译。在语言切换时，我们遍历所有标记数据和占位符数据，并使用i18n方法进行翻译。

通过以上文档和示例，我们学会了如何使用i18n來進行页面国际化。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js使用i18n实现页面国际化的方法 - Python技术站