当前位置：首页 > 文章列表 > 文章 > 前端 > 如何利用JavaScript实现国际化和本地化（i18n/l10n）？

如何利用JavaScript实现国际化和本地化（i18n/l10n）？

2025-10-17 13:09:13 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《如何利用JavaScript实现国际化和本地化（i18n/l10n）？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

使用Intl API格式化日期、数字和货币，结合i18next等库管理多语言文本，通过navigator.language检测用户语言，支持动态切换与持久化存储，实现全面的国际化与本地化。

如何利用JavaScript实现国际化和本地化（i18n/l10n）？

实现国际化（i18n）和本地化（l10n）的核心是让应用能根据用户的语言环境显示对应的语言内容，并正确格式化日期、数字、货币等。JavaScript 提供了多种方式来实现这些功能，结合现代工具和库可以更高效地完成。

使用内置 Intl API 进行本地化格式化

现代浏览器支持 Intl 对象，它是 JavaScript 内置的国际化 API，可用于格式化日期、时间、数字和货币，无需引入第三方库。

• 格式化日期和时间：

new Intl.DateTimeFormat('zh-CN').format(new Date()) → "2025年4月5日"
new Intl.DateTimeFormat('en-US').format(new Date()) → "4/5/2025"

• 格式化数字和货币：

new Intl.NumberFormat('de-DE').format(1234567.89) → "1.234.567,89"
new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(1000) → "￥1,000"

• 排序和比较（按语言习惯）：

['ä', 'z', 'a'].sort(new Intl.Collator('de').compare) → 按德语规则排序

管理多语言文本：使用 i18n 库或自定义方案

对于界面文本的翻译，可选择轻量方案或成熟库来组织和切换语言资源。

• 使用 i18next（推荐用于中大型项目）：

i18next 是最流行的 JavaScript 国际化库，支持动态加载、复数、插值等功能。

安装：
npm install i18next

基本用法：

import i18n from 'i18next';

i18n.init({
  lng: 'en', // 当前语言
  resources: {
    en: {
      translation: {
        welcome: 'Welcome',
        hello: 'Hello {{name}}!'
      }
    },
    zh: {
      translation: {
        welcome: '欢迎',
        hello: '你好 {{name}}！'
      }
    }
  }
});

// 使用
i18n.t('welcome'); // 根据当前语言返回对应文本
i18n.t('hello', { name: '小明' }); // 支持变量插值

• 简单项目可用对象映射实现：

如果项目较小，可直接用语言键值对：

const messages = {
  en: {
    title: 'Welcome',
    save: 'Save'
  },
  zh: {
    title: '欢迎',
    save: '保存'
  }
};

const lang = navigator.language.startsWith('zh') ? 'zh' : 'en';
document.getElementById('title').textContent = messages[lang].title;