Convertir objeto en cadena en JavaScript

1. Uso de la función incorporada de JavaScript JSON.stringify()
2. Usando console.log() y %o
3. Convierta un objeto JavaScript en una cadena usando el Object.enteries()
4. Convierta un objeto JavaScript en una cadena JSON utilizando Object.enteries() y la desestructuración de objetos
5. Convierta un objeto JavaScript en una cadena JSON usando Object.keys()

Los objetos de JavaScript constan de atributos en forma de pares clave-valor. Si los registramos junto a una cadena, vemos [objeto Objeto]. Oculta los atributos del objeto debajo. Mientras codificamos, necesitaremos convertir los objetos javascript a un tipo de datos de cadena. Específicamente cuando se trata de almacenar datos en el localstorage o en una base de datos. Hay varias formas en las que podemos convertir un objeto javascript en una cadena.

Uso de la función incorporada de JavaScript JSON.stringify()

JSON.stringify() es una función potente y de uso común para convertir un objeto javascript en una cadena JSON. También podemos usarlo para diseñar la representación JSON para una mejor legibilidad. La función acepta tres parámetros:

• javascriptObject: El primer parámetro es un parámetro obligatorio donde pasamos el objeto JavaScript de origen que necesitamos convertir a una cadena JSON.
• replacerFunction: El segundo parámetro es opcional. Acepta una función mediante la cual podemos alterar el objeto javascript fuente. Podemos extraer esos parámetros de objeto que deseamos ver en la salida JSON en cadena final. Si pasamos un valor null en este parámetro, la función incluirá todos los parámetros del objeto javascript de origen en su salida JSON en cadena.
• numberOfSpaces: El parámetro final es el número de espacios que se introducirán antes de cada parámetro mientras la cadena está en proceso. Es un parámetro numérico. Si el valor del parámetro es mayor que 1, formateará el JSON en cadena con uno o más espacios antes de cada parámetro de objeto. Está destinado exclusivamente a efectos de formato para hacer la salida en una forma legible por humanos.

Consulte el siguiente código para conocer su uso.

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
console.log('Item: ' + item);
console.log('Item: ' + JSON.stringify(item));
console.log('Item: ' + JSON.stringify(item, null, 2));

Producción :

Item: [object Object]
Item: {"id":1,"name":"icy-cream","flavor":"vanilla"}
Item: {
  "id": 1,
  "name": "icy-cream",
  "flavor": "vanilla"
}

El primer registro genera una versión enmascarada del objeto javascript. El segundo registro tiene la representación de cadena del objeto JSON, pero no tiene formato. El último registro es la versión formateada del objeto javascript, que es bastante legible.

Usando console.log() y %o

console.log() es una función javascript incorporada para registrar valores en la consola del navegador. Acepta tres parámetros. El primer parámetro es el objeto JavaScript; el segundo parámetro es el mensaje que se mostrará; el parámetro final es una subcadena del mensaje que se registrará en la consola web. El siguiente código muestra la conversión de objetos javascript a una cadena usando el método console.log.

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
console.log('Item: ' + item);
console.log('Item: %o', item);

Producción :

Item: [object Object]
Item: {id: 1, name: "icy-cream", flavor: "vanilla"}

En el código anterior, el primer comando console.log("Item: " + item); registra el objeto como [object Object]. Oculta los parámetros del objeto. Mientras que, si agregamos %o y pasamos el objeto como argumento, podemos ver el contenido interno del objeto JavaScript. También podemos usar %o para registrar el objeto JavaScript.

Tenga en cuenta que el %o en console.log nos permite ver el objeto en la consola. Pero no podemos usarlo para convertir el valor y almacenarlo en alguna variable para su uso posterior.

Convierta un objeto JavaScript en una cadena usando el Object.enteries()

Object.enteries() es una función JavaScript incorporada. Divide el objeto en un array de pares [clave, valor]. Por lo tanto, podemos iterar sobre dicha matriz y convertir manualmente el objeto JavaScript en una cadena.

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
var stringifiedObj = Object.entries(item).map(x => x.join(':')).join('\n');
console.log('Item: ' + item);
console.log(`Item: \n{\n${stringifiedObj}\n}`);

Producción :

Item: [object Object]
Item: 
{
id:1
name:icy-cream
flavor:vanilla
}

En el código, primero usamos la función Object.enteries() para dividir el objeto en un array de pequeñas matrices de parámetros. A continuación, convertimos la submatriz en un formato clave: valor aplicando la función join(":") incorporada en javascript. Convierte el array [clave, valor] resultante de Object.enteries al formato clave: valor. Y finalmente registramos el objeto JavaScript en su representación de cadena. Es un método conciso que emplea una sola pieza de código, Object.entries(item).map(x=>x.join(":")).join("\n") para el proceso de conversión.

Convierta un objeto JavaScript en una cadena JSON utilizando Object.enteries() y la desestructuración de objetos

Otra forma de utilizar Object.enteries() para la conversión es utilizarlo junto con el concepto de desestructuración de objetos de JavaScript. Usando esta técnica, desestructuramos el array de pares clave-valor generada por Object.enteries(), iteramos sobre ella usando un bucle for y la asignamos a las variables temporales param y value. Almacenamos el resultado de la iteración en la variable str. Finalmente, registramos la variable str usando el console.log(). El código es el siguiente.

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
var str = '';
for (const [p, val] of Object.entries(item)) {
  str += `${p}:${val}\n`;
}
console.log(
    'Item: ' +
    '{' + str + '}');

Producción :

Item: {id:1
name:icy-cream
flavor:vanilla
}

Convierta un objeto JavaScript en una cadena JSON usando Object.keys()

Podemos utilizar la función incorporada de JavaScript Object.keys() para convertir manualmente el objeto JavaScript en una cadena JSON. El Object.keys() devuelve un array que contiene todas las claves de un objeto JavaScript. Luego podemos iterar sobre ellos usando un bucle for y formar la versión de cadena del objeto JavaScript. El resultado final se puede registrar o almacenar en una variable. El código es el siguiente.

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
var str = '';
for (key of Object.keys(item)) {
  str += `${key}:${item[key]}\n`;
}
console.log(
    'Item: ' +
    '{' + str + '}');

Producción :

Item: {id:1
name:icy-cream
flavor:vanilla
}

El concepto es similar al de utilizar Object.enteries() para obtener los parámetros del objeto javascript. Object.enteries() devuelve los pares clave-valor como un array, mientras que Object.keys devuelve el array de cadenas de claves de objeto que se procesan adicionalmente haciendo un bucle sobre los arrays de salida y formando la representación de cadena del objeto javascript.