JavaScript の eval を使用した JSON 文字列の解析_基礎知識

高度なブラウザでは JSON.parse() API を使用して JSON 文字列を JSON データに解析できることは誰もが知っていますが、少し適切ではないアプローチとして eval() 関数を使用することもできます。

var str = '{"name": "hanzichi", "age": 10}';
var obj = eval('(' + str + ')');
console.log(obj); // Object {name: "hanzichi", age: 10}

パラメータを eval() に渡すとき、str 変数が括弧で囲まれていることにお気づきでしょうか?なぜこれを行うのでしょうか?

まず、eval 関数の定義と使用法を見てみましょう。

eval()のパラメータは文字列です。文字列が式を表す場合、 eval() は式を評価します。引数が 1 つ以上の JavaScript 宣言を表す場合、 eval() はその宣言を実行します。算術式を評価するために eval() を呼び出さないでください。JavaScript は算術式を自動的に評価します。

簡単に言うと、eval 関数のパラメータは文字列であり、その文字列が "noString" の場合、結果は実行できる通常の JavaScript ステートメントになります。

なんと言いますか？たとえば、次のコード:

var str = "alert('hello world')";
eval(str);

実行後に「hello world」が表示されます。 str 変数を「noString」に変更します。大まかなアプローチは、外側の引用符を削除し、内部調整 (エスケープなど) を行うことです。

alert('hello world')

とても良いです！これは正常に動作する JavaScript ステートメントです。実行してください！

元の質問に戻りますが、なぜ JSON 文字列を括弧で囲む必要があるのでしょうか?追加しない場合は次のようになります:

var str = '{"name": "hanzichi", "age": 10}';
var obj = eval(str); // Uncaught SyntaxError: Unexpected token :

エラーが報告されました。エラーが報告されるのはなぜですか? str を「noString」に変換して実行してみてください:

{"name": "hanzichi", "age": 10}; 
// Uncaught SyntaxError: Unexpected token :

JSON オブジェクトやオブジェクトが実行可能な JavaScript ステートメントではないことは疑いの余地がありません。待って、次のコードを試してください:

var str = '{name: "hanzichi"}';
var obj = eval(str);
console.log(obj); // hanzichi

これは一体何ですか?しかし、名前に「」を追加するとエラーが返されますか？

var str = '{"name": "hanzichi"}';
var obj = eval(str); // Uncaught SyntaxError: Unexpected token :
console.log(obj);

わかりました。実際、str を「nostring」して、それが正しく実行できる JavaScript ステートメントかどうかを確認できます。前者の結果は次のようになります:

{name: "hanzichi"}

これは確かに合法的な JavaScript ステートメントです。 {} これは、if ステートメントや for ステートメントなどのシナリオだけでなく、いつでも使用できます。これは、ES6 より前の JavaScript にはブロックレベルのスコープしかなく、スコープと競合することがなかったからです。 {} を削除すると、name: "hanzichi" もラベル文になります。詳しくは、ラベル文を参照してください。 、タグは、使用されていない場合でも、JavaScript コード内のどこにでも配置できます。

オブジェクトに {name: "hanzichi", age: 10} などの 2 つのキーがあると、ラベル ステートメントは 2 つありますか? 「半日」と「10」をそれぞれステートメントとして扱いますが、ステートメントはシール番号でのみ接続できます。 (式の間にはカンマのみを使用できます)。したがって、次のように変更しても問題ありません:

var str = '{name: "hanzichi"; age: 10}';
var obj = eval(str); 
console.log(obj); // 10

さらに進めば進むほど、記事冒頭のコードのエラーの原因が判明しましたが、なぜ括弧を付けることで解決できるのでしょうか。簡単に言えば、() はステートメントをステートメント式と呼ばれる式に変換します。括弧内のコードは式評価に変換されて返されます。オブジェクト リテラルは式として存在する必要があります。

この記事では式については説明しません。覚えておくべきことの 1 つは、式には常に戻り値があるということです。ほとんどの式は () で囲まれ、括弧を空にすることはできません。カンマで区切られた複数の式 (いわゆるカンマ式) がある場合は、最後の式の値が返されます。