¿Qué es la pluralización?

A menudo me encuentro con aplicaciones que muestran mensajes poco naturales como:

Tienes 1 mensaje nuevo

Esta es una señal clara de que un desarrollador no ha pensado detenidamente en la experiencia de usuario.

Las apps de React a menudo necesitan pluralización — para contadores de notificaciones, tamaños de listas o resultados de búsqueda. Y no es tan difícil hacer bien la pluralización, especialmente si solo necesitas tu app en inglés. Pero hay muchas malas prácticas en las que caen los desarrolladores nuevos, especialmente en interfaces multilingües.

Plurales codificados manualmente

Muchos proyectos — incluidos algunos sorprendentemente grandes e importantes — codifican manualmente la lógica de plurales.

export default function Example({ n }) {
  return (
    <p>
      Mostrando {n} elemento{n === 1 ? '' : 's'}
    </p>
  )
}

Pero la pluralización suele ser más compleja que simplemente añadir una "s" al final de una palabra. Algunos sustantivos tienen formas plurales irregulares, como "child" y "children". A veces, otras partes de la oración también deben cambiar para reflejar la palabra modificada, como "is" y "are", que cambian según el número.

La siguiente tabla ilustra algunos escenarios comunes:

El uso de expresiones condicionales se vuelve inmanejable muy rápidamente.

Y se convierte en una pesadilla cuando necesitas lanzar tu app en otros idiomas. Lo que funciona para inglés a menudo se rompe por completo en idiomas como el polaco o el árabe, que tienen reglas completamente diferentes para manejar cantidades. Las empresas con las que trabajamos a menudo posponen la internacionalización por lo costoso que resulta tener que refactorizar una UI con texto codificado a mano como esta.

Pluralización en inglés

En inglés, usar los plurales correctos en tu aplicación suele ser sencillo.

Para la pluralización simple de sustantivos, escribe una función de utilidad:

export function pluralize(
  count: number,
  singular: string,
  plural: string = singular + 's'
) {
  return `${count === 1 ? singular : plural}`;
}

Ahora tenemos una única función para gestionar toda nuestra lógica de plurales, y también funciona con plurales irregulares:

pluralize(2, 'user') // "users"
pluralize(2, 'person', 'people') // "people"
pluralize(2, 'child', 'children') // "children"

Pero ¿qué ocurre si necesitas una lógica más compleja, por ejemplo:

"Nadie está mirando"
"1 persona está mirando"
"2 personas están mirando"

En esta etapa, deberías considerar seriamente una biblioteca de internacionalización ("i18n") de bajo mantenimiento.

Aunque los desarrolladores a menudo piensan que las bibliotecas de i18n solo sirven para interfaces multilingües, pueden ser muy útiles para el manejo de plurales y el formateo de variables incluso en aplicaciones de un solo idioma.

Existen muchas bibliotecas de i18n para React, incluida la nuestra, gt-react (o gt-next si usas Next.js). Mostrar un plural en inglés con gt-react es muy sencillo:

import { Plural } from 'gt-react'

function Example({ count }) {
  return (
    <Plural n={count} zero={'Nadie está mirando'} one={`${count} persona está mirando`}>
      {count} personas están mirando
    </Plural>
  )
}

La interfaz de usuario se renderiza de forma condicional en función del valor de n.

La mayoría de las bibliotecas usan el objeto Intl de JavaScript para decidir qué forma de plural mostrar. Esto significa que, en inglés, usarías el nombre "one" para referirte al singular y "other" para referirte al plural. Nuestro componente <Plural> recurre a sus elementos secundarios si el número proporcionado a n no coincide con ninguna de las props proporcionadas.

Usar una biblioteca aquí es una buena práctica incluso para aplicaciones solo en inglés, y facilita mucho la internacionalización futura.

Internacionalización (i18n) y plurales

Implementar una interfaz multilingüe hace que mostrar plurales sea mucho más complicado.

• En árabe, los sustantivos tienen formas diferentes según si hay cero, uno, dos o muchos
• En español, alemán e italiano, los números grandes usan puntos en lugar de comas, por lo que 1,000,000 se convierte en 1.000.000
• En hindi, las cifras se agrupan en pares, por lo que 1,000,000 se convierte en 10,00,000

En una app internacionalizada, deberías usar una biblioteca específica que tendrá su propia documentación sobre cómo manejar los plurales y el formato de números.

Formatear números para diferentes idiomas

También puedes usar el objeto Intl para formatear números. La forma más sencilla de hacerlo es con el método integrado toLocaleString().

De forma predeterminada, usará la configuración regional actual del runtime:

const n = 1000000
n.toLocaleString() // muestra 1,000,000 cuando el locale en tiempo de ejecución es "en-US" (inglés americano)
n.toLocaleString('de') // 1.000.000 porque el locale se ha especificado como "de" (alemán)

gt-react también ofrece un componente <Num> que utiliza Intl.NumberFormat internamente.

import { Num } from 'gt-react'

// muestra 1,000,000 cuando el idioma es "en-US"
// muestra 1.000.000 cuando el idioma es "de"
// muestra 10,00,000 cuando el idioma es "hi"
export default function Example() {
  return <Num>1000000</Num>
}

Mostrar formas plurales alternativas

Las seis formas plurales compatibles con el objeto Intl de JavaScript son: zero, one, two, few, many, other. Aunque el inglés usa solo one ("singular") y other ("plural"), idiomas como el árabe y el polaco tienen más que solo estas dos formas.

Por ejemplo, una persona de habla inglesa podría esperar:

"Nadie está mirando"
"1 persona está mirando"
"2 personas están mirando"

Mientras que un usuario de habla árabe podría esperar expresiones diferentes para las formas singular, dual (cuando la cantidad es exactamente dos elementos) y para los plurales en sus formas reducida y amplia:

"Nadie está viendo"
"1 persona viendo"
"2 personas viendo"
"3 personas viendo"
"11 personas viendo"

Aquí es donde una biblioteca de internacionalización se vuelve esencial. Cada idioma tiene su propia lógica para cuándo y cómo mostrar plurales, así que es mejor apoyarse en una biblioteca especializada para hacerlo bien.

Una buena biblioteca de internacionalización hará dos cosas:

1. Decidir qué forma de plural (one, many, other, etc.) usar según la configuración regional
2. Buscar la traducción en el idioma correcto que corresponda a esa forma

Si ya cuentas con una biblioteca de internacionalización, consulta su documentación para obtener información sobre el manejo de plurales. Casi todas las bibliotecas tienen documentación específica sobre cómo representar plurales.

Juntando todas las piezas

Si aún no tienes una biblioteca de internacionalización, considera usar gt-react.

El componente <Plural> de gt-react:

• Es una forma sencilla y práctica de mostrar los plurales correctamente
• Funciona de forma nativa con el componente de formato <Num>
• Funciona de forma nativa con el componente de traducción <T>, que se integra con nuestro servicio de traducción gratuito para generar automáticamente las formas plurales

Juntando todas las piezas, obtenemos una interfaz multilingüe completa:

import { T, Plural, Num } from 'gt-react'

// Funciona sin configuración en más de 100 idiomas
function Example({ count }) {
  return (
    <T>
      <Plural
        n={count}
        zero={'Nadie está viendo'}
        one={
          <>
            <Num>{count}</Num> persona está viendo
          </>
        }
      >
        <Num>{count}</Num> personas están viendo
      </Plural>
    </T>
  )
}

¿Quieres saber más? Consulta nuestra documentación sobre cómo configurar gt-react o gt-next.