大家好！
距新年仅剩几天。 我遇到了我将在2019年处理的案件清单，结果发现其中包括撰写有关哈伯的文章。 是时候掉入即将离任的汽车了。
我会立即预订，PR我的自行车，如果您不喜欢这样，可以放心地跳过这篇文章。
什么是本地化？
在下文中，通过本地化，我们将了解使应用程序适应不同语言和地区的过程。 本地化不仅与翻译文本有关。 用户看到日期，货币值的常规格式甚至数字分隔符都可以发挥作用，这让用户感到更加愉悦。
动机
实际上，为什么需要对应用程序进行本地化？ 应用程序的本地化是用户界面可用性的臭名昭著的增长，最近人们对此进行了广泛讨论。 本地化扩展了应用程序针对的目标组。
我想要的本地化库
- ICU语法支持
- 日期格式
- 数字格式
发生什么事了
链接到GitHub 。
以最受欢迎的React应用程序的本地化库（根据星号分析）为基础。 在幕后，react-intl使用了构建AST树的intl-messageformat-parser包。 根据bundlephobia，解析器需要很大的空间。 它不是用手写的，而是使用PEG.js。 我为这些目的写了自己的书，重量减轻了6倍。 我很可能会错过一个案件，如果有人告诉我，我将不胜感激。
由于现代浏览器对Internationalization API的出色支持，日期和数字的格式本身可以解决。 所需要做的就是将用户的当前语言存储在某个地方，以便将其应用于格式并以formatSomething(value, options)的形式提供更方便的api。
因此，该软件包是@ eo-locale / core，通常不与任何框架或库绑定，并且可以灵活使用。
反应
React版本是组件和挂钩的集合。
要开始使用eo-locale请将应用程序包装在Provider中。
import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { hello: 'Hello {name}!' } }, ]; <EOLocale.Provider language="en" locales={locales}> <span> <EOLocale.Text id="hello" name="World" /> // Helo World! </span> </EOLocale.Provider>
数字格式可通过代理标准的Intl.NumberFormat属性获得
import { EOLocale } from 'eo-locale'; <EOLocale.Number value={1000} /> // 1,000 <EOLocale.Number value={1000} currency="EUR" maximumFractionDigits={2} minimumFractionDigits={2} style="currency" /> // €1,000.00
日期格式的实现类似：
import { EOLocale } from 'eo-locale'; <EOLocale.Date value={new Date(2019, 2, 19)} /> // 3/19/2019 <EOLocale.Date value={new Date(2019, 2, 19)} day="numeric" month="long" year="numeric" weekday="long" /> // Tuesday, March 19, 2019
以上所有这些操作也可以不通过组件完成，而可以使用useTranslator挂钩完成：
import { useTranslator } from 'eo-locale'; function SomeComponent() { const translator = useTranslator(); return <div>{translator.formatNumber(1000)}</div>; }
与其他类似库相比，重要的优势之一是能够将组件用作道具。 例如，您有一个样式化的Money组件，该组件用一种颜色显示值，而货币符号用另一种颜色显示，则需要在区域设置中插入一些金额：
import { EOLocale } from 'eo-locale'; import { Money } from '...somewhere'; const locales = [ { language: 'en', messages: { total: 'Total price is {price}' } }, ]; <EOLocale.Text id="total" price={<Money amount={1000} />} /> // Total price is €1,000.00
还可以显示多个值。 它是使用Intl.PluralRules实现的。
import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { items: '{count, plural, one {You have one item} other {You have {count} items}}' } }, ]; <EOLocale.Text id="items" count={3} /> // You have 3 items
事前
Preact在相应的程序包中实现了所有相同的功能。
一些功能
该库完全用Typescript编写，因此开箱即用。
不久前，我们遇到了一个问题，当本地化服务器发送的错误代码时，客户端上没有翻译。 为此，提供程序已添加了引发onIdMissing处理程序的功能，您可以使用该处理程序记录此类错误。
结论
我真的希望有人会觉得图书馆有用。 我将很高兴提出建议并提出健康的批评。 不要忘记，即使您的网站现在只专注于一种语言，但这种情况可能会随着时间而改变。 预先确定对多语言支持的时间并不需要很多时间，并且该应用程序中使用的所有文本都将进行结构化。