Saltar al contenido principal

truncateString

Paquete: @tiendana/utils

Trunca un string a una longitud máxima específica. Si el string es más corto que la longitud máxima, lo retorna sin cambios.

Características​

✅ Truncado simple y directo
✅ Maneja valores null/undefined
✅ No añade ellipsis automáticamente
✅ Performance O(1)

Firma​

function truncateString(
  str: string, 
  maxLength: number
): string

Parámetros​

ParámetroTipoDescripciónRequerido
strstringString a truncar✅
maxLengthnumberLongitud máxima del string resultante✅

Retorno​

Tipo: string

  • Si str.length <= maxLength: retorna el string original
  • Si str.length > maxLength: retorna los primeros maxLength caracteres

Ejemplos de Uso​

Truncado Básico​

import { truncateString } from '@tiendana/utils';

truncateString('Hola Mundo', 4);
// 'Hola'

truncateString('Texto corto', 20);
// 'Texto corto' - sin cambios, menor que maxLength

truncateString('', 10);
// ''

Con Ellipsis Manual​

function truncateWithEllipsis(text: string, maxLength: number): string {
  if (text.length <= maxLength) {
    return text;
  }
  
  return truncateString(text, maxLength - 3) + '...';
}

truncateWithEllipsis('Este es un texto muy largo', 15);
// 'Este es un t...'

Preview de Artículos​

interface Article {
  title: string;
  content: string;
}

function ArticleCard({ article }: { article: Article }) {
  const preview = truncateString(article.content, 200) + '...';
  
  return (
    <div>
      <h2>{article.title}</h2>
      <p>{preview}</p>
      <a href="#">Leer más</a>
    </div>
  );
}

Nombres de Archivo​

function displayFileName(fileName: string): string {
  const maxLength = 30;
  
  if (fileName.length <= maxLength) {
    return fileName;
  }
  
  // Mantener extensión visible
  const extension = fileName.split('.').pop() || '';
  const nameWithoutExt = fileName.slice(0, fileName.lastIndexOf('.'));
  const truncatedName = truncateString(nameWithoutExt, maxLength - extension.length - 4);
  
  return `${truncatedName}...${extension}`;
}

displayFileName('reporte-financiero-anual-2024-completo.pdf');
// 'reporte-financiero-a...pdf'

Tooltips​

function Tooltip({ text }: { text: string }) {
  const shortText = truncateString(text, 50);
  const needsTooltip = text.length > 50;
  
  return (
    <span title={needsTooltip ? text : undefined}>
      {shortText}
      {needsTooltip && '...'}
    </span>
  );
}

Lista de Productos​

const products = [
  { name: 'Laptop HP EliteBook 840 G8 Intel Core i7 16GB RAM', price: 999 },
  { name: 'Mouse Logitech MX Master 3', price: 99 }
];

function ProductList() {
  return (
    <ul>
      {products.map(product => (
        <li key={product.name}>
          {truncateString(product.name, 40)}... - ${product.price}
        </li>
      ))}
    </ul>
  );
}
function Breadcrumb({ path }: { path: string }) {
  const segments = path.split('/').filter(Boolean);
  
  return (
    <nav>
      {segments.map((segment, i) => (
        <span key={i}>
          {truncateString(segment, 15)}
          {i < segments.length - 1 && ' > '}
        </span>
      ))}
    </nav>
  );
}

Notificaciones​

interface Notification {
  message: string;
  type: 'info' | 'success' | 'error';
}

function NotificationToast({ notification }: { notification: Notification }) {
  const shortMessage = truncateString(notification.message, 80);
  
  return (
    <div className={`toast toast-${notification.type}`}>
      {shortMessage}
      {notification.message.length > 80 && '...'}
    </div>
  );
}

Tablas Responsivas​

function DataTable({ data }: { data: any[] }) {
  return (
    <table>
      <tbody>
        {data.map(row => (
          <tr key={row.id}>
            <td>{truncateString(row.description, 50)}</td>
            <td>{row.date}</td>
            <td>{row.amount}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Casos de Uso Comunes​

  • Previews de contenido: Mostrar extractos de artículos, comentarios
  • UI con espacio limitado: Cards, tooltips, breadcrumbs
  • Nombres de archivo: Mostrar archivos largos en interfaces
  • Tablas: Limitar ancho de celdas con texto largo
  • Notificaciones: Mensajes cortos en toasts/snackbars
  • SEO: Meta descriptions, titles truncados

Notas Técnicas​

  • Performance: O(1) - usa slice() nativo de JavaScript
  • Null safety: Usa optional chaining ?. para manejar null/undefined
  • Sin ellipsis: No añade '...' automáticamente, debes agregarlo manualmente si lo necesitas
  • Caracteres especiales: Trunca por cantidad de caracteres, no por ancho visual
  • Unicode: Puede cortar en medio de emojis o caracteres multi-byte
  • Inmutabilidad: No modifica el string original

Limitaciones​

Caracteres Multi-byte

La función trunca por cantidad de caracteres JavaScript, no por code points Unicode. Puede cortar emojis o caracteres especiales:

truncateString('👨‍👩‍👧‍👦 Familia', 2);
// Puede resultar en caracteres rotos

Para manejar Unicode correctamente, considera usar:

function truncateUnicode(str: string, maxLength: number): string {
  const chars = Array.from(str);
  return chars.slice(0, maxLength).join('');
}

Implementación​

export function truncateString(str: string, maxLength: number): string {
  if (str?.length <= maxLength) {
    return str;
  }
  
  return str?.slice(0, maxLength);
}

Ver También​