Cómo recortar una cadena a una longitud específica en JavaScript

Introducción

JavaScript es uno de los lenguajes de programación más utilizados en la actualidad. A menudo se utiliza para desarrollar aplicaciones web interactivas y dinámicas, lo que hace que la manipulación de cadenas sea una tarea frecuente al trabajar con este lenguaje.

Una tarea común es recortar una cadena a una longitud específica. Esto puede ser necesario si queremos mostrar solo una parte de la cadena en una etiqueta o si queremos asegurarnos de que una cadena se ajuste a un tamaño específico. En esta guía, aprenderemos cómo recortar una cadena a una longitud específica en JavaScript.

Recortar una cadena utilizando la función substring()

La forma más común de recortar una cadena a una longitud específica en JavaScript es utilizando la función substring(). La sintaxis de la función es la siguiente:

string.substring(start, end)

Donde start es el índice donde se iniciará el recorte y end es el índice donde se detendrá el recorte (no se incluirá en la cadena resultante). Si end no se especifica, la función recorta la cadena hasta su final.

Por ejemplo, si queremos recortar una cadena llamada nombre a una longitud de 5 caracteres, podemos hacerlo de la siguiente manera:

var nombre_recortado = nombre.substring(0, 5);

La variable nombre_recortado ahora contiene los primeros 5 caracteres de la cadena nombre.

Si queremos recortar la cadena desde un índice específico hasta el final de la cadena, podemos dejar vacío el segundo parámetro:

var nombre_recortado = nombre.substring(3);

En este caso, la variable nombre_recortado contendrá todos los caracteres de nombre desde el índice 3 hasta el final de la cadena.

Recortar una cadena utilizando la función slice()

Otra forma de recortar una cadena a una longitud específica es utilizando la función slice(). La sintaxis de la función es la siguiente:

string.slice(start, end)

Donde start, al igual que en substring(), es el índice donde se iniciará el recorte y end es el índice donde se detendrá el recorte (no se incluirá en la cadena resultante). Si end no se especifica, la función recorta la cadena hasta su final.

La principal diferencia entre slice() y substring() es que slice() nos permite usar índices negativos. Esto significa que podemos contar desde el final de la cadena hacia atrás. Por ejemplo, si queremos recortar los últimos 5 caracteres de una cadena llamada apellido, podemos hacer lo siguiente:

var apellido_recortado = apellido.slice(-5);

En este caso, la variable apellido_recortado contendrá los últimos 5 caracteres de la cadena apellido.

Conclusión

Recortar una cadena a una longitud específica es una tarea común al trabajar con JavaScript. En esta guía, hemos aprendido dos formas de hacer esto: utilizando las funciones substring() y slice().

Recuerda que es importante asegurarse de que la longitud a la que cortas la cadena sea la adecuada para tu aplicación y que usar comandos de recorte incorrectos puede afectar significativamente el funcionamiento del código.

Preguntas frecuentes

¿Puedo recortar una cadena en su lugar sin crear una nueva variable en JavaScript?

Sí, puedes utilizar la función splice() para recortar una cadena en su lugar. La sintaxis es la siguiente:

string.splice(start, deleteCount, string_to_add)

Donde start es el índice donde se iniciará el recorte, deleteCount es el número de caracteres que se eliminarán de la cadena a partir del índice y string_to_add (opcional) es una cadena que se insertará en lugar de los caracteres eliminados. Aquí hay un ejemplo:

var cadena = "holamundo";
cadena.splice(2, 4); // la cadena ahora es "ho"

¿Puedo recortar una cadena en función de su contenido en lugar de su longitud?

Sí, puedes hacerlo con la función split(). La función split() divide una cadena en un arreglo, utilizando un separador que le especifiquemos.

var cadena = "Juan,araquino,cafe";
var arreglo = cadena.split(",");
var nombre = arreglo[0];
var apellido = arreglo[1];
var bebida = arreglo[2];

En este ejemplo, utilizamos la función split() para separar los elementos de una cadena en un arreglo utilizando la coma como separador. Luego, podemos utilizar diferentes variables para almacenar cada elemento del arreglo.

¿Para qué se utiliza la función substr()?

La función substr() es similar a substring(), pero en lugar de tomar el índice exacto donde se iniciará el recorte, toma una posición inicial y una longitud.

string.substr(start, length)

Donde start es la posición donde se iniciará el recorte y length es la longitud de la cadena resultante. Esta función está en desuso, por lo que se recomienda utilizar substring() o slice() en su lugar.

¿Puedo recortar una cadena en JavaScript sin usar funciones integradas?

Sí, puedes recortar una cadena sin utilizar funciones integradas en JavaScript utilizando la manipulación de caracteres directamente. Por ejemplo:

var cadena = "hola";
var nueva_cadena = "";
for (var i = 0; i < 2; i++) {
nueva_cadena += cadena[i];
}

En este ejemplo, estamos creando una nueva cadena que contiene los primeros dos caracteres de la cadena original. Para hacerlo, utilizamos un bucle for que recorre los primeros dos caracteres de la cadena original y los agrega a la nueva cadena utilizando el operador +=.

Ejemplos de código

A continuación te mostramos algunos ejemplos de como se aplican estas funciones en código:

Ejemplo 1: Recortar una cadena a una longitud específica utilizando substring

var nombre = "Juan Perez";
var nombre_recortado = nombre.substring(0, 4);
console.log(nombre_recortado); // "Juan"

Ejemplo 2: Recortar una cadena a una longitud específica utilizando slice

var apellido = "Martinez";
var apellido_recortado = apellido.slice(-3);
console.log(apellido_recortado); // "nez"

Ejemplo 3: Recortar una cadena utilizando split()

var cadena = "uno-dos-tres-cuatro";
var arreglo = cadena.split("-");
console.log(arreglo); // ["uno", "dos", "tres", "cuatro"]

Ejemplo 4: Recortar una cadena sin utilizar funciones integradas

var cadena = "hola mundo";
var nueva_cadena = "";
for (var i = 0; i < 4; i++) {
nueva_cadena += cadena[i];
}
console.log(nueva_cadena); // "hola"

Cómo obtener href en JavaScript

¿Qué es assert en JavaScript?

Cómo cambiar el color de fondo en JavaScript

¿Cuál es el equivalente en JavaScript a HashSet de C#?

Cómo capturar el evento de clic derecho en JavaScript

Acortar una cadena en JavaScript

Cómo Desencadenar un Evento de Clic en JavaScript

Cómo eliminar caracteres de cadenas de texto en JavaScript

Cómo Encontrar el Índice de un Objeto en un Array de JavaScript