写100个前端效率工具(3):国际化 js 库 yyq-i18n
2025年7月4日 16:57
我们开发前端产品时,有时候会涉及到适应不同国家或者地区,这时候,我们需要根据不同国家或者地区的语言进行国际化处理。
yyq-i18n 是一个很mini的国际化库,可以帮助我们快速实现国际化处理。当然了,需要自行写集成如 Vue、React 等响应绑定处理,很简单的啦。
📦 安装指南
选择你喜欢的包管理器安装:
# npm
npm install yyq-i18n@latest
# yarn
yarn add yyq-i18n@latest
# pnpm
pnpm add yyq-i18n@latest
✨ 核心优势:
- 轻量级 - 代码体积小,没有外部依赖
- 框架无关 - 不依赖于任何前端框架,可在任何JavaScript环境中使用
- 简单直接 - API简洁,容易理解和使用
- 定制灵活 - 可以根据你想要的,轻松修改和扩展
1、轻量级
除了定义外,核心代码实际上就30行左右,没有外部依赖。
2、框架无关
使用 Typescript 和 ES6 编写,(打包后的代码)可以使用在任何 JavaScript 环境中。
3、简单直接
为什么说简单直接呢,你们往下看看就知道了。
add 方法
如其名,add
就是用来添加语言资源。
import { Locale, add, use, t } from 'yyq-i18n'
const zhCNJson = { lang: '中文简体' }
add('zh-CN', zhCNJson)
use('zh-CN')
console.log('currentLang', Locale.currentLang) // zh-CN
console.log('currentResource', Locale.currentResource) // { lang: '中文简体' }
merge 方法
merge
方法用于合并语言资源。不知道有没有用处,先放着。
import { Locale, add, merge, use, t } from 'yyq-i18n'
const zhCNJson = { lang: '中文简体' }
add('zh-CN', zhCNJson)
use('zh-CN')
console.log('currentResource', Locale.currentResource) // { lang: '中文简体' }
// 扩展
merge('zh-CN', { more: '我是后边来的更多内容' })
console.log('currentResource', Locale.currentResource) // { lang: '中文简体'。 more: '我是后边来的更多内容' }
use 方法
use
方法用于切换语言,比如说自动获取当前所在的语言。
import { Locale, use } from 'yyq-i18n'
console.log('currentLang', Locale.currentLang) // zh-CN
// 假设返回: zh-TW
const userAgentLang = navigator.language || navigator.userLanguage
use(userAgentLang)
console.log('currentLang', Locale.currentLang) // zh-TW
t 方法
t
方法,根据传入的参数,替换成当前设置的语言所在的翻译文本。支持默认值处理、插值处理。
type funcT = <T extends string>(key: PropertyKey, paramsOrDefaultValue?: Partial<Resource> | T) => ValueOf<Resource> | T
import { Locale, add, use, t } from 'yyq-i18n'
const zhCNJson = { lang: '中文简体', welcome: '你好,{name}', today: '{today}是{date}' }
add('zh-CN', zhCNJson)
use('zh-CN')
console.log(t('lang')) // 中文简体
// 默认值处理
console.log(t('name', '默认值'))
// 插值处理
console.log(t('welcome', { name: '张三' })) // 你好,张三
console.log(t('today', { today: '今天', date: '2025年10月1日' })) // 今天是2025年10月1日
😇 最后
yyq-i18n 希望大家喜欢,求个 star。