Vista General - Strings

Paquete: @tiendana/utils

Utilidades para manipular, transformar y formatear strings de forma eficiente y segura.

Funciones Disponibles

Truncado

truncateString - Trunca un string a una longitud máxima específica.

truncateString('Este es un texto largo', 10);
// 'Este es un'

Slugs y URLs

stringToSlug - Convierte un string a formato URL-friendly (slug), removiendo acentos y caracteres especiales.

stringToSlug('¡Hola Mundo! ¿Cómo estás?');
// 'hola-mundo-como-estas'

Normalización

removeDiacritics - Remueve acentos y diacríticos de caracteres, manteniendo caracteres base.

removeDiacritics('Äpfel, Äpfel, über alles');
// 'Apfel, Apfel, uber alles'

Parsing

parseName - Analiza un nombre completo y lo separa en componentes (nombre, apellidos).

parseName('Juan Carlos García López');
// {
//   name: 'Juan Carlos',
//   firstName: 'García',
//   secondLastName: 'López',
//   lastName: 'García López',
//   joined: 'Juan Carlos García López'
// }

Uso Común

Crear URLs Amigables

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

const title = 'Las Mejores Prácticas de JavaScript en 2024';
const url = `/blog/${stringToSlug(title)}`;
// '/blog/las-mejores-practicas-de-javascript-en-2024'

Mostrar Texto Truncado

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

function ProductCard({ description }: { description: string }) {
  const shortDesc = truncateString(description, 100);
  
  return (
    <div>
      <p>{shortDesc}...</p>
      <a href="#">Leer más</a>
    </div>
  );
}

Búsqueda Sin Acentos

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

function searchUsers(query: string, users: User[]) {
  const normalizedQuery = removeDiacritics(query.toLowerCase());
  
  return users.filter(user => {
    const normalizedName = removeDiacritics(user.name.toLowerCase());
    return normalizedName.includes(normalizedQuery);
  });
}

// 'Jose' encontrará 'José'
// 'Maria' encontrará 'María'

Procesar Nombres de Usuarios

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

function registerUser(fullName: string) {
  const parsed = parseName(fullName);
  
  return {
    firstName: parsed.name,
    lastName: parsed.lastName,
    displayName: parsed.joined
  };
}

registerUser('Ana María Rodríguez González');
// {
//   firstName: 'Ana María',
//   lastName: 'Rodríguez González',
//   displayName: 'Ana María Rodríguez González'
// }

Casos de Uso Comunes

SEO y URLs

import { stringToSlug, removeDiacritics } from '@tiendana/utils';

// Slugs para artículos
const articleSlug = stringToSlug('Guía Definitiva de TypeScript');

// URLs de categorías
const categoryUrl = stringToSlug('Tecnología & Innovación');
// 'tecnologia-innovacion'

// Nombres de archivos
const fileName = removeDiacritics('Reporte Año 2024.pdf');
// 'Reporte Ano 2024.pdf'

UI/UX

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

// Previews de contenido
const preview = truncateString(article.content, 200);

// Nombres de archivo largos
const shortFileName = truncateString(file.name, 30);

// Títulos en cards
const cardTitle = truncateString(product.title, 50);

Formularios

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

// Autocompletar nombre/apellido
function handleNameInput(fullName: string) {
  const { name, lastName } = parseName(fullName);
  
  form.setValue('firstName', name);
  form.setValue('lastName', lastName);
}

Características

✅ Unicode-aware - Maneja correctamente caracteres especiales
✅ Locale-friendly - Soporta español, portugués, francés, etc.
✅ Type-safe - Tipos completos en TypeScript
✅ Sin dependencias - Código puro JavaScript