Javascript: concatenar cádenas con join()

04 Feb 2011

A menudo me encuentro con código de otros compañeros en los que, para unir cadenas de texto, han utilizado una estructura similar a la siguiente:

var foo = 'Hello';
var bar = 'World';
 
console.log( foo + bar ); // HelloWorld

Si además, necesitamos incluir entre cada elemento un espacio, una coma o cualquier otra cosa, el código puede quedar así:

console.log( foo + ' ' + bar ); // Hello World
console.log( foo + ' - ' + bar ); // Hello - World

Este método es perfectamente válido cuando son pocos los elementos a concatenar. Sin embargo, cuando tenemos la necesidad de unir varios y entre cada uno de ellos hay que incluir un separador, el resultado puede volverse difícil de leer. Por ejemplo:

function  printPersonal( name, lastName, city, cp, phone ){
  return name + '\n' + lastName + '\n' + city + '\n' + cp + '\n' + phone;  
}
 
console.log( printPersonal( 'Carlos', 'Benitez', 'Madrid', '28001', '123456789') );
/*
Carlos 
Benitez 
Madrid 
28001 
123456789
*/

NOTA: Entre cada una de las variables, el valor ‘\n’ corresponde a un salto de línea. Para más información, «Cadenas de escape: cómo poner tildes en Javascript«.

Optimizando el código

Una forma más elegante de obtener el mismo resultado es utilizando la función join().

join() une todos los elementos de un array formando una cadena y separándolos con aquel argumento que definamos. Por defecto, el separador es la coma (,).

var foo = [ 'Once', 'upon', 'a', 'time' ];
console.log( foo.join( " " ) ); // Once upon a time
console.log( foo.join( "-" ) ); // Once-upon-a-time

Por lo tanto, en el ejemplo anterior, solo tenemos que crear un array sobre la marcha y aplicar esta función con el separador que necesitemos:

function  printPersonal( name, lastName, city, cp, phone ){  
  return [name, lastName, city, cp, phone].join( "\n" );
}
 
console.log( printPersonal( 'Carlos', 'Benitez', 'Madrid', '28001', '123456789') );
/*
Carlos 
Benitez 
Madrid 
28001 
123456789
*/

En definitiva, un método elegante para un código más limpio y fácil de leer.

Más información

Angus Croll, JavaScript’s Dream Team: in praise of split and join

Más:

{2} Comentarios.

  1. santy

    Muy cierto lo que comentas, en ocasiones se vuelven bastante dificil de leer cadenas concatenadas con muchas variables, el metodo que propones me ha sido util. Sin embargo creo que lo mas optimo sería:


    function printPersonal(){
    return Array.slice(arguments).join( "\n" );
    }

    console.log( printPersonal( 'Carlos', 'Benitez', 'Madrid', '28001', '123456789') );

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *