Định dạng tin nhắn

18ways sử dụng waysParser theo mặc định. Trình phân tích đó cho phép bạn giữ bản gốc dễ đọc trong khi vẫn xử lý các biến và định dạng theo ngôn ngữ/khu vực.

Các biến

Dùng dấu ngoặc nhọn cho biến. Với <T>, bạn có thể giữ giá trị nội tuyến ngay cạnh thông báo.

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

Số nhiều

Sử dụng các khối số nhiều kiểu ICU khi câu thực sự thay đổi cấu trúc.

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

Ngày tháng và tiền bạc

Nếu bạn truyền vào một đối tượng Date thực sự hoặc một đối tượng giống tiền tệ với amount và currency, 18ways sẽ tự động định dạng nó ngay cả khi chỉ dùng một placeholder đơn giản như {publishedAt} hoặc {renewalTotal}.

Chỉ sử dụng trình định dạng tường minh khi bạn muốn kiểm soát đầu ra, chẳng hạn như dateStyle:long hoặc một tỷ lệ chia tiền tùy chỉnh.

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>Last updated {{ publishedAt }}</T>
      </p>
      <p>
        <T>Renewal total {{ renewalTotal }}</T>
      </p>
      <p>
        <T>Detailed date: {{ publishedAt, format: 'date, long' }}</T>
      </p>
    </>
  );
}

Theo mặc định, số tiền được xem là đơn vị nhỏ. Nếu bạn đã có đơn vị lớn, hãy dùng trình định dạng tiền tệ rõ ràng với divisor: 1.

Chọn khối

Dùng select khi nội dung phụ thuộc vào một tập nhỏ các giá trị rời rạc.

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

Thành phần cấu tạo

Giữ câu liền mạch trong JSX và 18ways sẽ bảo toàn cấu trúc UI thực cho các trường hợp phổ biến như <T><a href="#">Nhấp vào đây</a> để xem thêm</T> mà bạn không cần tự tay ghép các mảnh lại với nhau bằng tay.

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

Tắt bộ phân tích cú pháp

@18ways/react cho phép bạn đặt messageFormatter="none" ở gốc hoặc cung cấp một hàm định dạng tùy chỉnh. Đó là một lối thoát nâng cao, không phải đường đi mặc định.

Quy tắc thực hành

Nếu câu có thể được viết thành một cụm hoàn chỉnh với vài biến, hãy giữ nó trong một thông điệp. Điều đó làm cho chất lượng bản dịch tốt hơn hẳn so với việc ghép các mảnh lại với nhau trong code.

Đang đổi ngôn ngữ
Định dạng thông điệp