logo

Cómo convertir matriz a cadena en JavaScript con toString() y join()

Este breve tutorial le mostrará dos formas de convertir matrices de JavaScript en cadenas utilizando los métodos toString() y join().

¿Qué son las matrices?

Una matriz es una estructura de datos que contiene múltiples valores. Es como una lista numerada:cada elemento de la matriz tiene un valor y una posición (llamada índice ). Los índices empezar a contar en la posición 0 , por lo que el primer elemento de una matriz está en el índice 0 , el segundo en el índice 1 y así sucesivamente.

Conversión de matrices en cadenas en JavaScript

Hay muchas razones por las que puede desear convertir una matriz en una cadena. Lo más común es que desee mostrar la matriz y su contenido como texto sin formato en una página web.

Las matrices de JavaScript pueden contener cualquier tipo de valor (cadenas, números, objetos), por lo que al convertir una matriz en una cadena, deberá tener en cuenta cómo se verán los valores en la matriz una vez convertidos también.

El método Array toString()

El toString() método devuelve una representación de cadena de una matriz y su contenido.

La sintaxis es la siguiente:

array.toString()

Tenga en cuenta que:

  • matriz puede ser cualquier variable de matriz
  • Se devolverá una representación de cadena de la matriz
  • Los valores en la matriz estarán separados por comas en la cadena resultante
  • La matriz original no se modifica llamando toString()

Ejemplos de Array toString()

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.toString();
console.log(myString);

El código anterior generará lo siguiente en la consola:

dog,cat,mouse

Tenga en cuenta que los valores de la matriz se han separado por comas .

A continuación, varios tipos diferentes de variables se almacenan en la matriz antes de convertirla en una cadena para ver cómo se verán las representaciones de cadena de esos objetos:

var myArray = ["bird", 1, false, new Date(), {foo: "bar"}];
var myString = myArray.toString();
console.log(myString);

Que generará:

bird,1,false,Wed Nov 10 2021 22:02:23 GMT+0000 (Greenwich Mean Time),[object Object]

Observe que la cadena y los valores numéricos se ven como se esperaba, y que el valor booleano también se convirtió en texto.

Más interesantes son los dos últimos elementos de la matriz.

La fecha el objeto tiene su propio toString() incorporado, que fue llamado para convertirlo en una cadena para incluirla en la matriz de cadenas.

El objeto genérico ({foo:“bar”} ) no tiene toString() method- y, por lo tanto, su representación de cadena es un identificador de objeto genérico.

El Método Array join()

El unirse() El método funciona de manera similar a toString() mientras que le permite especificar opcionalmente qué carácter se usará para separar los elementos de la matriz en la cadena resultante.

La sintaxis es la siguiente:

array.join(SEPARATOR)

Tenga en cuenta que:

  • matriz puede ser cualquier variable de matriz
  • Se devolverá una representación de cadena de la matriz
  • Los valores en la matriz estarán separados por comas en la cadena resultante
    • A MENOS QUE el SEPARATOR opcional está definido
  • La matriz original no se modifica llamando join()

Ejemplos de unión de matrices()

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.join();
console.log(myString);

El código anterior generará lo siguiente en la consola:

dog,cat,mouse

Fíjate en el separado por comas predeterminado valores. Puede especificar un separador diferente (o ningún separador):

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.join('-');
console.log(myString);

Que devolverá:

dog-cat-mouse

O, sin separador (especificado con una cadena vacía):

var myArray = ["dog", "cat", "mouse"];
var myString = myArray.join('');
console.log(myString);

Que devolverá:

dogcatmouse

El comportamiento cuando se trata de valores que no son cadenas es el mismo que con toString() , descrito anteriormente:

var myArray = ["bird", 1, false, new Date(), {foo: "bar"}];
var myString = myArray.join();
console.log(myString);

Lo que da como resultado el siguiente resultado:

bird,1,false,Wed Nov 10 2021 22:02:23 GMT+0000 (Greenwich Mean Time),[object Object]