首先定义多语言资源文件，使用JSON格式存储不同语言文本；接着通过getBrowserLang()检测浏览器语言，并结合URL参数或localStorage确定当前语言；然后利用data-i18n属性标记需翻译的元素，编写translate()函数动态替换内容；最后提供语言切换按钮调用switchLanguage()更新界面并持久化选择。该方案轻量、无需构建工具，适合静态网站，核心在于统一标记与可维护的语言包结构。
前端国际化（i18n）的核心目标是让网页内容能根据用户的语言环境动态切换。在不依赖大型框架的前提下，使用原生 JavaScript 实现轻量级 i18n 是许多项目尤其是静态网站或小型应用的实用选择。以下是一种简洁、可维护的 JS 国际化实现方案。
1. 定义多语言资源文件
将不同语言的文本内容组织为 JSON 格式的对象，便于维护和扩展。
const LANGUAGES = {
en: {
welcome: "Welcome to our site",
login: "Login",
logout: "Logout"
},
zh: {
welcome: "欢迎访问我们的网站",
login: "登录",
logout: "退出"
}
};
你可以将这些数据拆分为独立文件（如 lang/en.js、lang/zh.js），通过模块化方式引入，提升可维护性。
2. 检测用户语言偏好
自动获取浏览器的语言设置，作为默认显示语言。
立即学习“Java免费学习笔记（深入）”；
function getBrowserLang() {
const lang = navigator.language || 'en';
return lang.startsWith('zh') ? 'zh' : 'en'; // 简单判断
}
也可结合 URL 参数（如 ?lang=zh）或 localStorage 手动指定语言，优先级高于浏览器默认。
function getCurrentLang() {
return new URLSearchParams(window.location.search).get('lang')
|| localStorage.getItem('i18n_lang')
|| getBrowserLang();
}
3. 动态替换页面文本
通过自定义属性标记需要翻译的元素，例如：
然后编写函数遍历这些元素并填充对应语言的文本：
function translate(lang) {
const texts = LANGUAGES[lang] || LANGUAGES.en;
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n');
if (texts[key]) {
el.textContent = texts[key];
}
});
localStorage.setItem('i18n_lang', lang); // 持久化选择
}
调用 translate(getCurrentLang()) 即可完成初始化渲染。
4. 提供语言切换功能
添加按钮或下拉菜单，允许用户手动切换语言：
function switchLanguage(lang) {
translate(lang);
}
// 使用示例
//
//
切换后页面立即更新，且下次访问会记住上次选择。
基本上就这些。这种方案无需构建工具，兼容性好，适合嵌入任何静态页面。关键在于结构清晰、标记统一、语言包易维护。随着项目变大，可考虑升级到 i18next 或框架专用方案，但原理相通。不复杂但容易忽略的是保持 key 的一致性与可读性，比如使用命名空间：header.login、footer.copyright 等。
