Conversion d’un objet JavaScript en chaîne

Parfois, il devient nécessaire de convertir un objet en chaîne afin de le visualiser ou de le stocker. Aux fins de débogage, un simple console.log() suffira, comme à peu près n’importe quel navigateur moderne Outils de développement fournira une jolie version imprimée d’un objet. Pendant ce temps, s’appuyer sur une conversion implicite lors de l’écriture d’un objet à un autre emplacement n’entraînera que l’inutile “[object Object]” chaîne de caractères. De bien meilleurs résultats peuvent être obtenus en utilisant le JavaScript intégré JSON.stringify() méthode ou en écrivant votre propre fonction de conversion. Chacun d’entre eux produira des résultats différents, il est donc avantageux d’examiner attentivement chaque option avant de décider quelle approche convient le mieux à vos besoins. Dans cet esprit, nous allons nous essayer à quelques stratégies ici, y compris l’utilisation du piquer() méthode, méthodes de conversion personnalisées, ainsi que les méthodes susmentionnées JSON.stringify() dans le didacticiel de développement Web d’aujourd’hui.

Vous cherchez à compléter votre JavaScript avec du HTML solide ? Consultez notre liste des Meilleurs cours en ligne pour apprendre le HTML.

La méthode toString() en JavaScript

Aux fins de démonstration, voici une classe qui contient des attributs ainsi qu’une méthode. Définir les éléments d’un paragraphe Texteintérieur à l’instance de personne invoque son hérité toString() méthode, qui imprime l’ubiquitaire “[object Object]”. Voici à quoi cela ressemble dans le code JavaScript :

'use strict';



const appendParagraph = (content) => {

  const para = document.createElement("p");

  para.innerText = content;

  document.body.appendChild(para);

};



class Person {

  constructor(name, location) {

    this.name = name;

    this.location = location;

  }

  sayHello = () => appendParagraph("Hi! I'm " + this.name);

  toString = () => "Hi! I'm " + this.name 

                 + " and I live at " + this.location;

}

const person = new Person(

  'Rob', 

  {

    city: 'Ottawa',

    country: 'Canada',

    phoneNumbers: ['555-1234', '555-2345'],

  }

);

appendParagraph(person); // [object Object]

person.sayHello();       // Hi! I'm Rob

Comme indiqué dans l’introduction, ce n’est pas du tout utile. Mais c’est exactement le point, car chaque classe est responsable de l’implémentation de sa propre méthode d’instance significative. Alors ajoutons toString() à notre classe afin que nous obtenions une description plus informative :

class Person {

  constructor(name, location) {

    this.name = name;

    this.location = location;

  }

  sayHello = () => appendParagraph("Hi! I'm " + this.name);

  toString = () => "Hi! I'm " + this.name 

                 + " and I live at " + this.location;

}

const person = new Person(

  'Rob', 

  {

    city: 'Ottawa',

    country: 'Canada',

    phoneNumbers: ['555-1234', '555-2345'],

  }

); 

//Prints "Hi! I'm Rob and I live at [object Object]"

appendParagraph(person);

C’est une amélioration, mais vous pouvez voir comment nous rencontrons le même problème avec les objets enfants.

Lis: Outils de gestion de projet pour les développeurs Web

Utilisation d’une méthode de conversion personnalisée en JavaScript

