|Labs
预约演示平台
React(Lingo Compiler)
Alpha
React (MCP)React(i18n)
旧版 CLI(v0)
已废弃

概览

  • @lingo.dev/react

开始使用

  • 快速上手

参考

  • LingoProvider
  • useLingo
  • 复数与 select
  • 格式化

格式化

每个 Lingo 实例都内置一组与当前 locale 对应的格式化方法。它们只是对原生 Intl.* API 的轻量包装——不增加额外 bundle 体积,也不会附带任何武断的默认配置;除了你已经传给 LingoProvider 的 locale 字符串之外,别无其他。

所有方法都是纯函数:相同的输入加上相同的 locale,就会得到相同的输出。可放心在 render 中直接调用,无需 memoization。

数字#

l.num(value, options?)#

按 locale 习惯为数字添加分组和小数格式。

tsx
l.num(1234567);       // "1,234,567" (en) / "1.234.567" (de) / "1 234 567" (fr)
l.num(3.14159, { maximumFractionDigits: 2 }); // "3.14" (en) / "3,14" (de)

options 会直接透传给 Intl.NumberFormat。

l.currency(value, code, options?)#

tsx
l.currency(29.99, "USD");   // "$29.99" (en) / "29,99 $US" (fr)
l.currency(29.99, "EUR");   // "€29.99" (en) / "29,99 €" (de)

l.percent(value, options?)#

传入的是小数值(0.156,而不是 15.6)。

tsx
l.percent(0.156);                           // "16%" (en) / "16 %" (fr)
l.percent(0.156, { maximumFractionDigits: 1 }); // "15.6%"

l.unit(value, unit, options?)#

unit 是 Intl 可识别的单位名称(如 celsius、kilometer-per-hour、megabyte 等)。

tsx
l.unit(32, "celsius");        // "32°C" (en) / "32 °C" (de)
l.unit(120, "kilometer-per-hour"); // "120 km/h"

l.compact(value, options?)#

tsx
l.compact(1234567);    // "1.2M" (en) / "123万" (ja) / "1,2 Mio." (de)
l.compact(950);        // "950"

日期与时间#

l.date(value, options?) / l.time / l.datetime#

接受 Date 或 Unix 纪元毫秒值。

tsx
l.date(new Date());     // "3/16/2026" (en) / "16.03.2026" (de)
l.time(new Date());     // "3:45 PM" (en) / "15:45" (de)
l.datetime(new Date()); // "3/16/2026, 3:45 PM" (en)

l.date(now, { dateStyle: "long" });   // "March 16, 2026"
l.date(now, { weekday: "short", month: "short", day: "numeric" }); // "Mon, Mar 16"

l.relative(value, unit, options?)#

带符号偏移量——过去为负,未来为正。

tsx
l.relative(-3, "day");       // "3 days ago" (en) / "vor 3 Tagen" (de)
l.relative(2, "hour");       // "in 2 hours"
l.relative(0, "second", { numeric: "auto" }); // "now"

列表#

l.list(items, options?)#

按 locale 习惯连接列表项。默认样式为 long,类型为 conjunction(“and”)。

tsx
l.list(["apples", "oranges", "pears"]); // "apples, oranges, and pears" (en)
                                         // "apples, oranges y pears" (es)
l.list(["red", "blue"], { type: "disjunction" }); // "red or blue"

文件大小#

l.fileSize(bytes)#

一个便捷封装,会自动选择合适的单位(B、KB、MB、GB、TB、PB),并按 locale 习惯格式化小数。

tsx
l.fileSize(1024);          // "1 KB"
l.fileSize(1073741824);    // "1 GB" (en) / "1 Go" (fr)
l.fileSize(1536);          // "1.5 KB"

显示名称#

l.displayName(code, type)#

将语言、地区、书写系统或货币代码转换为本地化名称。

tsx
l.displayName("en", "language");  // "English" (en) / "Englisch" (de) / "Английский" (ru)
l.displayName("US", "region");    // "United States" / "Vereinigte Staaten"
l.displayName("USD", "currency"); // "US Dollar" / "US-Dollar"
l.displayName("Cyrl", "script");  // "Cyrillic" / "Kyrillisch"

如果该代码无法作为所请求的类型被识别,则返回 undefined。

排序#

l.sort(items, options?)#

返回一个新的已排序数组——不会修改原始输入。

tsx
l.sort(["ä", "z", "a"]);   // de: ["a", "ä", "z"]   sv: ["a", "z", "ä"]
l.sort(["File 10", "File 2"], { numeric: true }); // ["File 2", "File 10"]

分词分段#

l.segment(text, granularity?)#

按 locale 习惯将文本拆分为字素、单词或句子。对 CJK 尤其重要,因为空格并不能用来分隔单词。

tsx
l.segment("Hello world", "word");  // ["Hello", " ", "world"]
l.segment("こんにちは世界", "word"); // ["こんにちは", "世界"]   (ja)
l.segment("café", "grapheme");     // ["c", "a", "f", "é"]

granularity 默认为 "grapheme"。

为什么要做轻量封装?#

每个方法都会委托给原生 Intl 格式化器——不做解析、不引入数字库、也没有额外依赖。运行时负责让 bundle 保持精简,并由平台处理 locale 数据,这意味着 V8 / SpiderMonkey ICU 表中新增的 locale 都能直接开箱即用。

相比直接使用原始 Intl,这里唯一额外提供的价值就是 locale 字符串——你只需通过 <LingoProvider locale="..."> 设置一次,之后每个格式化器都会从中读取它。如果你更倾向于直接使用原始 Intl(比如在 React 之外的代码中),createLingo(locale) 会在不需要 provider 的情况下提供同样的对象。

接下来去哪?#

  • useLingo——通过 l.text 和 l.rich 翻译字符串。
  • Plurals and select——按数量或类别选择对应形式。

这个页面对你有帮助吗?

Max PrilutskiyMax Prilutskiy·已更新 大约 1 个月前·2 分钟阅读