JavaScript で JSON をフォーマットする

Subodh Poudel 2023年10月12日
  1. JSON.stringify() メソッドを使用して JavaScript で JSON オブジェクトをフォーマットする
  2. JSON.stringify() および JSON.parse() メソッドを使用して JavaScript で JSON 文字列をフォーマットする
JavaScript で JSON をフォーマットする

この記事では、JavaScript で JSON 値をフォーマットする方法をいくつか紹介します。

JSON.stringify() メソッドを使用して JavaScript で JSON オブジェクトをフォーマットする

JSON.stringify() メソッドを使用して、JavaScript で JSON をフォーマットできます。 このメソッドは、JavaScript 値を JSON 文字列に変換するために使用されます。

JavaScript の値は、オブジェクト、配列、文字列など、何でもかまいません。このセクションでは、メソッドを使用して JSON オブジェクトをフォーマットします。

まず、メソッドを構文的に理解しましょう。 JSON.stringify() メソッドの構文を以下に示します。

JSON.stringify(value, replacer, space)

ここで、value は、文字列に変換される、オブジェクト、配列などの任意の JavaScript 値です。 replacer パラメータは、value が文字列化される方法を変更します。

space パラメータは、文字列化された出力の空白を設定します。

数値または文字列の 2 種類があります。 パラメータ replacervalue はオプションです。

JSON.stringify() メソッドを使用して生の JSON オブジェクトをフォーマットし、space パラメーターを設定できます。

replacer オプションでは、null を設定できます。 これにより、オブジェクトのキーが文字列化されます。

たとえば、変数 person を作成し、生のオブジェクトを割り当てます。

var person = {'name': 'Micheal', 'city': 'Stockholm'}

次に、person オブジェクトが値である JSON.stringify() メソッドを使用します。 null を 2 番目のパラメーターとして、数値 4 を 3 番目のパラメーターとして設定します。

再びメソッドを繰り返しますが、今回は 4"\t" に変更します。 最後に、ソース オブジェクトと 2つの文字列化されたオブジェクトを出力します。

コード例:

var person = {'name': 'Micheal', 'city': 'Stockholm'}

console.log(person)
console.log(JSON.stringify(person, null, 4))
console.log(JSON.stringify(person, null, "\t"))

出力:

{ name: 'Micheal', city: 'Stockholm' }
{
    "name": "Micheal",
    "city": "Stockholm"
}
{
        "name": "Micheal",
        "city": "Stockholm"
}

上記の例では、最初に生の JSON オブジェクトを出力しました。 フォーマットされていません。

次に、数値 4スペース として使用して、オブジェクトをフォーマットしました。 その結果、オブジェクト内の各キーと値のペアが新しい行にフォーマットされます。

数値 4 は、各行の開始前に 4つの空白があることを示します。 同様に、3 番目の呼び出しでも、文字列 "\t"space として使用しました。

また、オブジェクトをフォーマットしましたが、余分なスペースがいくつかありました。

このようにして、JSON.stringify() メソッドを使用して、JavaScript で JSON オブジェクトをフォーマットできます。

JSON.stringify() および JSON.parse() メソッドを使用して JavaScript で JSON 文字列をフォーマットする

JSON.stringify()JSON.parse() メソッドの組み合わせを使用して、JavaScript で JSON 文字列をフォーマットできます。 このアプローチは、最初の方法で行ったように、JSON オブジェクトをフォーマットする方法に似ています。

唯一の違いは、JSON.stringify() メソッドで value として使用する前に JSON.parse() メソッドで文字列を解析することです。

JSON.parse() メソッドは文字列を JSON オブジェクトに変換します。 次に、オブジェクトは JSON.stringify() メソッドのパラメーターとして使用されます。

たとえば、同じ person オブジェクトを使用して JSON 文字列をフォーマットできます。 ただし、今回は person 変数を引用符で囲み、JSON 文字列にします。

次の例を見てください。

var person = '{"name":"Micheal", "city":"Stockholm"}'

console.log(person)
console.log(JSON.stringify(JSON.parse(person), null, 4))
console.log(JSON.stringify(JSON.parse(person), null, '\t'))

出力:

{"name":"Micheal", "city":"Stockholm"}
{
    "name": "Micheal",
    "city": "Stockholm"
}
{
        "name": "Micheal",
        "city": "Stockholm"
}

ここでは、JSON.parse() メソッドを使用して JSON 文字列をオブジェクトに解析しました。 次に、JSON.stringify() メソッドを使用してオブジェクトをフォーマットしました。

このように、JSON.parse() メソッドと JSON.stringify() メソッドの組み合わせを使用して、JavaScript で JSON 文字列をフォーマットできます。

著者: Subodh Poudel
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

関連記事 - JavaScript JSON