Javascript: concatenar cádenas con join()

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

Acerca de Carlos Benítez

Programador Web y arquitecto Javascript. Experto en jQuery, accesibilidad y usabilidad. Fundador de www.etnassoft.com.
Esta entrada fue publicada en Javascript, Tips (trucos) y etiquetada , , , . Guarda el enlace permanente. Sígueme en Twitter

Últimos libros gratuitos añadidos a OpenLibra

{2} Comentarios.

  1. 21sep2011/
    22:17 h /

    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 necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Licencia Creative Commons 3.0

®Copyright 2011. Cotenido web bajo licencia Creative Commons 3.0

Códigos bajo licencias MIT y GPL. Ver página de licencias para más información