一、概念

国际化：产品层面，同一产品，将在不同国家市场推广运营。技术层面，要在一套系统中，能够让产品在不同国家运行，同时解决不同国家对产品的不同需要。前端层面，同一套代码能够实现多语言，同时预留不同国家定制的能力。

本地化：为不同地区文化的特殊需要在视觉上、操作体验上、运营商进行不同呈现。

关系，国际化是本地化的基础，本地化是产品实现国际化的具体落实。国际化一般是前期工作，主要是系统整体层面能够提供本地化的能力。本地化一般是当产品在具体地区开拓市场时的工作，主要是在前期系统预留的扩展能力基础上，根据地区文化或特定国情制定看上去独特（本质上还是一套系统）的产品。举个例子，腾讯有很多出海业务，在产品系统层面，是提供了实施本地化的能力，但是具体到某个国家实施时，需要单独靠本地团队根据本地情况进行深度开发。举个例子，东南亚国家，在日期格式、货币符号、颜色喜好上，都和中国不一样，比如中国人喜欢红色蓝色，但是泰国马来西亚地区可能更喜欢绿色，爱尔兰国庆节也是绿色为主题色，但在中国，绿色显然又是不好的颜色。

二、前端国际化和本地化

从前端技术层面而言，其实，我们只能解决国际化本地化中的部分问题，单纯靠前端，是无法解决全部问题的，比如不同地区的CDN怎么去部署，这不是靠单纯前端可以解决的。那么，前端可以解决哪些问题呢？实际上，在前端实际开发中，你可以简单粗暴这么理解，国际化就是支持多语言，本地化就是支持根据当地习惯格式化数字、日期、货币等文本。

1. 语言包

• 怎么写语言包比较好？
• 如何加载语言包比较合理？（同步异步）
• 关于语言包工作模式的设想（csv->json）
• 语言包中的占位符（插值）

2. 语言切换

• 直接通过脚本进行切换，还是通过url跳转到另一个语言的站点？
• 重新渲染问题
• 自动根据浏览器判断语言（html[lang] navigator.language || navigator.browserLanguage）

3. 日期/货币/数字分隔符

• 902 300   (法国)，或   902.300   (德国)，又或者   902,300   (美国)
• locale 的前半部分表示语言，通常由 2 或 3 位小写字母组成，符合 ISO 639
• locale 的后半部分表示地区，由符合 ISO 3166标准的 2 或 3 位大写字母，或符合   UN M.49   标准的 3 位数字组成。
• 用浏览器内置的Intl接口，不需要自己去写一大堆格式化逻辑

4. 几种市面上最流行的国际化方案

• i18next
• Intl封装
• vue-i18n
• react-intl, react-i18next
• angular-translate

三、其他前端国际化问题

1. React SSR 怎么国际化？

• 根据请求来源判断访问者当地语言 （Accept-Language 或 IP 地址）

2. 普通第三方库怎么国际化？

• 静态常量的多语言问题

3. 本地化时区问题（包含夏令时问题）

• 存储UTC-0+Z，使用时再根据实际使用者的时区转回来

4. CSS 中也可以做国际化

• 属性选择器[lang=zh]
• :lang(zh) 伪类
• writing-mode: horizontal-tb(横), vertical-lr(竖从左到右), vertical-rl(竖从右到左)
• sideways-lr 和 sideways-rl 侧转
• text-orientation: text-combine-upright 合并字符为一个字符
• text-emphasis: dot 着重号
• font-variant-east-asian 字体变化等等
• 参考 https://segmentfault.com/a/1190000022549455 这篇文章

5. 谷歌翻译插件带来的问题

• 由于谷歌翻译插件会在替换文本时修改标签（DOM结构）会导致vue、react这种基于virtual dom的框架产生问题