Formateo de números

Problema

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

Solución

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

Pasos

1. Crear un componente cliente para números

Como otros componentes de react-intl, FormattedNumber debe utilizarse dentro de un componente 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. Pasar opciones de formateo

El componente FormattedNumber acepta opciones para controlar la salida:

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

3. Utilizar el componente en una página

Ahora, puedes utilizar este componente en cualquier página que muestre información del producto.

// 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".