Cómo invertir una cadena en JavaScript

En este artículo, invertimos las cadenas usando el operador de propagación, los métodos integrados split(), reverse() y join(), creando bucles for que crean una nueva cadena invertida y una función recursiva usando substring() y charAt().

Introducción

Invertir una cadena no es raro en el desarrollo y bastante popular para las preguntas de entrevistas de nivel de entrada. Con JavaScript, tenemos muchas formas de invertir una cadena. Podemos usar una combinación del método split() de la cadena, así como los métodos reverse() y join() de la matriz (ya que las cadenas son, en última instancia, matrices de caracteres).

También podemos invertir una cadena con nuestras propias funciones iterativas (bucle) o recursivas.

En esta guía, veremos varias formas de invertir una cadena en JavaScript.

Uso de métodos integrados para invertir la cadena - split(), reverse() y join()

La forma más sencilla de invertir una cadena en JavaScript es dividir una cadena en una matriz, ‘invertir ()’ y ‘unir ()’ de nuevo en una cadena. Con ES6, esto se puede acortar y simplificar hasta:

1
2
3
4
let string = "!onaiP"
string = [...string].reverse().join("");

console.log(string); // "Piano!"

Aquí, el Sintaxis extendido se usa para dividir la cadena en una matriz y es funcionalmente equivalente al método split(), que también podría usar en su lugar .

Para comprender por qué funcionan todas juntas, repasemos qué hace cada función.

separar()

El método split() devuelve una nueva matriz de cadenas después de dividir una cadena con el separador provisto:

1
string.split(separator, limit)

El separador define dónde se divide la cadena en un elemento de la matriz resultante. Podemos definir el número del elemento de la matriz con el parámetro limit. Cuando usamos el método split() con una cadena vacía, '', la cadena se dividirá en cada carácter. Será útil cuando convertimos nuestra cadena en una matriz de caracteres individuales.

Nuevamente, puede usar el operador de propagación para lograr el mismo resultado. El operador de propagación es un operador de JavaScript que funciona en iterables como una matriz, cadena y objetos. Podemos copiar y concatenar objetos y arreglos usando el operador de propagación:

1
2
[...myVar, 4, 5, 6] // combines myVar array with the given elements
myFunc(...myVar) // Use the myVar's elements as argument to the function

Cuando el operador de propagación se usa con una cadena, la cadena se convierte en una secuencia de caracteres:

1
2
3
let str = 'hello';
console.log([...str]); // ["h","e","l","l","o"]
console.log(str.split('')); // ["h","e","l","l","o"]

{.icon aria-hidden=“true”}

Nota: Al dividir caracteres UTF-16, use el operador de extensión en lugar del método split().

reverso()

reverse() devuelve una matriz invertida, en el lugar. Es decir, la matriz original se invierte en lugar de una copia que se devuelve como resultado:

1
2
3
4
let str = ['a','b','c','d'];
let reversedStr = str.reverse();
console.log(str); // ["d","c","b","a"]
console.log(reversedStr); // ["d","c","b","a"]

No necesita asignar el resultado a una nueva variable, sin embargo, comúnmente lo hacemos para cambiar el nombre de la variable a uno más indicativo.

unirse()

El método join() concatena los elementos de una matriz y devuelve una cadena. También podemos especificar un separador, que es opcional, para unir los elementos. Cuando usamos el separador predeterminado, los elementos estarán separados por una coma en la cadena. El uso de una cadena vacía como separador concatenará los elementos de la matriz y regresará como una cadena como de costumbre:

1
2
3
4
let str = ['a','b','c','d'];
console.log(str.join('')); // "abcd"
console.log(str.join()); //  "a,b,c,d"
console.log(str.join(' - ')); // "a - b - c - d"

Combinación de los métodos integrados para invertir la cadena

Con todo eso en mente, la forma en que funcionan juntos se vuelve intuitiva:

1
2
3
4
5
6
let str = 'guitar';
console.log('The original string is: ' + str);
let splitStr = str.split(''); // ["g","u","i","t","a","r"]
let reversedArr = splitStr.reverse();
let reversedStr = reversedArr.join('');
console.log("The reversed string is: " + reversedStr);

O bien, puede acortarlo a:

1
2
3
let reversedStr = [...str].reverse().join('');
// Or
let reversedStr = str.split('').reverse().join('');

El código anterior da como resultado:

1
2
The original string is: guitar
The reversed string is: ratiug

Usar un bucle for para invertir la cadena

