Abreviatura

ago 28, 2025 21:15 • 95 visitas

Uno de los retos frecuentes con el que nos encontramos los desarrolladores es mostrar números de forma clara y comprensible para el usuario. Especialmente cuando se trata de cantidades muy grandes, escribirlas con todos sus dígitos puede hacer que la interfaz pierda legibilidad. Para resolver ese problema, resulta útil la siguiente función, que transforma cifras extensas en un formato compacto y familiar, añadiendo sufijos del tipo K para miles, M para millones, B para billones americanos o T para trillones americanos.

export const abNum = (num: number): string => {
    if (num < 1000) return num.toString();
    const units = ['K', 'M', 'B', 'T'];
    const div = 1000;
    let i = 0;
    let reduced = num;
    while (reduced >= div && i < units.length) {
        reduced = reduced / div;
        i++;
    }
    const reducedFormatted =
        reduced % 1 === 0 ? reduced.toFixed(0) : reduced.toFixed(1);
    return `${reducedFormatted}${units[i - 1]}`;
}

Comenzamos evaluando si el número es menor de mil. Si es menor, no se necesita abreviatura y se devuelve la cadena llamando al método .toString() del número num. Cuando la cifra supera el umbral, entra en juego el array de unidades ['K', 'M', 'B', 'T'], que marca los diferentes niveles de magnitud. El divisor div se fija en 1000, pues cada paso implica una división entre mil para ascender al siguiente nivel.

Con la ayuda del bucle while, la función va reduciendo progresivamente el número, dividiéndolo hasta que su valor esté por debajo de mil o se alcance la última unidad disponible. Al mismo tiempo, la variable de control i registra cuántas divisiones se han hecho, lo que permite determinar el sufijo adecuado.

Una vez reducido, se formatea el número. Si el resultado es entero, se utiliza toFixed(0) para evitar decimales innecesarios. Si no, se aplica toFixed(1) para mostrar una cifra decimal que mejore la precisión visual sin perder simplicidad. Finalmente, la función concatena el valor formateado con el sufijo correspondiente, devolviendo resultados como 1.5K, 3M o 12.7B.

En definitiva, abNum es un ejemplo sencillo sobre cómo podemos mejorar la experiencia del usuario, convirtiendo datos abrumadores en información clara y manejable con apenas unas líneas de typescript.