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

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

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

实现国际化（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 是最流行的 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;

检测用户语言并动态切换

获取用户首选语言可通过 navigator.language，并允许用户手动切换。

const userLang = navigator.language || 'en'; // 如 'zh-CN' 或 'en-US'

i18n.changeLanguage('zh') → 动态切换为中文
可绑定按钮事件，切换后重新渲染页面文本

使用 localStorage 记住选择：
localStorage.setItem('app-lang', 'zh')
页面加载时优先读取该设置

处理静态资源与动态内容

除了文本，图片、日期显示、数字单位等也需考虑本地化。

例如注册页的引导图，可按语言目录加载：
src="/images/guide-${lang}.png"

在 React 中可用 react-i18next，Vue 可用 vue-i18n，实现组件级语言响应。

基本上就这些。Intl API 解决格式问题，i18n 库管理翻译文本，再配合语言检测和持久化，就能构建完整的多语言支持。关键是统一管理资源，避免硬编码文本。不复杂但容易忽略细节，比如日期顺序和千分位符差异。

今天关于《如何利用JavaScript实现国际化和本地化（i18n/l10n）？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！