freeCodeCamp/guide/spanish/certifications/javascript-algorithms-and-d.../basic-algorithm-scripting/truncate-a-string/index.md

6.8 KiB

title localeTitle
Truncate a String Truncar una cadena

:triangular_flag_on_post: Recuerda usar Read-Search-Ask si te atascas. Tratar de emparejar el programa :busts_in_silhouette: y escribe tu propio código :pencil:

:checkered_flag: Explicación del problema:

Necesitamos reducir la longitud de la cadena o truncarla si es más larga que las longitudes máximas especificadas y agregar ... al final. Si no es tan largo entonces lo mantenemos como está.

Enlaces relevantes

:speech_balloon: Sugerencia: 1

Las cadenas son inmutables en JavaScript, por lo que necesitaremos una nueva variable para almacenar la cadena truncada.

intenta resolver el problema ahora

:speech_balloon: Sugerencia: 2

Deberá usar el método slice () y especificar dónde comenzar y dónde parar.

intenta resolver el problema ahora

:speech_balloon: Sugerencia: 3

No olvide que cuando truncamos la palabra, también debemos contar la longitud agregada por ...

intenta resolver el problema ahora

¡Alerta de spoiler!

señal de advertencia

¡Solución por delante!

:beginner: Solución de código básico:

function truncateString(str, num) { 
  // Clear out that junk in your trunk 
  if (str.length > num && num > 3) { 
    return str.slice(0, (num - 3)) + '...'; 
  } else if (str.length > num && num <= 3) { 
    return str.slice(0, num) + '...'; 
  } else { 
    return str; 
  } 
 
 } 

:rocket: Ejecutar código

Explicación del código:

  • Primero, comenzamos con una simple declaración if para determinar uno de los tres resultados ...
  • Si la longitud de nuestra cadena es mayor que el num que queremos truncar, y nuestro punto de truncado tiene al menos tres caracteres o más en la cadena, devolvemos un segmento de nuestra cadena que comienza en el carácter 0 y termina en el num - 3 . Luego agregamos nuestro '...' al final de la cadena.
  • Sin embargo, si la longitud de nuestra cadena es mayor que el num pero el num está dentro de los primeros tres caracteres, no tenemos que contar nuestros puntos como caracteres. Por lo tanto, devolvemos la misma cadena que la anterior, con una diferencia: el punto final de nuestro sector ahora es solo num .
  • Por último, si ninguna de las situaciones anteriores son ciertos, significa nuestra longitud de la cadena es menor que nuestra truncamiento num . Por lo tanto, podemos devolver la cadena.

:rotating_light: Solución avanzada de código:

function truncateString(str, num) { 
  if (str.length <= num) { 
    return str; 
  } else { 
    return str.slice(0, num > 3 ? num - 3 : num) + '...'; 
  } 
 } 

:rocket: Ejecutar código

Explicación del código:

  • Primero necesitamos una instrucción if para probar si la longitud de la cadena completa que se pasa como primer argumento ya se encuentra dentro del límite de tamaño pasado como segundo argumento. Si es así, podemos devolver la cadena que se pasó.

    if (str.length <= num) volver str

  • Si nuestra instrucción if falla, nos movemos a else , donde devolveremos un "segmento" de la cadena. El método slice extrae una sección de una cadena y devuelve una nueva cadena. Aquí pasamos 0 como punto de partida para nuestra rebanada. Para determinar el punto final, utilizamos un operador ternario: num > 3 ? num - 3 : num . En nuestro ternario, si num es mayor que 3, debemos tener en cuenta los tres puntos a nuestra longitud total, y así terminamos nuestra división en num-3 . Si num es menor o igual a 3, nuestra división obtiene una variable final de solo num . Finalmente, el '...' se agrega al final de nuestra nueva cadena y se devuelve.

    } else { devuelve str.slice (0, num> 3? num - 3: num) + '…'; }

  • NOTA Para comprender el código anterior, debe comprender cómo funciona un operador ternario. El operador ternario se usa frecuentemente como acceso directo para la sentencia if y sigue este formato: condition ? expr1 : expr2 . Si la condition evalúa como verdadera, el operador devuelve el valor de expr1 . De lo contrario, devuelve el valor de expr2 .

Enlaces relevantes

:clipboard: NOTAS PARA LAS CONTRIBUCIONES:

  • :warning: NO agregue soluciones que sean similares a las soluciones existentes. Si cree que es similar pero mejor , intente fusionar (o reemplazar) la solución similar existente.
  • Agregue una explicación de su solución.
  • Categorice la solución en una de las siguientes categorías: Básica , Intermedia y Avanzada . :traffic_light:
  • Agregue su nombre de usuario solo si ha agregado algún contenido principal relevante . ( :warning: NO elimine ningún nombre de usuario existente )

Ver :point_right: Wiki Challenge Solution Template para referencia.