前端国际化最佳实践：让你的网站走向世界

优质文章学习记录

— 5 min read

前端国际化最佳实践：让你的网站走向世界

毒舌时刻

前端国际化？这不是大公司才需要的吗？

"我的网站只面向国内用户，要什么国际化"——结果业务拓展到海外，临时抱佛脚，
"我直接用中文写死，多简单"——结果需要支持英文时，满世界找字符串，
"我用Google翻译，多快"——结果翻译质量差，用户体验差。

醒醒吧，国际化不是可选的，而是现代前端开发的标配！

为什么你需要这个？

  • 全球用户覆盖：吸引来自不同国家和地区的用户
  • 业务拓展：为未来的海外业务做准备
  • 用户体验：让用户使用自己熟悉的语言
  • 品牌形象：展现专业、全球化的品牌形象
  • 合规要求：满足某些国家的语言法规要求

反面教材

// 反面教材：硬编码字符串 function Header() { return ( <div className="header"> <h1>欢迎来到我的网站</h1> <nav> <a href="/">首页</a> <a href="/about">关于我们</a> <a href="/contact">联系我们</a> </nav> </div> ); } // 反面教材：手动切换语言 function App() { const [language, setLanguage] = useState('zh'); const getText = (key) => { const texts = { zh: { welcome: '欢迎', about: '关于我们', contact: '联系我们' }, en: { welcome: 'Welcome', about: 'About Us', contact: 'Contact Us' } }; return texts[language][key]; }; return ( <div> <button onClick={() => setLanguage('zh')}>中文</button> <button onClick={() => setLanguage('en')}>English</button> <h1>{getText('welcome')}</h1> {/* 其他内容 */} </div> ); }

正确的做法

// 正确的做法：使用专业的国际化库 // 安装依赖：npm install i18next react-i18next // i18n.js import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import zh from './locales/zh.json'; import en from './locales/en.json'; import ja from './locales/ja.json'; // 配置i18next i18n .use(initReactI18next) .init({ resources: { zh: { translation: zh }, en: { translation: en }, ja: { translation: ja } }, lng: 'zh', // 默认语言 fallbackLng: 'en', // 回退语言 interpolation: { escapeValue: false // React已经默认转义 }, // 检测用户浏览器语言 detection: { order: ['navigator', 'localStorage', 'cookie'], caches: ['localStorage', 'cookie'] } }); export default i18n; // locales/zh.json /* { "welcome": "欢迎来到我的网站", "nav": { "home": "首页", "about": "关于我们", "contact": "联系我们" }, "greeting": "你好，{{name}}！", "count": "你有 {{count}} 条消息", "date": "今天是 {{date}}" } */ // locales/en.json /* { "welcome": "Welcome to my website", "nav": { "home": "Home", "about": "About Us", "contact": "Contact Us" }, "greeting": "Hello, {{name}}!", "count": "You have {{count}} messages", "date": "Today is {{date}}" } */ // 正确的做法：在组件中使用 import React from 'react'; import { useTranslation } from 'react-i18next'; function Header() { const { t } = useTranslation(); return ( <div className="header"> <h1>{t('welcome')}</h1> <nav> <a href="/">{t('nav.home')}</a> <a href="/about">{t('nav.about')}</a> <a href="/contact">{t('nav.contact')}</a> </nav> </div> ); } function Greeting({ name }) { const { t } = useTranslation(); return ( <div> {/* 带参数的翻译 */} <p>{t('greeting', { name })}</p> </div> ); } // 正确的做法：语言切换组件 import React from 'react'; import { useTranslation } from 'react-i18next'; function LanguageSwitcher() { const { i18n } = useTranslation(); const changeLanguage = (lng) => { i18n.changeLanguage(lng); }; return ( <div className="language-switcher"> <button onClick={() => changeLanguage('zh')}>中文</button> <button onClick={() => changeLanguage('en')}>English</button> <button onClick={() => changeLanguage('ja')}>日本語</button> </div> ); } // 正确的做法：日期和时间本地化 import React from 'react'; import { useTranslation } from 'react-i18next'; import { format } from 'date-fns'; import { zhCN, enUS, ja } from 'date-fns/locale'; function LocalizedDate() { const { i18n } = useTranslation(); const currentDate = new Date(); // 根据当前语言选择对应的locale const getLocale = () => { switch (i18n.language) { case 'zh': return zhCN; case 'en': return enUS; case 'ja': return ja; default: return enUS; } }; const formattedDate = format(currentDate, 'yyyy年MM月dd日 EEEE', { locale: getLocale() }); return ( <div> <p>{formattedDate}</p> </div> ); } // 正确的做法：数字本地化 function LocalizedNumber({ number }) { const { i18n } = useTranslation(); const formattedNumber = new Intl.NumberFormat(i18n.language).format(number); return ( <div> <p>{formattedNumber}</p> </div> ); } // 正确的做法：货币本地化 function LocalizedCurrency({ amount, currency }) { const { i18n } = useTranslation(); const formattedCurrency = new Intl.NumberFormat(i18n.language, { style: 'currency', currency: currency }).format(amount); return ( <div> <p>{formattedCurrency}</p> </div> ); } // 正确的做法：RTL语言支持 // 在CSS中添加 /* [dir="rtl"] { text-align: right; } [dir="rtl"] .nav { flex-direction: row-reverse; } */ function App() { const { i18n } = useTranslation(); // 根据当前语言设置direction React.useEffect(() => { const rtlLanguages = ['ar', 'he', 'fa']; document.documentElement.dir = rtlLanguages.includes(i18n.language) ? 'rtl' : 'ltr'; }, [i18n.language]); return ( <div> <LanguageSwitcher /> <Header /> <Greeting name="张三" /> <LocalizedDate /> <LocalizedNumber number={1234567.89} /> <LocalizedCurrency amount={100} currency="CNY" /> </div> ); } // 正确的做法：使用i18next-http-backend加载翻译 // 安装依赖：npm install i18next-http-backend /* import Backend from 'i18next-http-backend'; i18n .use(Backend) .use(initReactI18next) .init({ backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' }, // 其他配置... }); */ // 正确的做法：使用i18next-scanner自动提取翻译 // package.json /* { "scripts": { "i18n:scan": "i18next-scanner --config i18next-scanner.config.js src" } } */ // i18next-scanner.config.js /* module.exports = { input: [ 'src/**/*.{js,jsx,ts,tsx}', ], output: './locales', options: { lngs: ['zh', 'en', 'ja'], defaultLng: 'zh', ns: ['translation'], defaultValue: (lng, ns, key) => key, resourceKeySeparator: '.', nsSeparator: ':', interpolation: { prefix: '{{', suffix: '}}' } } }; */

