前端国际化实现方案：让你的应用走向全球

优质文章学习记录

— 6 min read

前端国际化实现方案：让你的应用走向全球

毒舌时刻

国际化？听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便加个i18n库就能实现国际化？别做梦了！到时候你会发现，翻译文件比代码还多，维护起来比代码还麻烦。

你以为翻译就是简单的文本替换？别天真了！不同语言的语法结构不同，直接替换会导致语法错误。还有那些所谓的国际化库，看起来高大上，用起来却各种问题。

为什么你需要这个

  1. 全球用户：国际化可以让你的应用支持全球用户，扩大用户群体。
  2. 用户体验：使用用户的母语可以提高用户体验，增加用户粘性。
  3. 市场竞争力：支持多语言的应用在国际市场上更具竞争力。
  4. 合规要求：某些国家和地区要求应用提供当地语言支持。
  5. 品牌形象：支持多语言可以提升品牌的国际化形象。

反面教材

// 1. 硬编码文本 function Welcome() { return <h1>Welcome to our app!</h1>; } // 2. 简单文本替换 const translations = { en: { welcome: 'Welcome to our app!', login: 'Login', register: 'Register' }, zh: { welcome: '欢迎使用我们的应用！', login: '登录', register: '注册' } }; function Welcome() { const lang = 'zh'; return <h1>{translations[lang].welcome}</h1>; } // 3. 忽略复数形式 function ItemCount({ count }) { const lang = 'en'; return <p>You have {count} item(s) in your cart.</p>; } // 4. 忽略日期和时间格式 function OrderDate({ date }) { return <p>Order date: {date.toLocaleString()}</p>; } // 5. 忽略货币格式 function ProductPrice({ price }) { return <p>Price: ${price}</p>; }

问题：

  • 硬编码文本，难以维护和翻译
  • 简单文本替换，无法处理复杂的翻译场景
  • 忽略复数形式，在不同语言中可能不正确
  • 忽略日期和时间格式，在不同地区可能显示错误
  • 忽略货币格式，在不同国家可能显示错误

正确的做法

使用i18next

// 1. 安装 // npm install i18next react-i18next // 2. 配置 import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; const resources = { en: { translation: { welcome: 'Welcome to our app!', login: 'Login', register: 'Register', itemCount: 'You have {{count}} item(s) in your cart.', itemCount_plural: 'You have {{count}} items in your cart.', orderDate: 'Order date: {{date}}', productPrice: 'Price: {{price}}' } }, zh: { translation: { welcome: '欢迎使用我们的应用！', login: '登录', register: '注册', itemCount: '您的购物车中有 {{count}} 件商品。', orderDate: '订单日期：{{date}}', productPrice: '价格：{{price}}' } } }; i18n .use(initReactI18next) .init({ resources, lng: 'en', fallbackLng: 'en', interpolation: { escapeValue: false } }); export default i18n; // 3. 使用 import React from 'react'; import { useTranslation } from 'react-i18next'; function Welcome() { const { t } = useTranslation(); return <h1>{t('welcome')}</h1>; } function ItemCount({ count }) { const { t } = useTranslation(); return <p>{t('itemCount', { count })}</p>; } // 4. 切换语言 import React from 'react'; import { useTranslation } from 'react-i18next'; function LanguageSelector() { const { i18n } = useTranslation(); const changeLanguage = (lng) => { i18n.changeLanguage(lng); }; return ( <div> <button onClick={() => changeLanguage('en')}>English</button> <button onClick={() => changeLanguage('zh')}>中文</button> </div> ); }

处理复数形式

// 1. 配置复数规则 import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; const resources = { en: { translation: { itemCount: 'You have {{count}} item in your cart.', itemCount_plural: 'You have {{count}} items in your cart.' } }, zh: { translation: { itemCount: '您的购物车中有 {{count}} 件商品。' } } }; i18n .use(initReactI18next) .init({ resources, lng: 'en', fallbackLng: 'en', interpolation: { escapeValue: false } }); // 2. 使用复数形式 import React from 'react'; import { useTranslation } from 'react-i18next'; function ItemCount({ count }) { const { t } = useTranslation(); return <p>{t('itemCount', { count, plural: count !== 1 })}</p>; }

