JavaScript でオブジェクトを文字列に変換する

1. JavaScript 組み込み関数 JSON.stringify() の使用
2. console.log() と%o を使用する
3. Object.enteries() を使用して JavaScript オブジェクトを文字列に変換する
4. Object.enteries() とオブジェクトデストラクションを使った JavaScript オブジェクトの JSON 文字列への変換
5. Object.keys() を使用して JavaScript オブジェクトを JSON 文字列に変換する

JavaScript オブジェクトは、キーと値のペアの形式の属性で構成されます。文字列と一緒にログに記録すると、[object Object] となります。下にあるオブジェクト属性を非表示にします。コーディング中に、javascript オブジェクトを文字列データタイプに変換する必要があります。特に、localstorage またはデータベースにデータを保存する場合。javascript オブジェクトを文字列に変換する方法はいくつかあります。

JavaScript 組み込み関数 JSON.stringify() の使用

JSON.stringify() は、javascript オブジェクトを JSON 文字列に変換するための強力で一般的に使用される関数です。また、読みやすくするために JSON 表現のスタイルを設定するためにも使用できます。この関数は、次の 3つのパラメーターを受け入れます。

• javascriptObject：最初のパラメーターは、JSON 文字列に変換する必要があるソース JavaScript オブジェクトを渡す必須パラメーターです。
• replacerFunction：2 番目のパラメーターはオプションです。これは、ソース javascript オブジェクトを変更できる関数を受け入れます。最終的な文字列化された JSON 出力に表示したいオブジェクトパラメータを抽出できます。このパラメーターに null 値を渡すと、関数はソース javascript オブジェクトのすべてのパラメーターを文字列化された JSON 出力に含めます。
• numberOfSpaces：最後のパラメーターは、文字列化の処理中に各パラメーターの前に導入されるスペースの数です。数値パラメータです。パラメータ値が 1 より大きい場合、各オブジェクトパラメータの前に 1つ以上のスペースを使用して文字列化された JSON をフォーマットします。これは、人間が読める形式で出力を作成するためのフォーマットを目的としています。

使用法については、次のコードを参照してください。

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

出力：

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

最初のログは、javascript オブジェクトのマスクされたバージョンを出力します。2 番目のログには JSON オブジェクトの文字列表現がありますが、フォーマットされていません。最後のログは、非常に読みやすい javascript オブジェクトのフォーマットされたバージョンです。

console.log() と%o を使用する

console.log() は、ブラウザコンソールに値を記録するための組み込みの javascript 関数です。3つのパラメーターを受け入れます。最初のパラメーターは JavaScript オブジェクトです。2 番目のパラメーターは、表示されるメッセージです。最後のパラメーターは、Web コンソールに記録されるメッセージのサブストリングです。次のコードは、console.log メソッドを使用して JavaScript オブジェクトを文字列に変換する方法を示しています。

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

出力：

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

上記のコードでは、最初のコマンド console.log("Item: " + item); オブジェクトを [object Object] としてログに記録します。オブジェクトパラメータを非表示にします。一方、%o を追加してオブジェクトを引数として渡すと、JavaScript オブジェクトの内部コンテンツを確認できます。JavaScript オブジェクトのログ記録に%o を使用することもできます。

console.log の%o を使用すると、コンソールでオブジェクトを表示できることに注意してください。ただし、これを使用して値を変換し、さらに使用するために変数に格納することはできません。

Object.enteries() を使用して JavaScript オブジェクトを文字列に変換する

Object.enteries() は組み込みの JavaScript 関数です。オブジェクトを [key, value] ペアの配列に分割します。したがって、このような配列を繰り返し処理して、JavaScript オブジェクトを手動で文字列に変換できます。

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

出力：

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

コードでは、最初に Object.enteries() 関数を使用して、オブジェクトを小さなパラメーター配列の配列に分割しました。次に、javascript に組み込まれた join(":") 関数を適用して、サブ配列を key:value 形式に変換します。Object.enteries によって出力された key:value 配列を key:value 形式に変換します。そして最後に、JavaScript オブジェクトを文字列表現でログに記録します。これは、変換プロセスに 1つのコード Object.entries(item).map(x=>x.join(":")).join("\n") を使用する簡潔なメソッドです。

Object.enteries() とオブジェクトデストラクションを使った JavaScript オブジェクトの JSON 文字列への変換

変換に Object.enteries() を使用する別の方法は、javascript のオブジェクト破壊の概念と一緒に使用することです。この手法を使用して、Object.enteries() によって出力されたキーと値のペアの配列を分解し、``for ループを使用して反復し、一時変数 param と value に割り当てます。反復の結果を str 変数に保存します。最後に、console.log() を使用して変数 str をログに記録します。コードは次のとおりです。

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

出力：

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

Object.keys() を使用して JavaScript オブジェクトを JSON 文字列に変換する

JavaScript 組み込み関数 Object.keys() を使用して、JavaScript オブジェクトを JSON 文字列に手動で変換できます。Object.keys() は、JavaScript オブジェクトのすべてのキーを含む配列を返します。次に、for ループを使用してそれらを反復処理し、JavaScript オブジェクトの文字列バージョンを形成できます。最終結果は、ログに記録するか、変数に保存できます。コードは次のとおりです。

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

出力：

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

概念は、Object.enteries() を使用して javascript オブジェクトのパラメーターを取得するのと似ています。Object.enteries() はキーと値のペアを配列として返しますが、Object.keys はオブジェクトキーの文字列配列を返します。オブジェクトキーは、出力配列をループして JavaScript オブジェクトの文字列表現を形成することでさらに処理されます。