Con un bucle for, podemos iterar sobre cada carácter de la cadena. Comenzando desde el final de la cadena hasta el principio de la cadena, podemos agregar continuamente los caracteres a una nueva cadena y así formar una cadena invertida:

1
2
3
4
5
6
7
8
9
const str = 'guitar';
console.log('The original string is: ' + str);
let reversedStr = '';

for (let i = str.length - 1; i >= 0; i--) {
  reversedStr += str[i];
}

console.log('The reversed string is: ' + reversedStr);

Aquí, creamos una cadena vacía, reversedStr, para contener la cadena invertida. Los índices de cadena son como índices de matriz, comienzan en 0. Por lo tanto, comenzamos el ciclo desde uno menos que la longitud de la cadena (tomando la letra r) y continuamos hasta que nuestro contador llega a 0 (con la letra g ).

La variable reversedStr concatena los elementos de la cadena.

Ejecutar el código nos da esta salida:

1
2
The original string is: guitar
The reversed string is: ratiug

Usar la recursión para invertir la cadena

La recursividad es un proceso en el que una función se llama a sí misma. Sin embargo, una función que se llama a sí misma puede terminar llamándose a sí misma infinitamente, y el proceso nunca terminará sin una condición de salida. Por lo tanto, proporcionamos una condición, a saber, la condición base, para finalizar el comportamiento recursivo de la función.

{.icon aria-hidden=“true”}

Podemos usar la recursividad para resolver problemas escribiendo muy pocas líneas de código sin la molestia de iterar. Sin embargo, este proceso puede ser lento si la profundidad de recursión es alta.

La sintaxis de una función recursiva genérica se ve así:

1
2
3
4
5
6
7
8
function recursion(){
    .......
    base condition
    recursion()
    .......
}

recursion()

Cuando se llama a la función recursion(), primero verifica alguna condición, y si se evalúa como true, la función se llama a sí misma. Este proceso se repite, una y otra vez. Cuando la condición falla, la recursividad se detiene y la función devuelve un valor.

Podemos usar la recursividad para invertir una cadena en JavaScript usando algunos métodos de cadenas como substring() y charAt().

El método substring() extrae una parte de la cadena. Podemos pasar los índices de inicio y fin en el método como parámetros. Si solo se proporciona el índice de inicio al método, extraerá la cadena de ese índice hasta el último.

Pero, cuando proporcionamos tanto el índice inicial como el final, extraerá la cadena del índice inicial pero no incluirá el índice final:

1
2
3
let str = 'hello'
console.log(str.substring(1)) //"ello"
console.log(str.substring(1,3)) //"el"

El método charAt() extrae el carácter indexado de una cadena. Devuelve una nueva cadena que consta del carácter. A continuación se muestra un ejemplo del método.

1
2
let str = 'hello'
console.log(str.charAt(2)) // "l"

Para nuestra función recursiva, primero verificamos si la cadena está vacía como la condición base. Después de una serie de llamadas recursivas, la cadena quedará vacía y la recursividad terminará. Dentro de la función reverse(), la función recursiva reverse() recibe substring(1) como su parámetro.

El método charAt() está concatenado con la función reverse() en la declaración de retorno:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function reverse(str) {
  if (str === '')
    return '';
  else
    return reverse(str.substring(1)) + str.charAt(0);
}

let str = 'guitar'
console.log('The original string is: ' + str);
const output = reverse(str);
console.log('The reversed string is: ' + output);

En la primera llamada recursiva, reverse("guitarra") dará como resultado reverse("uitar") + "g". En la segunda llamada, reverse("uitar") resultará reverse("itar") + "u". Del mismo modo, la última llamada recursiva, reverse("o") devolverá reverse("")+ "r".

Ahora la ejecución de la parte else finaliza y la recursividad volverá a su profundidad. En la llamada final, la cadena r se agrega a reverse(''), lo que da como resultado la cadena r.

A continuación, la llamada a la función avanza un paso por encima de donde se agrega la cadena a a reverse("r"). Hace la cadena ra. Del mismo modo, t se agrega con ra, y se convierte en rat. De manera similar, la profundidad de recursión se recorre hacia arriba y finalmente devuelve la cadena ratiug:

1
2
The original string is: guitar
The reversed string is: ratiug

Conclusión

En este artículo discutimos cómo invertir una cadena. Usamos los métodos integrados split(), reverse() y join(), el operador de propagación, creamos un bucle for que crea una nueva cadena invertida y una función recursiva usando substring() y charAt() que produjeron los mismos resultados. ados.