Pour une flexibilité optimale, vous pouvez envisager d’écrire une méthode de conversion générique que vous pouvez ensuite invoquer à partir d’une instance toString(). Celui-ci utilise la récursivité pour gérer les objets imbriqués. Il y a même une certaine logique pour faire la distinction entre les objets et les tableaux, de sorte qu’ils obtiennent chacun leur propre formatage (c’est-à-dire les accolades ({}) pour les objets par rapport aux crochets ([]) pour les tableaux :

const convert = obj => (

  Object.entries(obj)

    .map(([key, value]) => (

      value === Object(value)

        ? (Array.isArray(value) 

          ? `${key}[${convert(value)}]` 

          : `${key}{${convert(value)}};`)

        : `${key}:${value};`

    ))

    .join(' ')

);



class Person2 {

  constructor(name, age, location) {

    this.name = name;

    this.age = age;

    this.location = location;

  }

  sayHello = () => appendParagraph("Hi! I'm " + this.name);

  toString = () => convert(this);

}

const person2 = new Person2(

  'Charlotte',

  29,

  {

    city: 'London',

    country: 'UK',

    phoneNumbers: ['666-2112', '666-5150'],

  }

);

// name:Charlotte; age:29; location{city:London; country:UK; 

// phoneNumbers[0:666-2112; 1:666-5150;]}; sayHello{}; toString{};

appendParagraph(person2);

Utilisation de JSON.stringify() en JavaScript

C’est la seule fonction JavaScript native qui transforme n’importe quel objet en chaîne ; tout ce que vous avez à faire est d’appeler JSON.stringify(OBJECT) et il transformera un objet ou un tableau en un JSON (notation d’objet JavaScript) chaîne encodée. Il est idéal pour sérialiser des objets en chaînes pour les stocker dans une base de données car la plupart prennent en charge le type de données JSON. Pour reconvertir la chaîne en objet, il y a le JSON.parse(CHAINE) méthode.

Voici le texte JSONifié pour personne2:

//{"name":"Charlotte","age":29,"location":{"city":"London",

//"country":"UK","phoneNumbers":["666-2112","666-5150"]}}

appendParagraph(JSON.stringify(person2));

Comme vous pouvez le constater, la sortie ne semble pas si différente de celle de notre fonction personnalisée, sauf que les noms d’attributs et les chaînes sont toujours entre guillemets et que les champs sont délimités par des virgules.

Modification de la sortie de JSON.stringify

JSON.stringify() est en fait beaucoup plus polyvalent que ce que les gens lui attribuent, grâce à ses 2e et 3e paramètres optionnels :

JSON.stringify(value, replacer, spaces)

Ce sont un remplaçant fonction et espaces. Le remplaçant est une fonction ou un tableau qui peut affecter le processus de stringification en modifiant le formatage ou même en filtrant les attributs. Le paramètre space contrôle l’espacement dans la chaîne générée en activant le mode d’impression jolie et en définissant le nombre d’espaces pour les indentations.

Lis: Outils et bibliothèques HTML, CSS et JavaScript

La remplaçant Paramètre en JavaScript

Comme mentionné ci-dessus, le paramètre de remplacement peut être soit une fonction, soit un tableau. En tant que fonction, il prend deux paramètres : la clé et la valeur étant stringifiées. L’objet dans lequel la clé a été trouvée est fourni comme objet de remplacement cette paramètre (tant que les développeurs Web n’utilisent pas de fonction fléchée). Initialement, la fonction de remplacement est appelée avec une chaîne vide comme clé représentant l’objet en cours de chaîne. Il est ensuite appelé pour chaque attribut d’objet ou élément de tableau en cours de chaîne.

Nous pouvons utiliser une fonction de remplacement pour supprimer des champs en fonction de leur valeur ou de leur type. Dans l’exemple suivant, tous les nombres sont supprimés de la sortie, ce qui entraîne âge de personne2 à omettre :

const replacer = (key, value) => typeof value === 'number' 

                                 ? undefined 

                                 : value;

                                 

//{"name":"Charlotte","location":{"city":"London",

// "country":"UK","phoneNumbers":["666-2112","666-5150"]}}

appendParagraph(JSON.stringify(person2, replacer));

Plutôt que d’exclure certains champs, nous pouvons fournir un tableau dont les valeurs indiquent les noms des propriétés de l’objet qui doivent être incluses dans la chaîne JSON résultante.

//{"name":"Charlotte","age":29}

appendParagraph(JSON.stringify(person2, ['name', 'age']));

Jolie impression avec le les espaces Paramètre et JavaScript

L’argument espaces peut être utilisé pour contrôler l’espacement dans la chaîne finale. Comme la fonction de remplacement, elle accepte également deux types différents :

Dans le cas d’un nombre, les niveaux successifs de la chaîne seront chacun indentés de ce nombre d’espaces, jusqu’à un maximum de dix.
Dans le cas d’une chaîne, les niveaux successifs seront indentés par cette chaîne, ou les dix premiers caractères.

Cette JSON.stringify() l’invocation produit une indentation de deux espaces :

appendElement(JSON.stringify(person2, null, '  '), 'pre');

/*

{

  "name": "Charlotte",

  "age": 29,

  "location": {

    "city": "London",

    "country": "UK",

    "phoneNumbers": [

      "666-2112",

      "666-5150"

    ]

  }

}

*/

L’utilisation d’un caractère de tabulation imite l’aspect “standard” de la jolie impression :

appendElement(JSON.stringify(person2, null, '\t'), 'pre');

/*

{

	"name": "Charlotte",

	"age": 29,

	"location": {

		"city": "London",

		"country": "UK",

		"phoneNumbers": [

			"666-2112",

			"666-5150"

		]

	}

}

*/

Réflexions finales sur la conversion d’un objet JavaScript en chaîne

JavaScript offre plusieurs façons de convertir un objet en chaîne pour l’affichage ou la persistance. Celles-ci vont de l’intégration JSON.stringify() méthode, remplacement toString(), pour écrire votre propre fonction de conversion. Chacune de ces approches se retrouve dans Démo Codepen. JSON.stringify() est un excellent choix pour conserver des objets et des tableaux dans une base de données, tandis que les deux autres options sont plus appropriées pour présenter un objet sous une forme lisible par l’homme.

Lire la suite Tutoriels de développement Web JavaScript.

— to www.htmlgoodies.com