如何优雅的实现前端国际化?

JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!

i18next

i18next 是一个用 JavaScript 编写的全面的国际化框架,提供标准的 i18n 功能,包括复数、上下文、插值、格式等。它支持 Web、移动和桌面平台,并有针对 React、Angular、Vue.js、Next.js 等框架的集成。

在这里插入图片描述

  • i18next:https://github.com/i18next/i18next
  • React:https://github.com/i18next/react-i18next
  • Vue:https://github.com/i18next/i18next-vue
  • Next.js:https://github.com/i18next/next-i18next

react-intl

react-intl 是 FormatJS 国际化库的一部分,支持全球 150 多种语言。它简化了处理标准区域设置、日期、时间、货币和数字的任务。基于 JavaScript 的 React i18n API 构建,提供改进的 API 和组件。

在这里插入图片描述

  • Github:https://github.com/formatjs/formatjs

vue-i18n

next-translate 旨在在 Next.js 环境中简化翻译。它包括 Next.js 插件和 i18n API,支持自动页面优化,易于使用和配置,基本的 i18n 支持,以及只加载必要翻译的特性
在这里插入图片描述

  • Github:https://github.com/kazupon/vue-i18n

next-translate

next-translate 的主要目标是在 Next.js 环境中保持翻译尽可能简单。它分为两部分:Next.js 插件+ i18n API。next-translate 具有以下特性:

  • 适用于自动页面优化;
  • 易于使用和配置;
  • 基本的 i18n 支持:插值、复数、useTranslation hook、Trans 组件等;
  • 它只加载必要的翻译(针对页面和语言环境);
  • 小巧(~1kb)且可以 Tree-shaking,没有依赖性。

在这里插入图片描述

  • Github:https://github.com/aralroca/next-translate

FBT

FBT 是一个强大而直观的 JavaScript 国际化框架,帮助组织翻译源文本和编写可翻译的用户界面。

在这里插入图片描述

  • Github:https://github.com/facebook/fbt

Linguijs

Lingui 是一个简单而强大的国际化框架。其具有以下特点:

  • 代码简洁和可读:保持代码简洁和可读,而库在内部使用久经考验且功能强大的 ICU MessageFormat。
  • 通用:随处使用,@lingui/core 提供了适用于任何 JavaScript 项目的基本国际化功能,同时@lingui/react 提供组件以利用 React 渲染。
  • 完整的富文本支持:在本地化消息中使用 React 组件没有任何限制。编写富文本消息就像编写 JSX 一样简单。
  • 强大的工具:使用 Lingui CLI 管理整个国际化工作流程。它从源代码中提取消息,验证来自翻译器的消息,并检查所有消息在交付生产之前是否已翻译。
  • 不拘一格;将 Lingui 集成到现有的工作流程中。它支持消息键以及自动生成的消息。翻译存储在 JSON 或标准 PO 文件中,几乎所有翻译工具都支持这些文件。
  • 轻量级和优化:核心库 gzip 压缩后只有1.9 kb ,React 组件gzip 压缩后有额外的 3.1 kb。对于功能齐全的 intl 库,这比 Redux 要少。
    在这里插入图片描述
  • Github:https://github.com/lingui/js-lingui

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/339503.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu安装vm和Linux,安装python环境,docker和部署项目(一篇从零到部署)

1、下载Ubuntu Index of /releaseshttps://old-releases.ubuntu.com/releases/ 2、下载VMware 官方正版VMware下载(16 pro):https://www.aliyundrive.com/s/wF66w8kW9ac 下载Linux系统镜像(阿里云盘不限速)&#xff…

[数据结构 - C++] 红黑树RBTree

文章目录 1、前言2、红黑树的概念3、红黑树的性质4、红黑树节点的定义5、红黑树的插入Insert6、红黑树的验证7、红黑树与AVL树的比较附录: 1、前言 我们在学习了二叉搜索树后,在它的基础上又学习了AVL树,知道了AVL树是靠平衡因子来调节左右高…

Mybatis之关联

