Konvertieren ein Objekt in einen String in JavaScript

1. Verwenden der integrierten JavaScript-Funktion JSON.stringify()
2. Verwendung von console.log() und %o
3. Konvertieren von JavaScript-Objekten in Strings mithilfe von Object.enteries()
4. Konvertieren eines JavaScript-Objekts in einen JSON-String mithilfe von Object.enteries() und Objektdestrukturierung
5. Konvertieren eines JavaScript-Objekts in einen JSON-String mit Object.keys()

JavaScript-Objekte bestehen aus Attributen in Form von Schlüssel-Wert-Paaren. Wenn wir sie neben einem String protokollieren, sehen wir [object Object]. Es blendet die darunter liegenden Objektattribute aus. Beim Codieren müssen wir die Javascript-Objekte in einen String-Datentyp konvertieren. Insbesondere wenn es um die Speicherung von Daten im localstorage oder einer Datenbank geht. Es gibt verschiedene Möglichkeiten, ein Javascript-Objekt in einen String umzuwandeln.

Verwenden der integrierten JavaScript-Funktion JSON.stringify()

JSON.stringify() ist eine leistungsstarke und häufig verwendete Funktion zum Konvertieren eines Javascript-Objekts in einen JSON-String. Wir können es auch verwenden, um die JSON-Darstellung für eine bessere Lesbarkeit zu formatieren. Die Funktion akzeptiert drei Parameter:

• javascriptObject: Der erste Parameter ist ein obligatorischer Parameter, bei dem wir das JavaScript-Quellobjekt übergeben, das wir in einen JSON-String konvertieren müssen.
• replacerFunction: Der zweite Parameter ist optional. Es akzeptiert eine Funktion, mit der wir das Quell-Javascript-Objekt ändern können. Wir können die Objektparameter extrahieren, die wir in der endgültigen stringifizierten JSON-Ausgabe sehen möchten. Wenn wir in diesem Parameter einen null-Wert übergeben, nimmt die Funktion alle Parameter des Quell-Javascript-Objekts in ihre stringifizierte JSON-Ausgabe auf.
• numberOfSpaces: Der letzte Parameter ist die Anzahl der Leerzeichen, die während der Stringifizierung vor jedem Parameter eingefügt werden müssen. Es ist ein numerischer Parameter. Wenn der Parameterwert größer als 1 ist, formatiert er das stringifizierte JSON mit einem oder mehreren Leerzeichen vor jedem Objektparameter. Es ist ausschließlich für Formatierungszwecke gedacht, um die Ausgabe in einer für Menschen lesbaren Form zu erstellen.

Informationen zur Verwendung finden Sie im folgenden Code.

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

Ausgabe:

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

Das erste Protokoll gibt eine maskierte Version des Javascript-Objekts aus. Das zweite Protokoll enthält die Zeichenkettendarstellung des JSON-Objekts, ist jedoch nicht formatiert. Das letzte Protokoll ist die formatierte Version des Javascript-Objekts, die gut lesbar ist.

Verwendung von console.log() und %o

console.log() ist eine eingebaute Javascript-Funktion zum Protokollieren von Werten in der Browser-Konsole. Es akzeptiert drei Parameter. Der erste Parameter ist das JavaScript-Objekt; der zweite Parameter ist die anzuzeigende Nachricht; Der letzte Parameter ist eine TeilZeichenkette der Nachricht, die in der Webkonsole protokolliert werden soll. Der folgende Code zeigt das Konvertieren von JavaScript-Objekten in einen String mit der Methode console.log.

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

Ausgabe:

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

Im obigen Code ist der erste Befehl console.log("Item: " + item); protokolliert das Objekt als [object Object]. Es blendet die Objektparameter aus. Wenn wir hingegen %o hinzufügen und das Objekt als Argument übergeben, können wir den inneren Inhalt des JavaScript-Objekts sehen. Wir können auch %O verwenden, um das JavaScript-Objekt zu loggen.

Beachten Sie, dass das %o in console.log uns erlaubt, das Objekt in der Konsole anzuzeigen. Aber wir können es nicht verwenden, um den Wert zu konvertieren und in einer Variablen zur weiteren Verwendung zu speichern.

Konvertieren von JavaScript-Objekten in Strings mithilfe von Object.enteries()

Object.enteries() ist eine eingebaute JavaScript-Funktion. Es teilt das Objekt in ein Array von [Schlüssel, Wert]-Paaren auf. Daher können wir über ein solches Array iterieren und das JavaScript-Objekt manuell in einen String konvertieren.

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

Ausgabe:

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

Im Code haben wir zuerst die Funktion Object.enteries() verwendet, um das Objekt in ein Array von kleinen Parameter-Arrays aufzuteilen. Als nächstes konvertieren wir das Subarray in ein key:value-Format, indem wir die in Javascript integrierte join(":")-Funktion anwenden. Es konvertiert das Array [key, value], das von den Object.enteries ausgegeben wird, in das Format key:value. Und schließlich protokollieren wir das JavaScript-Objekt in seiner String-Darstellung. Es ist eine prägnante Methode, die nur einen einzigen Code, Object.entries(item).map(x=>x.join(":")).join("\n") für den Konvertierungsprozess verwendet.

Konvertieren eines JavaScript-Objekts in einen JSON-String mithilfe von Object.enteries() und Objektdestrukturierung

Eine andere Möglichkeit, das Object.enteries() für die Konvertierung zu verwenden, besteht darin, es neben dem object destructuring-Konzept von Javascript zu verwenden. Mit dieser Technik destrukturieren wir das von Object.enteries() ausgegebene Array von Schlüssel-Wert-Paaren, durchlaufen es mit einer for-Schleife und weisen es den temporären Variablen param und value zu. Das Ergebnis der Iteration speichern wir in der Variablen str. Schließlich loggen wir die Variable str mit console.log(). Der Code lautet wie folgt.

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

Ausgabe:

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

Konvertieren eines JavaScript-Objekts in einen JSON-String mit Object.keys()

Wir können die in Javascript integrierte Funktion Object.keys() verwenden, um das JavaScript-Objekt manuell in einen JSON-String zu konvertieren. Object.keys() gibt ein Array zurück, das alle Schlüssel eines JavaScript-Objekts enthält. Wir können sie dann mit einer for-Schleife durchlaufen und die String-Version des JavaScript-Objekts bilden. Das Endergebnis kann protokolliert oder in einer Variablen gespeichert werden. Der Code lautet wie folgt.

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

Ausgabe:

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

Das Konzept ähnelt dem der Verwendung von Object.enteries(), um die Parameter des Javascript-Objekts zu erhalten. Object.enteries() gibt die Schlüssel-Wert-Paare als Array zurück, während Object.keys das String-Array von Objektschlüsseln zurückgibt, die durch Schleifen über die Ausgabe-Arrays weiterverarbeitet werden und die String-Repräsentation des Javascript-Objekts bilden.