毒舌点评

看看，这才叫前端国际化最佳实践！不是简单地手动切换字符串，而是使用专业的国际化库，统一管理翻译资源，支持日期、时间、数字、货币的本地化，甚至支持RTL语言。

记住，国际化不仅仅是翻译文本，还包括日期、时间、数字、货币等格式的本地化，以及RTL（从右到左）语言的支持。

所以，别再觉得国际化麻烦了，它是你网站走向世界的必备技能！

总结

  • 使用专业库：如i18next、react-intl等
  • 统一管理翻译资源：将翻译文本放在单独的JSON文件中
  • 支持参数化翻译：处理带变量的文本
  • 自动检测语言：根据用户浏览器设置自动切换语言
  • 本地化格式：处理日期、时间、数字、货币的本地化
  • RTL支持：支持从右到左的语言如阿拉伯语
  • 懒加载翻译：按需加载翻译资源，减少包大小
  • 自动提取翻译：使用工具自动提取需要翻译的字符串

前端国际化最佳实践，让你的网站走向世界！

Read more

在昇腾NPU上跑Llama 2模型：一次完整的性能测试与实战通关指南

在昇腾NPU上跑Llama 2模型：一次完整的性能测试与实战通关指南

目录 * 在昇腾NPU上跑Llama 2模型：一次完整的性能测试与实战通关指南 * 引言：从“为什么选择昇腾”开始 * 第一幕：环境搭建——好的开始是成功的一半 * 1.1 GitCode Notebook 创建“避坑指南” * 1.2 环境验证：“Hello, NPU!” * 第二幕：模型部署——从下载到运行的“荆棘之路” * 2.1 安装依赖与模型下载 * 2.2 核心部署代码与“坑”的化解 * 第三幕：性能测试——揭开昇腾NPU的真实面纱 * 3.1 严谨的性能测试脚本 * 3.2 测试结果与分析 * 第四幕：性能优化——让Llama跑得更快 * 4.1 使用昇腾原生大模型框架 * 4.
什么是FPGA？和单片机/CPU的本质区别

什么是FPGA？和单片机/CPU的本质区别

本文是《FPGA入门到实战》专栏第1篇，适合完全零基础的同学。读完本篇，你将彻底搞清楚 FPGA 是什么、和 CPU/MCU/ASIC 的本质区别，以及为什么值得学。 什么是FPGA？和单片机/CPU的本质区别 * 1、先从一个问题开始 * 2、什么是 FPGA？ * 3、FPGA vs CPU vs MCU vs ASIC：本质区别 * 3.1 CPU（通用处理器） * 3.2 MCU（微控制器/单片机） * 3.3 ASIC（专用集成电路） * 3.4 FPGA * 3.5 四者对比表

ios 26的tabbar 背景透明

if#available(iOS 13.0, *){             let appearance = UITabBarAppearance()             appearance.configureWithTransparentBackground()             // 移除阴影和边框             appearance.shadowColor = .clear             appearance.shadowImage = UIImage()             appearance.backgroundImage = UIImage()             // 设置标准外观             tabBar.standardAppearance = appearance             // iOS 15 需要设置 scrollEdgeAppearance             if#available(iOS 15.0, *) {                 tabBar.sc
Python——搭建一个有记忆，可以人工干预转人工，调用搜索工具的机器人

Python——搭建一个有记忆，可以人工干预转人工，调用搜索工具的机器人

Python——搭建一个有记忆，可以人工干预转人工，调用搜索工具的机器人 前言 在看了LangGraph官网：https://github.langchain.ac.cn/langgraph/concepts/why-langgraph/ 的教程之后，也是跟着教程做了一个简单的聊天机器人作为初始的一个计划，为啥学的是python的LangGraph呢？我本身学习的就是JAVA，实习找的也是JAVA的工作，但是JAVA确实太卷了，本人之前没有背过八股文，有幸进入一家外包公司java实习，也参与过项目的开发，但是现在的AI发展的很快，我一开始实习的时候，会以为我可能跟不上，因为这是我的第一段实习，可结果确实有着AI的开发辅助，我就发现，很快就可以上手开发，但是要注意提示词，并且规范好，开发的代码格式等。然后又对大模型应用开发这些感兴趣，于是开始慢慢的学了起来。 前置准备 前置准备分为环境和APIkey的获取，这些就不再进行重复了，都放在前面的文章里面有，大家感兴趣的可以看看就行了，包括.env我们也不再进行重复 环境配置 python3.12(python 3.9+)