怎样使用JavaScript处理国际化(i18n)与本地化(l10n)？

答案：现代Web应用通过分离语言内容与逻辑实现国际化，利用JavaScript的Intl API处理日期、数字等本地化格式，并结合键值映射或i18next等库实现多语言支持，同时可动态切换语言并持久化用户偏好。

处理国际化（i18n）和本地化（l10n）在现代Web应用中非常重要，JavaScript提供了多种方式来支持多语言和区域格式。核心思路是分离语言内容与代码逻辑，并根据用户环境动态加载对应的语言资源。

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

JavaScript的 Intl API 是处理日期、时间、数字、货币等本地化格式的强大工具，无需引入额外库。

new Intl.DateTimeFormat('zh-CN').format(new Date()) 输出中文格式日期，如“2024/5/20”

new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(new Date()) 输出“Monday”

立即学习“Java免费学习笔记（深入）”；

new Intl.NumberFormat('de-DE').format(123456.78) 输出 “123.456,78”

new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(1000) 输出 “￥1,000”

['ä', 'a', 'z'].sort(new Intl.Collator('de').compare) 按德语排序规则处理变音字符

实现多语言文本翻译（i18n）

可通过简单的键值映射结构管理不同语言的文本内容。

const messages = {
  en: {
    greeting: 'Hello',
    welcome: 'Welcome to our site'
  },
  zh: {
    greeting: '你好',
    welcome: '欢迎访问我们的网站'
  }
};

获取浏览器语言：const userLang = navigator.language || 'en';

Trae国内版

国内首款AI原生IDE，专为中国开发者打造

815

查看详情

获取最匹配语言：const lang = userLang.startsWith('zh') ? 'zh' : 'en';

function t(key) {
  return messages[lang][key] || key;
}
document.getElementById('greeting').textContent = t('greeting');

使用成熟的i18n库（推荐用于复杂项目）

对于大型应用，推荐使用功能完善的第三方库，例如 i18next 或 formatjs。

安装：npm install i18next

配置：

import i18n from 'i18next';
i18n.init({
  lng: 'zh',
  resources: {
    en: { translation: { greeting: 'Hello' } },
    zh: { translation: { greeting: '你好' } }
  }
});

使用：document.title = i18n.t('greeting');

它还支持复数、上下文、命名空间、异步加载语言包等高级功能。

动态切换语言与持久化偏好

允许用户手动切换语言，并将选择保存到 localStorage。

function setLanguage(lng) {
  lang = lng;
  document.documentElement.lang = lng;
  localStorage.setItem('user-lang', lng);
  // 重新渲染页面文本
  updateUI();
}

读取 localStorage 中的语言设置，若无则用浏览器默认语言。

以上就是怎样使用JavaScript处理国际化(i18n)与本地化(l10n)？的详细内容，更多请关注php中文网其它相关文章！