A volte diventa necessario convertire un oggetto in una stringa per poterlo visualizzare o archiviare. Ai fini del debug, un semplice console.log() sarà sufficiente, come quasi tutti i browser moderni Strumenti di sviluppo fornirà una bella versione stampata di un oggetto. Nel frattempo, fare affidamento sulla conversione implicita quando si scrive un oggetto in qualsiasi altra posizione risulterà solo nell’assolutamente inutile “[object Object]” corda. È possibile ottenere risultati di gran lunga migliori utilizzando JavaScript integrato JSON.stringify() metodo o scrivendo la propria funzione di conversione. Ognuno di questi produrrà risultati diversi, quindi vale la pena considerare attentamente ogni opzione prima di decidere quale approccio si adatta meglio alle tue esigenze. Con questo in mente, proveremo qui alcune strategie, incluso l’uso di pungere() metodo, metodi di conversione personalizzati, nonché quanto sopra JSON.stringify() nel tutorial di sviluppo web di oggi.
Stai cercando di integrare il tuo JavaScript con un solido HTML? Dai un’occhiata al nostro elenco di I migliori corsi online per imparare l’HTML.
Il metodo toString() in JavaScript
A scopo dimostrativo, ecco una classe che contiene alcuni attributi oltre a un metodo. Impostazione degli elementi di un paragrafo testo interno all’istanza della persona invoca la sua ereditata accordare() metodo, che stampa l’onnipresente “[object Object]”. Ecco come appare nel codice JavaScript:
'use strict';
const appendParagraph = (content) => {
const para = document.createElement("p");
para.innerText = content;
document.body.appendChild(
Come affermato nell’introduzione, non è affatto utile. Ma questo è esattamente il punto, poiché ogni classe è responsabile dell’implementazione del proprio metodo di istanza significativo. Quindi aggiungiamo accordare() alla nostra classe in modo da ottenere una descrizione più informativa:
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);
È un miglioramento, ma puoi vedere come incontriamo lo stesso problema con gli oggetti figlio.
Leggi: Strumenti di gestione dei progetti per sviluppatori Web
Utilizzo di un metodo di conversione personalizzato in JavaScript
Per una flessibilità ottimale, potresti prendere in considerazione la possibilità di scrivere un metodo di conversione generico che puoi quindi richiamare da un’istanza accordare(). Questo usa la ricorsione per gestire gli oggetti nidificati. C’è anche una certa logica per distinguere tra oggetti e array, in modo che ognuno di essi ottenga la propria formattazione (ad esempio parentesi graffe ({}) per oggetti rispetto a parentesi quadre ([]) per gli array:
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);
Utilizzo di JSON.stringify() in JavaScript
Questa è l’unica funzione JavaScript nativa che trasforma qualsiasi oggetto in una stringa; tutto quello che devi fare è chiamare JSON.stringify(OBJECT) e trasformerà un oggetto o una matrice in a JSON (notazione oggetto JavaScript) stringa codificata. È ideale per serializzare oggetti in stringhe da archiviare in un database poiché la maggior parte supporta il tipo di dati JSON. Per riconvertire la stringa in un oggetto, c’è il JSON.parse(STRING) metodo.
Ecco il testo JSONified per persona2:
//{"name":"Charlotte","age":
Come puoi vedere, l’output non sembra molto diverso da quello della nostra funzione personalizzata, tranne per il fatto che i nomi degli attributi e le stringhe sono sempre racchiusi tra virgolette e i campi sono delimitati da virgole.
Modifica dell’output di JSON.stringify
JSON.stringify() è in realtà molto più versatile di quanto le persone gli attribuiscano, grazie ai suoi 2° e 3° parametro opzionale:
JSON.stringify(value, replacer, spaces)
Questi sono un sostituto funzione e spazi. Il sostituto è una funzione o una matrice che può influenzare il processo di stringificazione alterando la formattazione o persino filtrando gli attributi. Il parametro space controlla la spaziatura nella stringa generata attivando la modalità di stampa graziosa e impostando il numero di spazi per i rientri.
Leggi: Strumenti e librerie HTML, CSS e JavaScript
Il sostituto Parametro in JavaScript
Come accennato in precedenza, il parametro di sostituzione può essere una funzione o un array. Come funzione, prende due parametri: la chiave e il valore da stringere. L’oggetto in cui è stata trovata la chiave viene fornito come sostituto questo parametro (purché gli sviluppatori Web non utilizzino una funzione freccia). Inizialmente, la funzione di sostituzione viene chiamata con una stringa vuota come chiave che rappresenta l’oggetto da stringere. Viene quindi chiamato per ogni attributo oggetto o elemento dell’array che viene stringato.
Possiamo usare una funzione di sostituzione per rimuovere i campi in base al loro valore o tipo. Nell’esempio seguente, tutti i numeri vengono rimossi dall’output, risultando l’età della persona2 da omettere:
const replacer = (key, value) => typeof value === 'number'
? undefined
: value;
//{"name":"Charlotte","
Anziché escludere determinati campi, possiamo fornire un array i cui valori indicano i nomi delle proprietà nell’oggetto che dovrebbero essere inclusi nella stringa JSON risultante.
//{"name":"Charlotte","age":
Bella stampa con il spazi Parametro e JavaScript
L’argomento spazi può essere utilizzato per controllare la spaziatura nella stringa finale. Come la funzione di sostituzione, accetta anche due tipi diversi:
- Nel caso di un numero, i livelli successivi della stringa di stringa saranno ciascuno rientrato di tanti spazi, fino ad un massimo di 10.
- Nel caso di una stringa, i livelli successivi saranno rientrati da questa stringa, o dai primi dieci caratteri.
Questo JSON.stringify() l’invocazione produce un rientro di due spazi:
appendElement(JSON.stringify(person2, null, ' '), 'pre'); /* { "name": "Charlotte", "age": 29, "location": { "city": "London", "country": "UK", "phoneNumbers": [ "666-2112", "666-5150" ] } } */
L’uso di un carattere di tabulazione imita l’aspetto “standard” della stampa graziosa:
appendElement(JSON.stringify(person2, null, '\t'), 'pre'); /* { "name": "Charlotte", "age": 29, "location": { "city": "London", "country": "UK", "phoneNumbers": [ "666-2112", "666-5150" ] } } */
Considerazioni finali sulla conversione di un oggetto JavaScript in una stringa
JavaScript offre alcuni modi per convertire un oggetto in una stringa per la visualizzazione o la persistenza. Questi vanno dal built-in JSON.stringify() metodo, prevalere accordare(), per scrivere la propria funzione di conversione. Ciascuno di questi approcci può essere visto nel Demo Codepen. JSON.stringify() è una scelta eccellente per la persistenza di oggetti e array in un database, mentre le altre due opzioni sono più appropriate per presentare un oggetto in una forma leggibile dall’uomo.
Leggi di più Tutorial di sviluppo web JavaScript.