Concatenar cadenas y enteros en JavaScript

1. Concatenar cadenas y enteros usando una cadena de plantillas en JavaScript
2. Concatenar cadena y entero usando el operador + en JavaScript

Siempre que desarrollamos aplicaciones web en JavaScript, siempre nos encontramos con una situación en la que queremos concatenar una variable de cualquier tipo (entero, flotante, etc.) con una cadena. Este es un escenario común.

Este artículo explica cómo podemos usar la función de cadena de plantilla y el operador + para concatenar un valor de cadena con un valor entero en JavaScript.

Concatenar cadenas y enteros usando una cadena de plantillas en JavaScript

La cadena de plantilla en JavaScript le permite agregar variables de cualquier tipo dentro del valor de cadena dado. Los caracteres de acento grave (`) representan la cadena de la plantilla.

Entonces, para usar esta función, tenemos que encerrar nuestra cadena dentro de los caracteres de acento grave.

No usamos el operador tradicional de comillas dobles (" ") aquí. La cadena de plantilla también se conoce como literal de plantilla.

La función de cadena de plantilla se introdujo en la versión ES6 de JavaScript.

Digamos que tenemos una cadena y una variable entera value con un valor de 8, como se muestra a continuación. Nuestro objetivo es concatenar el valor de la variable value con la cadena y luego imprimirlo en la consola.

Fragmento de código - JavaScript:

let value = 8;
console.log('Number is the value.');

Producción :

Number is the value.

Para hacer esto, primero, tenemos que reemplazar las comillas dobles (" ") de la cadena con los caracteres de acento grave (`).

Después de encerrar la cadena con acentos graves, podemos concatenar o insertar la variable value en cualquier lugar dentro de la cadena. Para esto, tenemos que usar el ${}.

Y dentro de esto, agregamos la variable ${value}, como se muestra a continuación.

Fragmento de código - JavaScript:

let value = 8;
console.log(`Number ${value} is the value.`);

Producción :

Number 8 is the value.

Como puede ver, el valor 8 se imprime dentro de la cadena. Siempre que queramos concatenar una cadena con una variable, usamos el concepto de literales de cadena.

De manera similar, puede concatenar muchas variables que tengan cualquier tipo en la cadena con esta característica.

Concatenar cadena y entero usando el operador + en JavaScript

El operador + en JavaScript también puede concatenar una cadena con un número entero. Tomaremos el mismo ejemplo que hemos visto anteriormente, pero usaremos el operador + en lugar de una cadena de plantilla.

Fragmento de código - JavaScript:

let value = 8;
console.log('Number ' + value + ' is the value.');

Producción :

Number 8 is the value.

Aquí, tenemos que usar las comillas dobles tradicionales en una cadena, y en cualquier posición que queramos concatenar la variable entera value con la cadena, primero tenemos que cerrar las comillas dobles. Luego usamos un operador + antes y después de la variable value.

Después de esto, podemos continuar nuevamente con la cadena restante con la ayuda de comillas dobles, como se muestra arriba.

El único problema al usar el operador + es que si desea concatenar muchas variables entre la cadena, debemos separar la cadena usando varios operadores +, como se muestra a continuación.

Si hay muchas variables que queremos concatenar con la cadena, podría crear problemas al leer y comprender el código.

Fragmento de código - JavaScript:

let value1 = 8;
let value2 = 16;
let value3 = 24;

console.log('Table of ' + value1 + ' has values ' + value2 + ' and ' + value3);

Producción :

Table of 8 has values 16 and 24

Por lo tanto, siempre se recomienda que utilice la función de literales de plantilla de ES6 tanto como sea posible. Y si hay muy pocas variables que deben concatenarse con la cadena, entonces, en ese caso, puede usar el operador +.