Nachrichtenformatierung

18ways verwendet standardmäßig waysParser. Dieser Parser ermöglicht es Ihnen, die Quellkopie lesbar zu halten, und gleichzeitig Variablen und lokalisierte Formatierungen zu verarbeiten.

Variablen

Verwenden Sie geschweifte Klammern für Variablen und übergeben Sie Werte durch vars.

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

Pluralisierung

Verwenden Sie ICU-Style-Pluralblöcke, wenn sich der Satz tatsächlich verändert.

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>
  );
}

Daten und Geld

Wenn Sie ein echtes Date oder ein geldähnliches Objekt mit amount und currency übergeben, wird 18ways es automatisch formatieren, selbst mit einem einfachen Platzhalter wie {publishedAt} oder {renewalTotal}.

Verwenden Sie den expliziten Formatter nur, wenn Sie die Ausgabe steuern möchten, wie z.B. dateStyle:long oder einen benutzerdefinierten Geldteiler.

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>
    </>
  );
}

Standardmäßig werden Geldbeträge als kleine Einheiten behandelt. Wenn Sie bereits große Einheiten haben, verwenden Sie den expliziten Geldformatierer mit divisor: 1.

Auswahlblöcke

Verwenden Sie select, wenn der Text von einer kleinen Menge diskreter Werte abhängt.

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>
  );
}

Komponentenkomposition

Halten Sie den Satz in JSX zusammen, und 18ways wird die echte UI-Struktur für gängige Fälle bewahren wie <T><a href="#">Hier klicken</a> um mehr zu sehen</T>, ohne dass Sie Fragmente manuell zusammenfügen müssen.

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

Den Parser ausschalten

@18ways/react ermöglicht es Ihnen, messageFormatter="none" an der Wurzel festzulegen oder eine benutzerdefinierte Formatierungsfunktion bereitzustellen. Das ist ein fortgeschrittener Ausweg, nicht der Standardweg.

Praktische Regel

Wenn der Satz als vollständige Phrase mit einigen Variablen formuliert werden kann, halten Sie ihn in einer Nachricht. Das verbessert die Übersetzungsqualität erheblich im Vergleich zum Zusammenfügen von Fragmenten im Code.