1、AI程序员系列文章2、AI面试系列文章3、AI编程系列文章目录开篇当你好变成مرحبا第一章国际化核心概念——别再把i18n当密码1.1 国际化 vs 本地化1.2 Locale 到底是什么1.3 国际化覆盖范围第二章方案选型——三大框架的三国杀2.1 主流方案对比2.2 React 实战react-i18next2.3 Vue 实战vue-i18n2.4 FormatJS (React Intl)第三章翻译文件管理——从JSON到Excel的进化论3.1 翻译文件格式对比3.2 JSON 结构最佳实践3.3 Excel 导入导出工具第四章RTL语言适配——当界面开始反向行驶4.1 什么是 RTL4.2 CSS 逻辑属性4.3 方向感知布局4.4 镜像与非镜像元素第五章动态切换与持久化——让用户说了算5.1 语言切换组件5.2 语言持久化方案5.3 语言切换动画第六章实战案例——从1种语言到20种的蜕变6.1 项目背景6.2 迁移策略6.3 性能优化开篇当你好变成مرحبا你是否遇到过产品需要出海多语言支持复杂文本翻译管理混乱RTL语言适配困难的痛苦场景前端国际化是产品全球化的必经之路。网上搜到的国际化教程要么太浅要么没有系统性方案。本文将从原理到实战给出一个零成本上手方案包含完整代码和避坑指南。效率技巧国际化不是简单的翻译替换而是一套完整的产品工程化体系。越早规划后期成本越低。第一章国际化核心概念——别再把i18n当密码1.1 国际化 vs 本地化先搞清楚几个容易混淆的概念┌─────────────────────────────────────────────────────────────┐ │ 全球化 (Globalization) │ │ g11n │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ 国际化 (i18n) │ │ 本地化 (l10n) │ │ │ │ Internationalization│ │ Localization │ │ │ │ │ │ │ │ │ │ 让产品具备支持 │ │ 让产品适应特定 │ │ │ │ 多语言的能力 │ │ 地区的习惯 │ │ │ │ │ │ │ │ │ │ • 文本抽取 │ │ • 翻译内容 │ │ │ │ • 日期/数字格式 │ │ • 文化适配 │ │ │ │ • 布局方向支持 │ │ • 本地法规 │ │ │ └─────────────────────┘ └─────────────────────┘ │ └─────────────────────────────────────────────────────────────┘简单记忆法i18n 让产品能说多种语言能力建设l10n 让产品在某个地方说得地道内容适配⚠️避坑警告很多团队把i18n和l10n混为一谈结果开发阶段没考虑RTL布局等产品要进中东市场时才发现整个UI需要重写1.2 Locale 到底是什么Locale 是标识特定地区语言文化的字符串通常格式为语言[_地区][.编码]zh_CN.UTF-8 │ │ │ │ │ └── 字符编码 │ └────── 国家/地区 └────────── 语言代码 常见 Locale 示例 ┌──────────┬─────────────────┬────────────────────────┐ │ Locale │ 语言 │ 说明 │ ├──────────┼─────────────────┼────────────────────────┤ │ en │ 英语 │ 通用英语 │ │ en_US │ 美式英语 │ 美国地区英语 │ │ en_GB │ 英式英语 │ 英国地区英语 │ │ zh │ 中文 │ 通用中文 │ │ zh_CN │ 简体中文 │ 中国大陆 │ │ zh_TW │ 繁体中文 │ 中国台湾 │ │ ja │ 日语 │ 日本 │ │ ar │ 阿拉伯语 │ 阿拉伯国家 │ │ he │ 希伯来语 │ 以色列 │ └──────────┴─────────────────┴────────────────────────┘效率技巧建议使用 BCP 47 语言标签如zh-CN、en-US这是国际标准各大框架都支持。1.3 国际化覆盖范围真正的国际化不只是翻译文本还包括国际化覆盖维度 ├── 文本内容 │ ├── UI 文案翻译 │ ├── 错误信息本地化 │ └── 动态内容插值 ├── 格式规范 │ ├── 日期时间格式 │ ├── 数字/货币格式 │ ├── 度量单位转换 │ └── 姓名/地址格式 ├── 布局方向 │ ├── LTR (Left-to-Right) │ └── RTL (Right-to-Left) └── 文化习俗 ├── 色彩含义 ├── 图标/图片适配 └── 节假日处理第二章方案选型——三大框架的三国杀2.1 主流方案对比┌─────────────────┬─────────────────┬─────────────────┬─────────────────┐ │ 特性 │ react-i18next │ vue-i18n │ FormatJS │ ├─────────────────┼─────────────────┼─────────────────┼─────────────────┤ │ 适用框架 │ React / 通用 │ Vue │ React / 通用 │ ├─────────────────┼─────────────────┼─────────────────┼─────────────────┤ │ 学习曲线 │ 中等 │ 低 │ 较高 │ ├─────────────────┼─────────────────┼─────────────────┼─────────────────┤ │ 功能丰富度 │ 丰富 │ 丰富 │ 中等 │ ├─────────────────┼─────────────────┼─────────────────┼─────────────────┤ │ 包体积 │ ~15KB │ ~10KB │ ~12KB │ ├─────────────────┼─────────────────┼─────────────────┼─────────────────┤ │ TypeScript │ 优秀 │ 良好 │ 优秀 │ ├─────────────────┼─────────────────┼─────────────────┼─────────────────┤ │ SSR支持 │ 良好 │ 优秀 │ 良好 │ ├─────────────────┼─────────────────┼─────────────────┼─────────────────┤ │ 插件生态 │ 丰富 │ 中等 │ 较少 │ └─────────────────┴─────────────────┴─────────────────┴─────────────────┘效率技巧如果你用 Reactreact-i18next 是社区最活跃的选择如果是 Vuevue-i18n 是官方推荐生态成熟。2.2 React 实战react-i18next安装依赖npm install react-i18next i18next i18next-http-backend i18next-browser-languagedetector初始化配置 (i18n.js)import i18n from i18next; import { initReactI18next } from react-i18next; import HttpApi from i18next-http-backend; import LanguageDetector from i18next-browser-languagedetector; i18n .use(HttpApi) // 异步加载翻译文件 .use(LanguageDetector) // 自动检测浏览器语言 .use(initReactI18next) // 绑定 React .init({ fallbackLng: zh, // 默认语言 debug: process.env.NODE_ENV development, interpolation: { escapeValue: false, // React 已经做了 XSS 防护 }, backend: { loadPath: /locales/{{lng}}/{{ns}}.json, // 翻译文件路径 }, detection: { order: [localStorage, navigator, htmlTag], caches: [localStorage], }, }); export default i18n;翻译文件结构public/ └── locales/ ├── zh/ │ └── translation.json ├── en/ │ └── translation.json └── ar/ └── translation.jsontranslation.json (中文示例){ welcome: 欢迎回来, greeting: 你好{{name}}, items_count: 你有 {{count}} 条消息, items_count_plural: 你有 {{count}} 条消息, buttons: { submit: 提交, cancel: 取消, save: 保存 }, errors: { required: 此字段为必填项, email_invalid: 请输入有效的邮箱地址 } }组件中使用import { useTranslation } from react-i18next; function UserProfile({ user }) { const { t, i18n } useTranslation(); return ( div classNameprofile {/* 简单翻译 */} h1{t(welcome)}/h1 {/* 带变量的翻译 */} p{t(greeting, { name: user.name })}/p {/* 复数处理 */} p{t(items_count, { count: user.messages.length })}/p {/* 嵌套键 */} button{t(buttons.save)}/button {/* 语言切换 */} button onClick{() i18n.changeLanguage(en)} Switch to English /button /div ); }高阶组件 (HOC) 方式import { withTranslation } from react-i18next; class LegacyComponent extends React.Component { render() { const { t } this.props; return h1{t(welcome)}/h1; } } export default withTranslation()(LegacyComponent);⚠️避坑警告不要在组件渲染时调用i18n.changeLanguage()这会导致无限重渲染。应该在用户交互如点击切换按钮时调用。2.3 Vue 实战vue-i18n安装npm install vue-i18n9 # Vue 3 版本初始化 (i18n/index.js)import { createI18n } from vue-i18n; import zh from ./locales/zh.json; import en from ./locales/en.json; import ar from ./locales/ar.json; const messages { zh, en, ar, }; const i18n createI18n({ legacy: false, // 使用 Composition API 模式 locale: zh, // 默认语言 fallbackLocale: zh, // 回退语言 messages, // 复数规则针对复杂语言 pluralRules: { // 阿拉伯语有6种复数形式 ar: (choice) { if (choice 0) return 0; if (choice 1) return 1; if (choice 2) return 2; if (choice % 100 3 choice % 100 10) return 3; if (choice % 100 11) return 4; return 5; }, }, }); export default i18n;main.js 引入import { createApp } from vue; import App from ./App.vue; import i18n from ./i18n; const app createApp(App); app.use(i18n); app.mount(#app);组件中使用template div classuser-profile !-- 简单翻译 -- h1{{ $t(welcome) }}/h1 !-- 带变量的翻译 -- p{{ $t(greeting, { name: user.name }) }}/p !-- 复数处理 -- p{{ $t(messages, user.messages.length) }}/p !-- 嵌套键 -- button{{ $t(buttons.save) }}/button !-- 语言切换 -- select v-model$i18n.locale option valuezh中文/option option valueenEnglish/option option valuearالعربية/option /select /div /template script setup import { useI18n } from vue-i18n; // Composition API 方式 const { t, locale } useI18n(); // 编程式切换语言 const switchLang (lang) { locale.value lang; }; /script翻译文件 (ar.json - 阿拉伯语示例){ welcome: مرحباً, greeting: مرحباً، {{name}}!, messages: لا رسائل | رسالة واحدة | رسالتان | {count} رسائل | {count} رسالة | {count} رسالة, buttons: { submit: إرسال, cancel: إلغاء, save: حفظ } }效率技巧vue-i18n 的复数语法使用管道符|分隔不同形式阿拉伯语有6种复数形式务必正确配置2.4 FormatJS (React Intl)适合需要 ICU MessageFormat 标准格式的项目import { IntlProvider, FormattedMessage, useIntl } from react-intl; // 使用 Hook function MyComponent() { const intl useIntl(); return ( div p {intl.formatMessage( { id: greeting, defaultMessage: Hello, {name}! }, { name: World } )} /p {/* 或使用组件 */} p FormattedMessage iditems_count values{{ count: 5 }} / /p /div ); }第三章翻译文件管理——从JSON到Excel的进化论3.1 翻译文件格式对比┌──────────┬──────────┬──────────┬──────────┬─────────────────────────────┐ │ 格式 │ 可读性 │ 易编辑 │ 版本控制 │ 适用场景 │ ├──────────┼──────────┼──────────┼──────────┼─────────────────────────────┤ │ JSON │ 良 │ 中 │ 优 │ 开发首选结构清晰 │ ├──────────┼──────────┼──────────┼──────────┼─────────────────────────────┤ │ YAML │ 优 │ 优 │ 良 │ 非技术人员友好 │ ├──────────┼──────────┼──────────┼──────────┼─────────────────────────────┤ │ CSV │ 良 │ 优 │ 中 │ 与翻译团队交接 │ ├──────────┼──────────┼──────────┼──────────┼─────────────────────────────┤ │ Excel │ 中 │ 优 │ 差 │ 大型项目多翻译协作 │ ├──────────┼──────────┼──────────┼─────────────────────────────┤ │ PO/Gettext│ 中 │ 中 │ 优 │ 传统软件本地化 │ └──────────┴──────────┴──────────┴──────────┴─────────────────────────────┘3.2 JSON 结构最佳实践扁平化 vs 嵌套// ❌ 不推荐过度嵌套 { pages: { home: { header: { title: 首页, subtitle: 欢迎 } } } } // ✅ 推荐适度扁平化 { home_title: 首页, home_subtitle: 欢迎, login_button: 登录, login_error_invalid: 用户名或密码错误 } // ✅ 或按功能模块分组 { common: { save: 保存, cancel: 取消, delete: 删除 }, user: { profile: 个人资料, settings: 设置 }, errors: { network: 网络错误, timeout: 请求超时 } }3.3 Excel 导入导出工具Node.js 脚本示例// scripts/i18n-excel.js const XLSX require(xlsx); const fs require(fs); const path require(path); const LOCALES_DIR ./src/locales; const LANGUAGES [zh, en, ja, ar]; // JSON 转 Excel给翻译人员 function jsonToExcel() { const data []; // 读取中文作为基准 const zhTranslations JSON.parse( fs.readFileSync(path.join(LOCALES_DIR, zh.json), utf-8) ); // 递归展平对象 function flatten(obj, prefix ) { const result {}; for (const key in obj) { const newKey prefix ? ${prefix}.${key} : key; if (typeof obj[key] object obj[key] ! null) { Object.assign(result, flatten(obj[key], newKey)); } else { result[newKey] obj[key]; } } return result; } const flatZh flatten(zhTranslations); // 构建 Excel 数据 for (const key in flatZh) { const row { key, description: }; LANGUAGES.forEach(lang { const translations JSON.parse( fs.readFileSync(path.join(LOCALES_DIR, ${lang}.json), utf-8) ); const flat flatten(translations); row[lang] flat[key] || ; }); data.push(row); } // 创建工作簿 const ws XLSX.utils.json_to_sheet(data); const wb XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, Translations); XLSX.writeFile(wb, ./translations.xlsx); console.log(✅ Excel 文件已生成: translations.xlsx); } // Excel 转 JSON翻译完成后导入 function excelToJson() { const workbook XLSX.readFile(./translations.xlsx); const worksheet workbook.Sheets[Translations]; const data XLSX.utils.sheet_to_json(worksheet); // 按语言分组 const translations {}; LANGUAGES.forEach(lang translations[lang] {}); data.forEach(row { const keys row.key.split(.); LANGUAGES.forEach(lang { let current translations[lang]; for (let i 0; i keys.length - 1; i) { if (!current[keys[i]]) current[keys[i]] {}; current current[keys[i]]; } current[keys[keys.length - 1]] row[lang] || ; }); }); // 写入文件 LANGUAGES.forEach(lang { fs.writeFileSync( path.join(LOCALES_DIR, ${lang}.json), JSON.stringify(translations[lang], null, 2) ); }); console.log(✅ JSON 文件已更新); } // 命令行参数 const command process.argv[2]; if (command export) jsonToExcel(); else if (command import) excelToJson(); else console.log(Usage: node i18n-excel.js [export|import]);package.json 脚本{ scripts: { i18n:export: node scripts/i18n-excel.js export, i18n:import: node scripts/i18n-excel.js import } }效率技巧给 Excel 加一列 “description” 用于说明上下文避免翻译人员看到Save不知道是保存文件还是节省。第四章RTL语言适配——当界面开始反向行驶4.1 什么是 RTLRTL (Right-to-Left) 指从右向左书写的语言主要包括阿拉伯语 (Arabic)希伯来语 (Hebrew)波斯语 (Persian/Farsi)乌尔都语 (Urdu)LTR 布局: RTL 布局: ┌──────────────────┐ ┌──────────────────┐ │ Logo Nav │ │ Nav Logo │ ├──────────────────┤ ├──────────────────┤ │ ← Text flows ← │ │ → Text flows → │ │ left to right │ │ right to left │ ├──────────────────┤ ├──────────────────┤ │ [Cancel] [Save] │ │ [Save] [Cancel] │ └──────────────────┘ └──────────────────┘4.2 CSS 逻辑属性现代 CSS 支持逻辑属性自动适配方向/* ❌ 物理属性 - 需要两套样式 */ .ltr .card { margin-left: 20px; border-left: 2px solid blue; text-align: left; } .rtl .card { margin-right: 20px; border-right: 2px solid blue; text-align: right; } /* ✅ 逻辑属性 - 一套样式走天下 */ .card { margin-inline-start: 20px; /* 逻辑起始边 */ border-inline-start: 2px solid blue; text-align: start; /* 逻辑起始对齐 */ } /* 常用逻辑属性对照表 */ ┌─────────────────────┬──────────────────────┐ │ 物理属性 │ 逻辑属性 │ ├─────────────────────┼──────────────────────┤ │ margin-left │ margin-inline-start│ │ margin-right │ margin-inline-end │ │ padding-left │ padding-inline-start│ │ padding-right │ padding-inline-end │ │ border-left │ border-inline-start│ │ border-right │ border-inline-end │ │ left: 0 │ inset-inline-start: 0│ │ right: 0 │ inset-inline-end: 0 │ │ text-align: left │ text-align: start │ │ text-align: right │ text-align: end │ └─────────────────────┴──────────────────────┘4.3 方向感知布局HTML 设置!-- 根据语言自动设置 dir 属性 -- html langar dirrtl !-- 或 -- html langen dirltrReact 中动态设置import { useEffect } from react; import { useTranslation } from react-i18next; const RTL_LANGUAGES [ar, he, fa, ur]; function App() { const { i18n } useTranslation(); useEffect(() { const isRTL RTL_LANGUAGES.includes(i18n.language); document.documentElement.dir isRTL ? rtl : ltr; document.documentElement.lang i18n.language; }, [i18n.language]); return Router /; }CSS 方向感知/* 使用 :dir() 伪类 */ .flex-container { display: flex; gap: 1rem; } /* LTR 时按钮顺序 */ .flex-container:dir(ltr) .submit-btn { order: 2; } /* RTL 时按钮顺序反转 */ .flex-container:dir(rtl) .submit-btn { order: 1; } /* 或使用属性选择器作为降级方案 */ [dirrtl] .icon-arrow { transform: scaleX(-1); }4.4 镜像与非镜像元素不是所有元素都需要镜像需要镜像的元素 不需要镜像的元素 ┌─────────────────┐ ┌─────────────────┐ │ 导航栏顺序 │ │ 进度条方向 │ │ 按钮组顺序 │ │ 视频播放控制 │ │ 边距/内边距 │ │ 图表/图形 │ │ 图标方向 │ │ 数字键盘布局 │ │ 文字对齐 │ │ 时间线方向 │ └─────────────────┘ └─────────────────┘图标处理/* 自动镜像需要翻转的图标 */ .icon-arrow, .icon-back, .icon-forward { /* 在 RTL 环境下水平翻转 */ [dirrtl] { transform: scaleX(-1); } } /* 不翻转的图标如 Logo */ .icon-logo { /* 不应用翻转 */ }⚠️避坑警告数字、数学公式、URL、代码片段在 RTL 语言中仍然保持 LTR 方向不要强制翻转第五章动态切换与持久化——让用户说了算5.1 语言切换组件React 实现import { useTranslation } from react-i18next; const LANGUAGES [ { code: zh, name: 中文, flag: }, { code: en, name: English, flag: }, { code: ja, name: 日本語, flag: }, { code: ar, name: العربية, flag: , rtl: true }, ]; function LanguageSwitcher() { const { i18n } useTranslation(); const currentLang i18n.language; const handleChange (langCode) { i18n.changeLanguage(langCode); // 持久化到 localStoragei18next-browser-languagedetector 已自动处理 // 可添加额外逻辑上报统计、刷新页面等 }; return ( div classNamelanguage-switcher select value{currentLang} onChange{(e) handleChange(e.target.value)} {LANGUAGES.map(lang ( option key{lang.code} value{lang.code} {lang.flag} {lang.name} /option ))} /select /div ); }5.2 语言持久化方案持久化策略优先级 ┌─────────────────────────────────────────────────────────┐ │ 1. URL 参数 (?langen) - 最高优先级可分享链接 │ │ 2. 已登录用户 → 后端存储的用户偏好设置 │ │ 3. localStorage - 本地缓存 │ │ 4. Cookie - 服务端渲染时读取 │ │ 5. 浏览器语言 (navigator.language) - 默认 │ │ 6. 应用默认语言 - 兜底 │ └─────────────────────────────────────────────────────────┘自定义持久化插件// plugins/i18n-persistence.js import { useEffect } from react; import { useTranslation } from react-i18next; export function useLanguagePersistence() { const { i18n } useTranslation(); useEffect(() { // 1. 从 URL 读取 const urlParams new URLSearchParams(window.location.search); const urlLang urlParams.get(lang); // 2. 从 localStorage 读取 const storedLang localStorage.getItem(user-language); // 3. 从用户配置读取如果已登录 const userLang window.__USER_CONFIG__?.language; // 优先级URL 用户配置 localStorage 浏览器 const targetLang urlLang || userLang || storedLang; if (targetLang targetLang ! i18n.language) { i18n.changeLanguage(targetLang); } }, []); useEffect(() { // 语言变化时同步到各存储 const handleLanguageChanged (lng) { // localStorage localStorage.setItem(user-language, lng); // Cookie用于 SSR document.cookie language${lng};path/;max-age31536000; // URL可选保持分享一致性 const url new URL(window.location); url.searchParams.set(lang, lng); window.history.replaceState({}, , url); // 同步到后端如果已登录 syncLanguageToServer(lng); }; i18n.on(languageChanged, handleLanguageChanged); return () i18n.off(languageChanged, handleLanguageChanged); }, [i18n]); }5.3 语言切换动画import { motion, AnimatePresence } from framer-motion; function App() { const { i18n } useTranslation(); return ( AnimatePresence modewait motion.div key{i18n.language} initial{{ opacity: 0, x: i18n.dir() rtl ? -20 : 20 }} animate{{ opacity: 1, x: 0 }} exit{{ opacity: 0, x: i18n.dir() rtl ? 20 : -20 }} transition{{ duration: 0.2 }} Router / /motion.div /AnimatePresence ); }第六章实战案例——从1种语言到20种的蜕变6.1 项目背景某 SaaS 产品从仅支持中文扩展到支持 20 种语言服务全球用户改造前 • 硬编码中文文本遍布代码 • 每次修改文案需要发版 • 新增语言 2周工作量 • 翻译管理靠邮件往来 改造后 • 100% 文本外置化 • 翻译独立部署无需发版 • 新增语言 2天工作量 • 翻译管理效率提升 3 倍6.2 迁移策略第一步文本提取# 使用 i18next-scanner 自动提取 npm install --save-dev i18next-scanner # 配置 i18next-scanner.config.js module.exports { input: [src/**/*.{js,jsx,ts,tsx}], output: ./public/locales, options: { debug: true, func: { list: [i18next.t, t], }, trans: { component: Trans, }, lngs: [zh, en], defaultLng: zh, resource: { loadPath: public/locales/{{lng}}/{{ns}}.json, savePath: public/locales/{{lng}}/{{ns}}.json, }, }, };第二步代码改造// 迁移前硬编码 function LoginButton() { return button登录/button; } // 迁移后 function LoginButton() { const { t } useTranslation(); return button{t(login_button)}/button; }第三步翻译工作流开发流程 ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ 开发新功能 │ → │ 提取文案 │ → │ 导出Excel │ → │ 翻译团队 │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ ↓ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ 上线发布 │ ← │ 集成测试 │ ← │ 导入翻译 │ ← │ 翻译完成 │ └─────────┘ └─────────┘ └─────────┘ └─────────┘6.3 性能优化按需加载翻译文件// i18n.js import i18n from i18next; import { initReactI18next } from react-i18next; import Backend from i18next-http-backend; i18n .use(Backend) .use(initReactI18next) .init({ fallbackLng: zh, ns: [common, home, user], // 命名空间 defaultNS: common, backend: { loadPath: /locales/{{lng}}/{{ns}}.json, }, }); // 组件中按需加载命名空间 function UserPage() { const { t } useTranslation(user); // 只加载 user.json return div{t(profile_title)}/div; }预加载关键语言包!-- index.html -- link relpreload href/locales/zh/common.json asfetch crossorigin link relpreload href/locales/en/common.json asfetch crossorigin文末三件套 源码获取关注此系列获取后续更新后台回复「国际化」获取完整源码和配套工具。 思考题你的产品准备好出海了吗在评论区分享你的国际化踩坑经历 系列预告下一篇《前端动画与交互实战》带你从零打造丝滑的用户体验。总结本文从前端国际化的核心概念出发系统性地介绍了i18n/l10n/locale的区别与联系react-i18next/vue-i18n/FormatJS三大方案的选型与实战JSON/YAML/Excel翻译文件的管理策略RTL 语言适配的技术细节动态语言切换与持久化方案真实项目改造的完整流程关键数据回顾✅ 支持语言从 1 种扩展到 20 种✅ 翻译管理效率提升 3 倍✅ 国际化覆盖率 100%最后的话国际化不是锦上添花而是产品走向世界的必经之路。越早规划成本越低。希望这份指南能帮你少走弯路标签前端国际化, i18n, 多语言, React, Vue, 本地化, 全球化