Converter objeto em string em JavaScript

1. Usando a função JavaScript embutida JSON.stringify()
2. Usando console.log() e %o
3. Converter objeto JavaScript em string usando Object.enteries()
4. Converta um objeto JavaScript em uma string JSON usando Object.enteries() e a destruição de objeto
5. Converter objeto JavaScript em uma string JSON usando Object.keys()

Os objetos JavaScript consistem em atributos na forma de pares de valores-chave. Se os registrarmos junto com uma string, vemos [objeto Object]. Ele oculta os atributos do objeto por baixo. Durante a codificação, precisaremos converter os objetos javascript em um tipo de dados de string. Especificamente quando se trata de armazenar dados no localstorage ou em um banco de dados. Existem várias maneiras de converter um objeto javascript em uma string.

Usando a função JavaScript embutida JSON.stringify()

JSON.stringify() é uma função poderosa e comumente usada para converter um objeto javascript em uma string JSON. Também podemos usá-lo para estilizar a representação JSON para melhor legibilidade. A função aceita três parâmetros:

• javascriptObject: O primeiro parâmetro é um parâmetro obrigatório onde passamos o objeto JavaScript de origem que precisamos converter em uma string JSON.
• replacerFunction: O segundo parâmetro é opcional. Ele aceita uma função pela qual podemos alterar o objeto javascript de origem. Podemos extrair os parâmetros de objeto que desejamos ver na saída JSON stringificada final. Se passarmos um valor null neste parâmetro, a função incluirá todos os parâmetros do objeto javascript de origem em sua saída JSON stringificada.
• numberOfSpaces: o parâmetro final é o número de espaços a serem introduzidos antes de cada parâmetro enquanto a stringificação está em andamento. É um parâmetro numérico. Se o valor do parâmetro for maior que 1, ele formatará o JSON stringificado com um ou mais espaços antes de cada parâmetro de objeto. Destina-se puramente a fins de formatação para tornar a saída em um formato legível.

Consulte o seguinte código para 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));

Produção:

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

O primeiro log produz uma versão mascarada do objeto javascript. O segundo log tem a representação de string do objeto JSON, mas não está formatado. O último log é a versão formatada do objeto javascript, que é bastante legível.

Usando console.log() e %o

console.log() é uma função javascript embutida para registrar valores no console do navegador. Ele aceita três parâmetros. O primeiro parâmetro é o objeto JavaScript; o segundo parâmetro é a mensagem a ser exibida; o parâmetro final é uma substring da mensagem a ser registrada no console da web. O código a seguir mostra a conversão de objetos javascript em uma string usando o 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);

Produção:

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

No código acima, o primeiro comando console.log("Item: " + item); registra o objeto como [object Object]. Ele oculta os parâmetros do objeto. Ao passo que, se adicionarmos %o e passarmos o objeto como um argumento, podemos ver o conteúdo interno do objeto JavaScript. Também podemos usar %o para registrar o objeto JavaScript.

Observe que %o em console.log nos permite visualizar o objeto no console. Mas não podemos usá-lo para converter o valor e armazená-lo em alguma variável para uso posterior.

Converter objeto JavaScript em string usando Object.enteries()

Object.enteries() é uma função JavaScript embutida. Ele divide o objeto em um array de pares [chave, valor]. Portanto, podemos iterar esse array e converter manualmente o objeto JavaScript em uma string.

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}`);

Produção:

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

No código, primeiro usamos a função Object.enteries() para dividir o objeto em um array de pequenas matrizes de parâmetros. Em seguida, convertemos a submatriz em um formato key:value aplicando a função javascript inbuilt join(":"). Ele converte a saída do array [chave, valor] pelo Object.enteries para o formato chave: valor. E finalmente registramos o objeto JavaScript em sua representação de string. É um método conciso que emprega apenas uma única parte do código, Object.entries(item).map(x=>x.join(":")).join("\n") para o processo de conversão.

Converta um objeto JavaScript em uma string JSON usando Object.enteries() e a destruição de objeto

Outra forma de usar o Object.enteries() para a conversão é usá-lo juntamente com o conceito de desestruturação de objetos do javascript. Usando esta técnica, nós desestruturamos o array de pares chave-valor produzidos pelo Object.enteries(), iteramos sobre ele usando um for loop, e o atribuímos às variáveis ​​temporárias param e value. Armazenamos o resultado da iteração na variável str. Finalmente, registramos a variável str usando o console.log(). O código é o seguinte.

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 + '}');

Produção:

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

Converter objeto JavaScript em uma string JSON usando Object.keys()

Podemos usar a função embutida javascript Object.keys() para converter manualmente o objeto JavaScript em uma string JSON. O Object.keys() retorna um array contendo todas as chaves de um objeto JavaScript. Podemos então iterar sobre eles usando um loop for e formar a versão string do objeto JavaScript. O resultado final pode ser registrado ou armazenado em uma variável. O código é o seguinte.

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 + '}');

Produção:

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

O conceito é semelhante ao de usar Object.enteries() para obter os parâmetros do objeto javascript. Object.enteries() retorna os pares de valores-chave como um array, enquanto Object.keys retorna a matriz de string de chaves de objeto que são posteriormente processadas por um loop nas matrizes de saída e formando a representação de string do objeto javascript.