お世話になります。
Javascript初心者になります。
プロゲートでjavascriptのとっかかりを学び終わったので、応用に入ろうと思い、電卓を作ろうと思いました。
あるサイトに載っていた電卓を、自分好みに色々変更していこうと思っていたのですが、
色々つまづいております。
参考にしたサイトの計算器の「=」に
function calc() {
result.value = new Function("return " + result.value)();
}
というコードがあったのですが、
この中の"return "はどういう意味なのでしょうか?
これはreturnが文字列になっていると考えて問題ないのですか?
また、returnの後に半角が入っているのですが、この半角はなんの意味があるのですか?
(半角を取ると動作しません)
調べても、"return "で引っかからなくて。
https://techacademy.jp/magazine/21139
どなたか、お時間ございます時に、ご教授いただけると幸いです。
No.3ベストアンサー
- 回答日時:
計算式を評価して解を求めるためには、
本格的にやるならば字句解析や構文解析などの
やや難しい処理が必要となります。
ご提示のプログラムの場合は、
計算式を JavaScript の命令文として実行することで、
面倒な解析を JavaScript コンパイラに任せてしまい、
評価結果だけを受け取る設計の様です。
JavaScript コンパイラとして Function を使うならば、
通常の関数の記載内容を文字列として渡すものなので、
以下のような流れで "return " が出現したと推測します。
f = function(){ return 1+2*3; }; // 通常の関数
result = f();
↓
f = new Function("return 1+2*3;"); // 関数の中身を文字列に
result = f(); // コンパイルされた後の評価結果を受け取る
↓
formula = "1+2*3"; // 計算式を分離
f = new Function("return " + formula + ";");
result = f();
↓
formula = "1+2*3";
result = new Function("return " + formula + ";")(); // 変数fを省略
↓
formula = "1+2*3";
result = new Function("return " + formula)(); // セミコロンは省略可能
ご回答いただき、ありがとうございます。
また、お礼が大変遅くなってしまい、申し訳ございません。
書いてくださったことを、読み解きながらで、時間がかかってしまいました。
すごくわかりやすかったです。
元となる計算から、どう言う風に生まれていった計算式なのか、流れで見ることができました。
>計算式を評価して解を求めるためには、
本格的にやるならば字句解析や構文解析などの
やや難しい処理が必要となります。
色々あったサンプルの中で、一番短くていいかなと思ったのですが、やはり、もう少し処理を多くしているサンプルを選ぶべきでしたでしょうか。
勉強頑張っていきます。
ありがとうございました。
No.2
- 回答日時:
こんにちは
Functionで調べてください。
文字列の内容に相当する、新しいfunctionが生成されます。
https://developer.mozilla.org/ja/docs/Web/JavaSc …
押されたキーの内容を判別したりせずに、単純にそのまま文字列として記憶していって、計算する時に、そのまま文字列の計算結果を返すように「return 」の文字列を付け加えています。
>(半角を取ると動作しません)
後ろの文字列と「return」がくっついてしまい、returnとは認識されず、別の変数名(return5 とか)などとして認識されてしまうからです。
ご回答いただき、ありがとうございます。
また、お礼が大変遅くなってしまい、申し訳ございません。
書いてくださったことを、読み解きながらで、時間がかかってしまいました。
functionに関係することだったのですね。
道理で、returnで色々検索かけても出てこなかったわけですね。
>そのまま文字列の計算結果を返すように「return 」の文字列を付け加えています。
文字列の結果を文字列で…。それに「return」を使うと言うのに、なかなか頭が働かないのは、私の知識不足故ですね。
「returnと文字列がくっつくと動作しない」と言うのも初めて知りました。
Javascriptは難しいですね(独学だから?)。
頑張っていきたいと思います。
ありがとうございました。
No.1
- 回答日時:
おそらくresult.valueに入っている式を計算結果として入れ直すということでしょう
function calc() {
result.value = new Function("return " + result.value)();
}
const result={value:"1+1"};
calc();
console.log(result);
"1+1"という文字をreturn 1+1とすることで2に変換して
valueに代入しています
ご回答いただき、ありがとうございます。
また、お礼が大変遅くなってしまい、申し訳ございません。
書いてくださったことを、読み解きながらで、時間がかかってしまいました。
分かるようで、頭がついていかないのは、私の知識不足故です。
function calc() {
result.value = new Function("return " + result.value)();
}
の"return "は、原文のfunction edit(elem) の値をreturnしているという解釈で間違ってないのでしょうか?
一つ何かするたび、一つぶつかっている状況です。
難しいですね、javascript。
頑張ります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript JavaScriptの即時関数の書き方 1 2022/11/29 09:52
- JavaScript JAVASCRIPT 2 2022/04/15 15:10
- C言語・C++・C# c言語の問題です 3 2023/01/10 16:15
- オープンソース Coinmarketcap api 1 2022/05/30 15:47
- MySQL php テーブルを作れない 2 2022/11/17 18:22
- PHP php テーブルが作成できない 1 2022/11/17 23:41
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
return trueとreturn falseの用...
-
slickのレスポンシブ > center...
-
JSのみで入力→確認→メールで送...
-
ラジオボタンのNullチェック
-
JavaScriptde途中で、「exit」...
-
度胸試しのJavaScript
-
JavaScriptで<select>の<option...
-
複数のselect値で1つも選択され...
-
全てのselect要素をデフォルト...
-
idの振り直しについて
-
html selectの内容を初期値に戻す
-
selectボックスで選択数を制限...
-
jQuery セレクトボックスで選択...
-
フォームのチェックボックスの...
-
ラジオボタンで選択変更
-
プルダウン 項目が多いので先頭...
-
チェックボックスのON/OFFでVal...
-
onchangeイベントを強制的に発...
-
javaScriptの変数をJavaの変数...
-
onClick="this.form.submit
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
return trueとreturn falseの用...
-
正規表現で複数マッチ条件で悩...
-
ラジオボタンのNullチェック
-
slickのレスポンシブ > center...
-
COBOLの数字チェック
-
JavaScriptde途中で、「exit」...
-
チェックボックスの有無判定
-
未入力のラジオボタンに、alert...
-
コピペを禁止するtextarea
-
テキストボックスに数字しか入...
-
フォームの入力チェックをする...
-
ドラッグ&ドロップ禁止について
-
JavaScript ログアウト処理
-
ドロップダウンリストボックス...
-
【javascript】 年齢計算
-
Visual Studioのデザインでの非...
-
「本当に削除しますか」が正常...
-
リロードしないようにするには
-
JSのみで入力→確認→メールで送...
-
プルダウンメニューを選択して...
おすすめ情報