Cómo unir/concatenar cadenas en JavaScript

En este breve tutorial, veremos cómo unir/concatenar/agregar cadenas en JavaScript usando el operador +, los métodos concat() y join(), así como comparar y probar el rendimiento de nuestro código.

Introducción

Las cadenas son uno de los tipos de datos más comunes que se utilizan en el software: representan cadenas de caracteres que analizamos como palabras.

La concatenación de cadenas es una tarea bastante estándar, especialmente porque no siempre tratamos con cadenas estáticas. A menudo, creamos cadenas dinámicamente, como con plantillas ES6, o simplemente concatenamos cadenas para formar otras nuevas.

If you'd like to read more about creating dynamic formatted strings - read our Guía de plantillas ES6/Literales de cadena en Node.js!

En este tutorial, veremos cómo unir/agregar/concatenar cadenas en JavaScript.

{.icon aria-hidden=“true”}

Nota: Las cadenas son inmutables, lo que significa que realmente no se pueden cambiar. Cada vez que llama a una operación de cambio en una cadena, se construye una copia con los cambios aplicados y se devuelve en lugar del original.

Concatenar con el operador +

El enfoque más fácil y probablemente más intuitivo para la concatenación de cadenas es usar el operador +:

1
console.log("hello " + "world");

Ejecutar este breve fragmento de código da como resultado:

1
hello world

Es posible asignar una cadena en la memoria a una variable de referencia y hacer referencia al objeto en lugar de concatenarlo directamente:

1
2
3
let firstWord = "hello ";
let secondWord = "world";
let newWord = firstWord + secondWord;

Esto también resulta en:

1
hello world

{.icon aria-hidden=“true”}

Nota: En la mayoría de los casos, puede reemplazar razonablemente = y + con la abreviatura +=, lo que le permite omitir la referencia al primer operando, que se reemplazará con la variable a la que le estás asignando el resultado.

En su lugar, podría estar escribiendo la versión abreviada:

1
2
3
let word = "hello ";
word += "world";
console.log(word);

Vale la pena señalar que también se pueden incluir otros tipos de datos en la mezcla, y siempre que sea posible una conversión implícita, JavaScript "coincidirá" con los tipos de datos en cadenas.

Por ejemplo, los números enteros se convierten fácilmente en cadenas, por lo que si intenta concatenar un número entero en una cadena, el número entero se convierte antes de agregarlo. Es posible que una cadena no se convierta en un número entero en todo momento, como cuando no representa un número o tiene un formato extraño, por lo que, en general, es más fácil convertir a una cadena que a partir de un cuerda:

1
2
3
4
5
6
var str = "hello";
var int = 21;
var boolean = true;

console.log(str+int);
console.log(str+boolean)

Esto da como resultado que tanto el booleano como el entero se conviertan en representaciones de cadena y luego se agreguen a la cadena "hola":

1
2
hello21
hellotrue

Cadena.prototipo.concat()

El método concat() fue creado específicamente para esta tarea - para concatenar cadenas. Se puede invocar sobre cualquier cadena y acepta que otra cadena se concatene con la que llama.

En cierto sentido, es similar a usar el operador abreviado +=:

1
2
3
4
let string1 = "Java";
let string2 = "Script";

console.log(string1.concat(string2));

Esto resulta en:

1
JavaScript

Además, puede especificar un delimitador como primer argumento, que luego se agrega entre todas las cadenas concatenadas:

1
2
3
4
let string1 = "Java";
let string2 = "Script";

console.log(string1.concat(", ", string2));

Esto resulta en:

1
Java, Script

Array.prototype.join()

El método join() de la clase Array se usa para unir los elementos de una matriz en una cadena, con un delimitador predeterminado de una coma (,).

Esto nos permite manejar una mayor cantidad de cadenas de una manera mucho más concisa, y no es extraño leer un archivo en una matriz o trabajar con una matriz de cadenas que le gustaría unir. .

Si no pasa ningún argumento al método, se usará el valor predeterminado para delimitar las cadenas recién unidas. Pasemos una cadena vacía para omitir eso y simplemente unirlos de manera similar a lo que hemos visto antes:

1
2
let elements = ["JavaScript", "HTML", "CSS"];
console.log(elements.join(""));

Esto resulta en:

1
JavaScriptHTMLCSS

¿Qué enfoque usar? {#qué enfoque usar}

Se recomienda preferir la función concat() en lugar del operador +, debido a los beneficios de rendimiento. Sin embargo, esto en realidad no siempre se cumple y tiene en cuenta varias suposiciones.

En primer lugar, la cantidad de cadenas que está concatenando juega un papel en esto, así como otros factores que quizás ni siquiera conozca. Comparemos el método concat() así como el operador +:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
console.time('Concatenating with Operator');
concatWithOperator();
console.timeEnd('Concatenating with Operator');

console.time('Concatenating with Function');
concatWithFunction();
console.timeEnd('Concatenating with Function');

function concatWithOperator() {
    let result = "";
    for (let i = 0; i < 10000; i++) {
      result += i;
    }
}

function concatWithFunction() {
    let result = "";
    for (let i = 0; i < 10000; i++) {
      result = result.concat(i);
    }
}

Esto resulta en:

1
2
Concatenating with Operator: 3.232ms
Concatenating with Function: 1.509ms

Pero espere, cambiemos el entorno y ejecutemos esto en una máquina diferente:

1
2
Concatenating with Operator: 1.985ms
Concatenating with Function: 1.990ms

Y ejecutemos eso en la misma máquina de nuevo:

1
2
Concatenating with Operator: 2.030ms
Concatenating with Function: 0.934ms

Los tiempos de ejecución varían enormemente (aunque todos ellos son aceptables en velocidad). También vale la pena señalar la declaración oficial de MDN, con respecto a los beneficios de rendimiento:

Se recomienda encarecidamente que se utilicen los operadores de asignación (+, +=) en lugar del método concat().

Lo que puede parecer extraño, dado el hecho de que concat() supera a los operadores en las pruebas o, en el peor de los casos, tiene la misma velocidad. ¿Lo que da? Bueno, comparar código como este no es tan fácil como simplemente ejecutarlo y observar los resultados.

Su navegador, su versión, así como el optimizador que utiliza pueden variar de una máquina a otra, y propiedades como esas realmente afectan el rendimiento. Por ejemplo, hemos usado diferentes cadenas en la concatenación, las generadas a partir de la iteración. Si tuviéramos que usar la misma cadena, un optimizador como el V8 de Google optimizaría aún más el uso de la cadena.

{.icon aria-hidden=“true”}

Pruebe y verifique su propio código en lugar de seguir los consejos al pie de la letra. No todas las máquinas y entornos son iguales, y lo que funciona bien en uno, puede no funcionar bien en otro. Tenga esto en cuenta al crear aplicaciones también.

Conclusión

Hemos echado un vistazo a cómo concatenar cadenas en JavaScript usando el operador +, el método join() de la clase Arrays así como el método concat() de la clase String .

Echamos un vistazo a la postura oficial y realizamos nuestras propias pruebas para ver qué enfoque es el más eficaz y, como de costumbre, depende de varios factores. es.