Formato de números

Problema

Un número grande como 10000.5 se escribe como 10.000,5 en Alemania y 10,000.5 en Estados Unidos. Mostrar el número usando la convención de una región crea confusión para los usuarios de otras regiones, quienes pueden malinterpretar el valor debido a separadores decimales y de agrupación incorrectos.

Solución

Usa un componente de formato dedicado de react-intl, como FormattedNumber. Este componente lee automáticamente el idioma actual de su proveedor y formatea un primitivo number en una cadena que utiliza los separadores decimales y de agrupación correctos, específicos de la configuración regional.

Pasos

1. Crea un componente de cliente para números

Como otros componentes de react-intl, FormattedNumber debe usarse dentro de un componente de cliente.

Crea un nuevo componente, app/components/ProductInfo.tsx, que mostrará un número formateado.

// app/components/ProductInfo.tsx
'use client';

import { FormattedNumber } of 'react-intl';

type Props = {
  reviewCount: number;
  averageRating: number;
};

export default function ProductInfo({ reviewCount, averageRating }: Props) {
  return (
    <div>
      <h3>Product details</h3>
      <p>
        Total reviews:
        {/* Basic number formatting */}
        <FormattedNumber value={reviewCount} />
      </p>
      <p>
        Average rating:
        {/* Formatting with options */}
        <FormattedNumber
          value={averageRating}
          minimumFractionDigits={1}
          maximumFractionDigits={1}
        />
      </p>
    </div>
  );
}

2. Pasa opciones de formato

El componente FormattedNumber acepta opciones para controlar la salida:

• value es el number a formatear.
• minimumFractionDigits y maximumFractionDigits se usan aquí para forzar la visualización de un lugar decimal (por ejemplo, 4.0).

3. Usa el componente en una página

Ahora puedes usar este componente en cualquier página que muestre información de productos.

// app/[lang]/page.tsx
import ProductInfo from '@/app/components/ProductInfo';

export default function Home() {
  const product = {
    reviews: 1234567,
    rating: 4.0,
  };

  return (
    <div>
      <h1>Welcome</h1>
      <ProductInfo
        reviewCount={product.reviews}
        averageRating={product.rating}
      />
    </div>
  );
}

Un usuario que visite /en verá "Total reviews: 1,234,567" y "Average rating: 4.0". Un usuario que visite /es verá "Total reviews: 1.234.567" y "Average rating: 4,0".