处理日期和时间格式

// 1. 使用Intl.DateTimeFormat function FormatDate({ date }) { const { i18n } = useTranslation(); const locale = i18n.language; return ( <p> {new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(date)} </p> ); } // 2. 结合i18next使用 import React from 'react'; import { useTranslation } from 'react-i18next'; function OrderDate({ date }) { const { t, i18n } = useTranslation(); const locale = i18n.language; const formattedDate = new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date); return <p>{t('orderDate', { date: formattedDate })}</p>; }

处理货币格式

// 1. 使用Intl.NumberFormat function FormatPrice({ price, currency = 'USD' }) { const { i18n } = useTranslation(); const locale = i18n.language; return ( <p> {new Intl.NumberFormat(locale, { style: 'currency', currency }).format(price)} </p> ); } // 2. 结合i18next使用 import React from 'react'; import { useTranslation } from 'react-i18next'; function ProductPrice({ price, currency = 'USD' }) { const { t, i18n } = useTranslation(); const locale = i18n.language; const formattedPrice = new Intl.NumberFormat(locale, { style: 'currency', currency }).format(price); return <p>{t('productPrice', { price: formattedPrice })}</p>; }

处理RTL语言

// 1. 检测RTL语言 function isRTL(lang) { const rtlLanguages = ['ar', 'he', 'fa', 'ur']; return rtlLanguages.includes(lang); } // 2. 设置RTL样式 import React, { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; function App() { const { i18n } = useTranslation(); useEffect(() => { if (isRTL(i18n.language)) { document.documentElement.dir = 'rtl'; document.documentElement.lang = i18n.language; } else { document.documentElement.dir = 'ltr'; document.documentElement.lang = i18n.language; } }, [i18n.language]); return ( <div> {/* 应用内容 */} </div> ); }

最佳实践

// 1. 分离翻译文件 // public/locales/en/translation.json { "welcome": "Welcome to our app!", "login": "Login", "register": "Register" } // public/locales/zh/translation.json { "welcome": "欢迎使用我们的应用！", "login": "登录", "register": "注册" } // 2. 配置i18next import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import Backend from 'i18next-http-backend'; import LanguageDetector from 'i18next-browser-languagedetector'; i18n .use(Backend) .use(LanguageDetector) .use(initReactI18next) .init({ fallbackLng: 'en', interpolation: { escapeValue: false } }); export default i18n; // 3. 使用命名空间 // public/locales/en/common.json { "login": "Login", "register": "Register" } // public/locales/en/home.json { "welcome": "Welcome to our app!" } // 使用命名空间 import React from 'react'; import { useTranslation } from 'react-i18next'; function Home() { const { t } = useTranslation(['home', 'common']); return ( <div> <h1>{t('welcome')}</h1> <button>{t('login', { ns: 'common' })}</button> <button>{t('register', { ns: 'common' })}</button> </div> ); } // 4. 动态加载翻译 import React, { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; function DynamicComponent() { const { t, i18n } = useTranslation(); useEffect(() => { // 动态加载翻译 i18n.loadNamespaces('dynamic'); }, [i18n]); return <p>{t('dynamicText', { ns: 'dynamic' })}</p>; }

毒舌点评

国际化确实很重要，但我见过太多开发者滥用这个特性，导致应用变得过于复杂。

想象一下，当你为了支持多语言，创建了大量的翻译文件，结果导致维护成本增加，这真的值得吗？

还有那些过度使用国际化库的开发者，为了使用某个库，而忽略了项目的实际需求，结果导致代码变得过于复杂。

所以，在进行国际化时，一定要把握好度。不要为了国际化而国际化，要根据实际情况来决定国际化的范围。

当然，对于面向全球用户的应用来说，国际化是必要的。但对于只面向特定地区用户的应用，过度的国际化反而会增加开发成本和维护难度。

最后，记住一句话：国际化的目的是为了提高用户体验，而不是为了炫技。如果你的国际化实现导致用户体验变得更差，那你就失败了。

Read more

HTML前端也能接入大模型API：OpenAI兼容接口快速部署指南

