消息格式化

18ways 默认使用 waysParser。这个解析器使您能够保持源副本的可读性，同时仍然处理变量和区域设置相关的格式。

变量

使用大括号表示变量，并通过vars传递值。

tsx
import { useT } from '@18ways/react';
 
export function WelcomeMessage() {
  const t = useT();
 
  return (
    <p>
      {t('Welcome back, {name}', {
        vars: { name: 'Ada' },
      })}
    </p>
  );
}

复数化

在句子真正改变形状时使用ICU风格的复数块。

tsx
import { T } from '@18ways/react';
 
export function InboxCount({
  count,
}: {
  count: number;
}) {
  return (
    <T vars={{ count }}>
      {
        '{count, plural, =0{No messages} =1{One message} other{{count} messages}}'
      }
    </T>
  );
}

日期和金钱

如果您传递一个真实的 Date 或一个类似货币的对象，包含 amount 和 currency，18ways 将会自动格式化它，即使是像 {publishedAt} 或 {renewalTotal} 这样的简单占位符。

仅在您想要控制输出时使用显式格式化器，例如 dateStyle:long 或自定义货币除数。

tsx
import { T } from '@18ways/react';
 
export function BillingSummary() {
  const publishedAt = new Date(
    '2026-03-14T09:00:00Z'
  );
  const renewalTotal = {
    amount: 1900,
    currency: 'USD',
  };
 
  return (
    <>
      <p>
        <T vars={{ publishedAt }}>
          Last updated {publishedAt}
        </T>
      </p>
      <p>
        <T vars={{ renewalTotal }}>
          Renewal total {renewalTotal}
        </T>
      </p>
      <p>
        <T vars={{ publishedAt }}>
          {
            'Detailed date: {publishedAt, date, dateStyle:long}'
          }
        </T>
      </p>
    </>
  );
}

默认情况下，货币金额被视为小单位。如果您已经有大单位，请使用带有 divisor: 1 的显式货币格式化器。

选择块

当复制依赖于一小组离散值时，请使用 select。

tsx
import { T } from '@18ways/react';
 
export function SignInState({
  isSignedIn,
}: {
  isSignedIn: boolean;
}) {
  return (
    <T vars={{ isSignedIn, name: 'Ada' }}>
      {
        '{isSignedIn, select, true{Welcome back, {name}} false{Sign in to continue} other{Sign in to continue}}'
      }
    </T>
  );
}

组件组成

在JSX中保持句子完整，18ways将为常见情况保留真实的UI结构 例如 <T><a href="#">点击这里</a> 查看更多</T>，而无需您手动拼接片段。

tsx
import { T } from '@18ways/react';
 
export function HeroCta() {
  return (
    <T>
      <a href="/pricing">Click here</a> to see
      more
    </T>
  );
}

关闭解析器

@18ways/react 让你可以在根部设置 messageFormatter="none" 或提供一个自定义格式化函数。这是一个高级逃生口，而不是默认路径。

实用规则

如果句子可以用几个变量写成完整的短语，请将其保持在一条消息中。 这使得翻译质量比将代码片段拼接在一起要好得多。