Convertir un objet en chaîne en JavaScript

1. Utilisation de la fonction JavaScript intégrée JSON.stringify()
2. Utilisation de console.log() et %o
3. Convertir un objet JavaScript en chaîne à l’aide de Object.enteries()
4. Convertir un objet JavaScript en chaîne JSON à l’aide de Object.enteries() et de la déstructuration d’objets
5. Convertir un objet JavaScript en une chaîne JSON à l’aide de Object.keys()

Les objets JavaScript sont constitués d’attributs sous la forme de paires clé-valeur. Si nous les enregistrons à côté d’une chaîne, nous voyons [object Object]. Il masque les attributs de l’objet en dessous. Lors du codage, nous devrons convertir les objets javascript en un type de données de chaîne. Plus précisément lorsqu’il s’agit de stocker des données dans le localstorage ou une base de données. Il existe différentes manières de convertir un objet javascript en chaîne.

Utilisation de la fonction JavaScript intégrée JSON.stringify()

JSON.stringify() est une fonction puissante et couramment utilisée pour convertir un objet javascript en une chaîne JSON. Nous pouvons également l’utiliser pour styliser la représentation JSON pour une meilleure lisibilité. La fonction accepte trois paramètres :

• javascriptObject : Le premier paramètre est un paramètre obligatoire où nous passons l’objet JavaScript source que nous devons convertir en chaîne JSON.
• replacerFunction : Le deuxième paramètre est facultatif. Il accepte une fonction par laquelle nous pouvons modifier l’objet javascript source. Nous pouvons extraire les paramètres d’objet que nous souhaitons voir dans la sortie JSON stringifiée finale. Si nous passons une valeur null dans ce paramètre, la fonction inclura tous les paramètres de l’objet javascript source dans sa sortie JSON stringifiée.
• numberOfSpaces : Le dernier paramètre est le nombre d’espaces à introduire avant chaque paramètre pendant que la stringification est en cours. C’est un paramètre numérique. Si la valeur du paramètre est supérieure à 1, il formatera le JSON chaîne avec un ou plusieurs espaces avant chaque paramètre d’objet. Il est purement destiné à des fins de formatage pour rendre la sortie sous une forme lisible par l’homme.

Reportez-vous au code suivant pour l’utilisation.

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

Production:

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

Le premier journal génère une version masquée de l’objet javascript. Le deuxième journal a la représentation sous forme de chaîne de l’objet JSON, mais il n’est pas formaté. Le dernier log est la version formatée de l’objet javascript, qui est assez lisible.

Utilisation de console.log() et %o

console.log() est une fonction javascript intégrée pour enregistrer les valeurs dans la console du navigateur. Il accepte trois paramètres. Le premier paramètre est l’objet JavaScript ; le deuxième paramètre est le message à afficher ; le dernier paramètre est une sous-chaîne du message à consigner dans la console Web. Le code suivant montre la conversion d’objets javascript en chaîne à l’aide de la méthode console.log.

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

Production:

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

Dans le code ci-dessus, la première commande console.log("Item: " + item); enregistre l’objet comme [object Object]. Il masque les paramètres de l’objet. Alors que, si nous ajoutons %o et passons l’objet en argument, nous pouvons voir le contenu interne de l’objet JavaScript. Nous pouvons également utiliser %o pour enregistrer l’objet JavaScript.

A noter que le %o dans console.log permet de visualiser l’objet dans la console. Mais nous ne pouvons pas l’utiliser pour convertir la valeur et la stocker dans une variable pour une utilisation ultérieure.

Convertir un objet JavaScript en chaîne à l’aide de Object.enteries()

Object.enteries() est une fonction JavaScript intégrée. Il divise l’objet en un tableau de paires [key, value]. Par conséquent, nous pouvons parcourir un tel tableau et convertir manuellement l’objet JavaScript en chaîne.

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

Production:

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

Dans le code, nous avons d’abord utilisé la fonction Object.enteries() pour diviser l’objet en un tableau de petits tableaux de paramètres. Ensuite, nous convertissons le sous-tableau au format key:value en appliquant la fonction javascript intégrée join(":"). Il convertit le tableau [key, value] produit par Object.enteries() au format key:value. Et nous enregistrons enfin l’objet JavaScript dans sa représentation sous forme de chaîne. C’est une méthode concise qui n’utilise qu’un seul morceau de code, Object.entries(item).map(x=>x.join(":")).join("\n") pour le processus de conversion.

Convertir un objet JavaScript en chaîne JSON à l’aide de Object.enteries() et de la déstructuration d’objets

Une autre façon d’utiliser Object.enteries() pour la conversion est de l’utiliser avec le concept de déstructuration d’objets de javascript. A l’aide de cette technique, nous déstructurons le tableau de paires clé-valeur sorti par Object.enteries(), itérons dessus à l’aide d’une boucle for, et l’assignons aux variables temporaires param et value. On stocke le résultat de l’itération dans la variable str. Enfin, nous enregistrons la variable str à l’aide du console.log(). Le code est comme suit.

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

Production:

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

Convertir un objet JavaScript en une chaîne JSON à l’aide de Object.keys()

Nous pouvons utiliser la fonction javascript intégrée Object.keys() pour convertir manuellement l’objet JavaScript en une chaîne JSON. Le Object.keys() renvoie un tableau contenant toutes les clés d’un objet JavaScript. Nous pouvons ensuite les parcourir à l’aide d’une boucle for et former la version chaîne de l’objet JavaScript. Le résultat final peut être enregistré ou stocké dans une variable. Le code est comme suit.

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

Production:

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

Le concept est similaire à celui d’utiliser Object.enteries() pour obtenir les paramètres de l’objet javascript. Object.enteries() renvoie les paires clé-valeur sous forme de tableau, tandis que Object.keys renvoie le tableau de chaînes de clés d’objet qui sont ensuite traitées en parcourant les tableaux de sortie et en formant la représentation sous forme de chaîne de l’objet javascript.