メッセージのフォーマット

18waysは、waysParserをデフォルトで使用します。そのパーサーは、ソースコピーを読みやすく保ちながら、変数やロケールに応じたフォーマットを処理できるようにします。

変数

変数には波括弧を使用し、値を通過させますvars。

tsx
インポート { useT } から'@18ways/react';
 
エクスポート 関数 WelcomeMessage() {
  const t = useT();
 
  戻り値 (
    <p>
      {t('お帰りなさい、{name}', {
        vars: { name:'アダ' },
      })}
    </p>
  );
}

複数形

文の形が実際に変わる場合は、ICUスタイルの複数形ブロックを使用してください。

tsx
インポート { T } から '@18ways/react';
 
エクスポート 関数 InboxCount({
  count,
}: {
  count: 数字;
}) {
  戻り値 (
    <T vars={{ count }}>
      {
        '{count, plural, =0{メッセージはありません} =1{1つのメッセージ} other{{count} メッセージ}}'
      }
    </T>
  );
}

日付とお金

実際の日付またはお金のようなオブジェクトを渡すと、金額と通貨があれば、18waysは自動的にフォーマットします それは、{publishedAt}のようなプレースホルダーでも可能です。{publishedAt}または{renewalTotal}。

出力を制御したい場合のみ、明示的なフォーマッターを使用してください。例えば、dateStyle:longまたはカスタムマネーディバイダーです。

tsx
インポート { T } から '@18ways/react';
 
エクスポート 関数 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>
    </>
  );
}

デフォルトでは、金額は小数単位として扱われます。すでに主要単位を持っている場合は、明示的な金額フォーマッタを使用してください。除数: 1。

選択ブロック

使用する選択は、コピーが限られた離散的な値のセットに依存する場合です。

tsx
インポート { T } から '@18ways/react';
 
エクスポート 関数 SignInState({
  isSignedIn,
: {
  isSignedIn: boolean;
}) {
  戻り値 (
    <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
インポート { T } から '@18ways/react';
 
エクスポート 関数 HeroCta() {
  戻り値 (
    <T>
      <a href="/pricing">ここをクリック</a> を見る
      もっと
    </T>
  );
}

パーサーをオフにする

@18ways/reactは、messageFormatter="none"をルートで設定するか、カスタムフォーマッタ関数を提供することができます。それは高度なエスケープハッチであり、デフォルトのパスではありません。

実用的なルール

文がいくつかの変数を含む完全なフレーズとして書ける場合は、1つのメッセージにまとめてください。 それにより、コード内の断片をつなぎ合わせるよりも翻訳の質が劇的に向上します。

Message Formatting