One place for hosting & domains

      および

      JSON.parse() および JSON.stringify() の使用方法


      はじめに

      すべての最新ブラウザで使用可能なJSON オブジェクトには、JSON 形式のコンテンツを処理するための便利なメソッドであるparsestringifyの 2 種類があります。JSON.parse() は、JSON 文字列を取得し、JavaScriptオブジェクトに変換します。JSON.stringify() は、JavaScriptオブジェクトを取得し、JSON 文字列に変換します。

      次に例を示します。

      const myObj = {
        name: 'Skip',
        age: 2,
        favoriteFood: 'Steak'
      };
      
      const myObjStr = JSON.stringify(myObj);
      
      console.log(myObjStr);
      // "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"
      
      console.log(JSON.parse(myObjStr));
      // Object {name:"Sammy",age:6,favoriteFood:"Tofu"}
      

      また、メソッドは通常オブジェクトで使用されますが、配列でも使用できます。

      const myArr = ['bacon', 'lettuce', 'tomatoes'];
      
      const myArrStr = JSON.stringify(myArr);
      
      console.log(myArrStr);
      // "["shark","fish","dolphin"]"
      
      console.log(JSON.parse(myArrStr));
      // ["shark","fish","dolphin"]
      

      JSON.parse()

      JSON.parse() は、値が返される前にオブジェクト値を変換できる2つ目の引数として、関数を指定することができます。この時、parse メソッドの返されたオブジェクトでは、オブジェクトの値が大文字に変換されます。

      const user = {
        name: 'Sammy',
        email: 'Sammy@domain.com',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user);
      
      JSON.parse(userStr, (key, value) => {
        if (typeof value === 'string') {
          return value.toUpperCase();
        }
        return value;
      });
      

      注: JSON では末尾のカンマは無効なため、渡された文字列の末尾にカンマがある場合、JSON.parse() は、エラーを表示します。

      JSON.stringify()

      JSON.stringify() は、2つの追加引数を指定することができます。1つ目はreplacer関数で、2 つ目は文字列または数値を、返された文字列のスペース(インデント)として使用します。

      replacer 関数を使用すると、 undefined として返された値が結果の文字列から除外されるため、値をフィルターで除外できます。

      const user = {
        id: 229,
        name: 'Sammy',
        email: 'Sammy@domain.com'
      };
      
      function replacer(key, value) {
        console.log(typeof value);
        if (key === 'email') {
          return undefined;
        }
        return value;
      }
      
      const userStr = JSON.stringify(user, replacer);
      // "{"id":229,"name":"Sammy"}"
      

      そして、スペース引数が渡された例を示します。

      const user = {
        name: 'Sammy',
        email: 'Sammy@domain.com',
        plan: 'Pro'
      };
      
      const userStr = JSON.stringify(user, null, '...');
      // "{
      // ..."name": "Sammy",
      // ..."email": "Sammy@domain.com",
      // ..."plan": "Pro"
      // }"
      

      まとめ

      このチュートリアルでは、JSON.parse()JSON.stringify() メソッドの使用方法を見てきました。JavaScript でJSON を使用する方法について詳しく知りたい場合は、JavaScript でJSON を使用する方法のチュートリアルをご覧ください。

      JavaScript でのコーディングの詳細については、JavaScript でのコーディング方法シリーズを参照するか、JavaScriptのトピックページで演習とプログラミングプロジェクトをご覧ください。



      Source link