HTML前端也能接入大模型API：OpenAI兼容接口快速部署指南 在智能应用开发日益普及的今天，越来越多开发者希望将大语言模型（LLM）的能力直接嵌入网页——比如让一个简单的HTML页面具备对话、写作甚至看图说话的功能。但现实往往令人却步：模型部署复杂、硬件要求高、前后端对接繁琐……尤其是对只熟悉JavaScript和浏览器环境的前端工程师来说，这些门槛几乎成了“技术鸿沟”。 有没有可能，不写一行后端代码，就能让一个纯静态网页调用本地大模型？答案是肯定的。借助 ms-swift 框架提供的 OpenAI 兼容接口，我们完全可以做到这一点。 设想这样一个场景：你正在开发一款企业内部的知识问答系统，出于数据安全考虑，不能使用公有云API。传统做法是搭建Node.js代理服务，把请求转发给本地模型，再处理响应返回给前端。整个流程涉及身份验证、错误重试、流式传输等多个环节，开发成本陡增。 而现在，只需一条命令启动推理服务，前端依然沿用原本调用 https://api.openai.com/v1/chat/completions 的逻辑，仅需将URL替换为 http:
【征文计划】玩转 Rokid JSAR：基于 Web 技术栈的 AR 开发环境搭建、核心 API 应用与 3D 时钟等创意项目全流程解析

【征文计划】玩转 Rokid JSAR：基于 Web 技术栈的 AR 开发环境搭建、核心 API 应用与 3D 时钟等创意项目全流程解析

【征文计划】玩转 Rokid JSAR：基于 Web 技术栈的 AR 开发环境搭建、核心 API 应用与 3D 时钟等创意项目全流程解析 前言 随着 AR 技术在消费级场景的普及，开发者对 “低门槛、高兼容” AR 开发工具需求愈发迫切，传统 AR 开发往往依赖专属引擎或复杂语法，导致 Web 开发者难以快速切入，而 Rokid 推出的 JSAR 技术，恰好打破了这一壁垒：以 “可嵌入空间的 Web 运行时” 为核心，让开发者无需学习新的开发范式，仅用 JavaScript/TypeScript 等熟悉的 Web 技术栈，就能快速开发出支持 3D 物体、
【Spring Boot开发实战手册】掌握Springboot开发技巧和窍门（十三）前端匹配界面、后端匹配WebSocket

【Spring Boot开发实战手册】掌握Springboot开发技巧和窍门（十三）前端匹配界面、后端匹配WebSocket

前言 在现代 Web 开发中，前端和后端的协作变得越来越重要，特别是在需要实时交互和数据更新的应用场景中。WebSocket 技术作为一种全双工通信协议，使得前端和后端之间的实时数据传输变得更加高效和稳定。本篇博客将会探讨如何设计和实现一个实时匹配系统，其中前端负责展示用户界面并与后端进行交互，而后端则通过 WebSocket 协议来处理数据通信。 前端 onMounted: 当组件被挂载的时候执行的函数 onUnmonted: 当组件被卸载的时候执行的函数 初步调试阶段，我们是将token传进user.id的 store/pk.js: import ModuleUser from'./user'exportdefault{state:{socket:null,//ws链接opponent_username:"",opponent_photo:"",status:"matching",//matching表示匹配界面，playing表示对战界面},getters:
什么是 Session？Web 开发中 Session 的使用与注意事项

什么是 Session？Web 开发中 Session 的使用与注意事项

✅ 引言 在 Web 开发中，HTTP 协议是无状态的，这意味着每次请求之间没有关联。为了实现用户登录、购物车、权限控制等功能，服务器需要一种机制来“记住”用户。Session（会话） 就是解决这一问题的核心技术之一。 本文将深入讲解： * 什么是 Session？ * Session 的工作原理 * 在 Java Web 和 Spring Boot 中如何使用 Session * 使用 Session 的最佳实践与常见注意事项 * 安全风险与应对策略 并提供完整的 Java + Spring Boot 示例代码，帮助你全面掌握 Session 的使用。 📌 一、什么是 Session？ 1.1 基本定义 Session（会话）是服务器端用于保存用户状态的一种机制。