Concatenar cadenas en JavaScript sin sumar por accidente

Texto y suma comparten un operador

El operador + puede sumar números o concatenar cadenas. El orden de evaluación importa cuando mezclas los dos tipos.

console.log('Total: ' + 2 + 3); // Total: 23
console.log('Total: ' + (2 + 3)); // Total: 5

Para un importe, calcula primero el valor numérico y dale formato después. Concatenar no aplica reglas monetarias ni decide cuántos decimales debe mostrar una cantidad.

Unir partes con un separador

Cuando una lista representa piezas de un nombre o una ruta de lectura, join permite colocar el separador una sola vez.

const partes = ['Ana', '', 'Pérez'];
const nombre = partes.filter(parte => parte.trim() !== '').join(' ');
console.log(nombre); // Ana Pérez

El ejemplo presupone que todos los elementos son cadenas. Si vienen de datos externos, valida esa condición antes de llamar a trim. No utilices simplemente filter(Boolean) cuando cero sea un valor que quieras mostrar: lo eliminarías junto con otros valores falsos.

Valores ausentes y HTML

Convertir null o undefined a texto puede mostrar esas palabras al visitante. Define una alternativa cuando un campo sea opcional, por ejemplo dato ?? 'Sin nombre'. Decide también si una cadena vacía debe conservarse o tratarse como ausencia: ?? no la sustituye.

La cadena final no es HTML seguro por el hecho de estar bien concatenada. Para mostrar un nombre en una página, asigna textContent. Si necesitas construir una URL, codifica sus componentes en vez de añadir sin más el texto de un formulario.

Saltos y legibilidad

Para un mensaje multilínea, utiliza saltos explícitos o una plantilla de texto, y comprueba dónde se va a mostrar. La consola y un elemento HTML no representan necesariamente un salto de la misma forma. Evita añadir espacios en cada fragmento si luego vas a unirlos con otro espacio: un separador centralizado hace más fácil mantener el formato.

Referencia 1

Referencia 2