javascript多语言词条导出推荐静态对象+es模块:按语言分文件默认导出(如zh.js、en.js),或单文件命名导出(zh/en常量+availablelocales数组),可选配t()翻译函数支持参数替换,注意避免动态值、保持键名一致、配置路径别名。

在 JavaScript 中,用 export 导出多语言切换的翻译词条,核心是把不同语言的键值对组织成模块化对象,再通过命名导出或默认导出提供给其他文件使用。不需要运行时动态加载语言包时,推荐用静态对象 + ES 模块方式管理。
按语言拆分成独立模块导出
为每种语言建一个文件(如 zh.js、en.js),各自用 export default 导出纯对象:
// locales/zh.js
export default {
home_title: '首页',
login_btn: '登录',
welcome: '欢迎回来,{{name}}!'
};
// locales/en.js
export default {
home_title: 'Home',
login_btn: 'Login',
welcome: 'Welcome back, {{name}}!'
};
这样其他文件可按需导入:
import zh from './locales/zh.js';
import en from './locales/en.js';
const messages = { zh, en };
用命名导出统一管理所有语言
如果偏好单文件集中维护,可用命名导出(named export)避免默认导出冲突:
// locales/index.js
export const zh = {
home_title: '首页',
login_btn: '登录'
};
export const en = {
home_title: 'Home',
login_btn: 'Login'
};
// 也可额外导出语言列表,方便遍历
export const availableLocales = ['zh', 'en'];
使用时解构导入更清晰:
import { zh, en, availableLocales } from './locales/index.js';
支持带参数的翻译函数(可选增强)
单纯导出对象不够灵活?可以配合一个轻量翻译函数一起导出:
// locales/utils.js
export function t(messages, key, replacements = {}) {
let text = messages[key] || key;
Object.entries(replacements).forEach(([k, v]) => {
text = text.replace(`{{${k}}}`, v);
});
return text;
}
结合前面的语言包使用:
import { zh } from './locales/index.js';
import { t } from './locales/utils.js';
console.log(t(zh, 'welcome', { name: '小明' })); // "欢迎回来,小明!"
注意点:避免常见陷阱
-
不要在导出对象里写执行逻辑:比如
new Date().getFullYear()这类动态值会只在模块加载时求值一次,后续不更新 - 键名保持一致且语义化:所有语言文件用完全相同的 key,便于校验和 IDE 提示
-
路径别名配置可提升可读性:在构建工具(Vite、Webpack)中配
@/locales别名,避免 ../../../ 深层路径 -
JSON 不支持 export:想用 .json 存词条?得靠构建工具插件(如 Vite 的
vite-plugin-json)或改用fetch动态加载,无法直接importJSON 并export
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