一、一对多关联 eg:一个用户对应多个订单 建表语句 CREATE TABLE t_customer (customer_id INT NOT NULL AUTO_INCREMENT, customer_name CHAR(100), PRIMARY KEY (customer_id) ); CREATE TABLE t_order ( order_id INT NOT NULL AUTO_INCREMENT, order_name C…

git克隆/拉取报错过早的文件结束符(EOF)的原因及解决

近期使用git拉取仓库的时候,拉取了好几次都不行,总是反馈说过早的文件结束符 总是这样,当然我的报错信息并没有描述完整,因为在我检索此类问题的时候,我发现有好多种所谓的过早的文件结束符这样的报错,但是…

机器学习实验报告——EM算法

目录 一、算法介绍 1.1算法背景 1.2算法引入 1.3算法假设 1.4算法原理 1.5算法步骤 二、算法公式推导 2.1数学基础 2.2EM算法推导 三、算法实现 3.1关于EM聚类 3.2EM工具包的使用 3.3 实例测试 四、算法讨论 4.1EM算法的优缺点 4.2EM算法的应用 4.3对于EM算法…

RT Thread Stdio生成STM32L431RCT6无法启动问题

一、问题现象 使用RT thread Stdio生成STM32L431RCT6工程后,编译下载完成后系统无法启动,无法仿真debug; 二、问题原因 如果当前使用的芯片支持包版本为0.2.3,可能是这个版本问题,目前测试0.2.3存在问题&#xff0c…

【51单片机】外部中断

0、前言 参考&#xff1a;普中 51 单片机开发攻略 第16章 及17章 1、硬件 2、软件 #include <reg52.h> #include <intrins.h> #include "delayms.h"typedef unsigned char u8; typedef unsigned int u16;sbit led P2^0; sbit key3 P3^2;//外部中断…

晨控CK-FR03-EC与欧姆龙NX系列EtherCAT通讯连接说明手册

晨控CK-FR03-EC与欧姆龙NX系列EtherCAT通讯连接说明手册 晨控CK-FR03-EC是一款基于射频识别技术的高频RFID标签读卡器&#xff0c;读卡器工作频率为13.56MHZ&#xff0c;支持对I-CODE 2、I-CODE SLI等符合ISO15693国际标准协议格式标签的读取。 读卡器同时支持标准工业通讯协…

机器学习周记(第二十六周:文献阅读-DPGCN)2024.1.15~2024.1.21

目录 摘要 ABSTRACT 1 论文信息 1.1 论文标题 1.2 论文摘要 1.3 论文背景 2 论文模型 2.1 问题描述 2.2 论文模型 2.2.1 时间感知离散图结构估计&#xff08;Time-aware Discrete Graph Structure Estimation Module&#xff0c;TADG Module&#xff09; 2.2.2 时间…

HNU-数据挖掘-实验2-数据降维与可视化

数据挖掘课程实验实验2 数据降维与可视化 计科210X 甘晴void 202108010XXX 文章目录 数据挖掘课程实验<br>实验2 数据降维与可视化实验背景实验目标实验数据集说明实验参考步骤实验过程1.对数据进行初步降维2.使用无监督数据降维方法&#xff0c;比如PCA&#xff0c;I…

网络要素服务(WFS)详解

文章目录 1. 概述2. GetCapabilities3. DescribeFeatureType4. GetFeature4.1 Get访问方式4.2 Post访问方式 5. Transaction5.1 Insert5.2 Replace5.3 Update5.4 Delete 6 注意事项 1. 概述 前置文章&#xff1a; 地图服务器GeoServer的安装与配置 GeoServer发布地图服务&#…

外汇天眼:每一个骗局的背后,可能是倾家荡产!

在网络科技还没有发达的以前&#xff0c;骗子主要通过线下揽客的方式推荐各类虚假的投资理财项目&#xff0c;有的甚至打着专门的理财咨询机构吸引了一大批新手投资者。在当时&#xff0c;外汇投资还不为多数人知道&#xff0c;随便忽悠“高利益保本”就有投资者上当受骗。 现如…

LINUX常用工具之sudo权限控制

一、Sudo基本介绍 sudo是Linux 中用于允许特定用户以超级用户或其他特权用户的身份执行特定的命令或任务。sudo 提供了一种安全的方法&#xff0c;使用户能够临时获取额外的权限&#xff0c;而不需要以完全超级用户的身份登录系统。sudo也可以用了设置黑名单命令清单&#xff…

多列匹配,根据对应状态、排序字段

多列匹配&#xff0c;根据对应状态、排序字段 数据&#xff1a; 查询:

Golang leetcode28 找出字符串中第一个匹配项的下标 KMP算法详解

文章目录 找出字符串中第一个匹配项的下标 leetcode28 串的模式匹配问题暴力求解使用KMP模式匹配算法KMP算法简述 KMP算法的代码实现 找出字符串中第一个匹配项的下标 leetcode28 串的模式匹配问题 暴力求解 func strStr(haystack string, needle string) int { L : len(need…

大模型笔记【3】 gem5 运行模型框架LLama

一 LLama.cpp LLama.cpp 支持x86&#xff0c;arm&#xff0c;gpu的编译。 1. github 下载llama.cpp https://github.com/ggerganov/llama.cpp.git 2. gem5支持arm架构比较好&#xff0c;所以我们使用编译LLama.cpp。 以下是我对Makefile的修改 开始编译&#xff1a; make UNAME…

用pandas实现用前一行的excel的值填充后一行

今天接到一份数据需要分析&#xff0c;数据在一个excel文件里&#xff0c;内容大概形式如下&#xff1a; 后面空的格子里的值就是默认是前面的非空的值&#xff0c;由于数据分析的需要需要对重复的数据进行去重&#xff0c;去重就需要把控的cell的值补上&#xff0c;然后根据几…

2024 前端高频面试题之 JS 篇

JS 篇&#xff08;持续更新中&#xff09; 1、什么是原型、原型链&#xff1f;2、什么是继承&#xff1f;说一说有哪些&#xff1f;继承组合的原理及优点&#xff1f;3、new 操作符具体干了什么&#xff1f;4、js 有哪些方法改变 this 指向&#xff1f;5、bind 有哪些实现的注意…

时空预测网络ST-Resnet 代码复现

ST-ResNet&#xff08;Spatio-Temporal Residual Network&#xff09;是一种用于处理时空数据的深度学习模型&#xff0c;特别适用于视频、时间序列等具有时空结构的数据。下面是一个简单的使用PyTorch搭建ST-ResNet的示例代码。请注意&#xff0c;这只是一个基本的示例&#x…

一文了解国密算法SSL证书

国密算法是中国国家密码管理局发布的一组密码算法标准&#xff0c;用于替代国际上的一些加密算法。在SSL证书中&#xff0c;使用国密算法的证书通常称为"国密SSL证书"。 国密SSL证书与传统的SSL证书在加密算法上有所不同。传统SSL证书通常使用的是RSA或者ECC&#xf…