写100个前端效率工具(3):国际化 js 库 yyq-i18n

0 阅读2分钟

我们开发前端产品时,有时候会涉及到适应不同国家或者地区,这时候,我们需要根据不同国家或者地区的语言进行国际化处理。

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。