訊息格式

18ways 預設使用 waysParser。這個解析器讓你在處理變數和區域化格式的同時，仍然能保持源代碼的可讀性。

變數

使用大括號來表示變數，並通過 vars 傳遞值。

tsx
'use client';
 
import { T } from '@18ways/react';
 
export function WelcomeMessage() {
  return (
    <T vars={{ name: 'Ada' }}>
      Hello {name}
    </T>
  );
}

複數化

在句子真正改變形狀時，使用 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
'use client';
 
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
'use client';
 
import Link from 'next/link';
import { T } from '@18ways/react';
 
export function HeroCta() {
  return (
    <T>
      <Link href="/pricing">Click here</Link> to
      see more
    </T>
  );
}

關閉解析器

@18ways/react 讓你可以在根部設置 messageFormatter="none" 或提供一個自定義格式化函數。這是一個進階的逃生口，而不是預設路徑。

實用規則

如果這句話可以用幾個變數寫成完整的短語，請將其保持在一條消息中。 這樣的翻譯質量會比將片段拼湊在一起的代碼好得多。