82975


`tests1`と`tests2`だけを使って`CC`を出力させるにはどうすればいいですか？

[code]

    var tests1 = "AA"
    var tests2 = "BB"
    var AABB = "CC"
    
    console.log(tests1 + tests2); //AABB
    
[/code]


CC BY-SA 4.0
2021-10-09T12:11:09.303
82974
2021-10-09T13:43:29.447
48564
question
javascript
変数と変数を合わせて別の変数を読み込みたい


ブラウザ環境であれば、次のようにすることで可能です。

[code]

    var tests1 = "AA"
    var tests2 = "BB"
    var AABB = "CC"
    
    console.log(window[tests1 + tests2])
[/code]

これは、ブラウザで普通のJavaScriptとしてそのまま読み込んだ場合のみうまくいきます。type="module"とモジュールとして読み込んだ場合や、Node.jsを使った場合、また、Webpack等で他のJavaScriptと結合した場合はうまくいきません。なお、`var`の代わりに`let`や`const`等を使った場合もうまくいきません。

* * *

以下、解説です。

ブラウザのJavaScirptのトップレベル(グローバルコンテキスト)で`var`で宣言された変数はグローバルオブジェクトのプロパティになります。グローバルオブジェクトとは、ブラウザでは`window`(最新のJavaScript環境では`globalThis`も使えます)です。つまり、トップレベルに書かれた`var
AABB = "CC"`は`window["AABB"] =
"CC"`とほぼ等しいと言うことです。ここまでわかればわかりますね。`window[tests1 +
tests2]`を内部から順に評価していくと、`window["AA" +
"BB"]`、`window["AABB"]`、`"CC"`となって、CCを表示できるようになるでしょう。

なお、このようにグローバルオブジェクトを通した方法はお勧めしません。モジュールとして読み込んだ場合や、Node.js等の環境(これらはトップレベルがグローバルコンテキストではない)では使えません。また、これは`var`だからできる方法であって、`let`や`const`では使えません。より汎用的に使えるようにするためにも、グローバルオブジェクトを通してアクセスするよりも、名前で値を取り出しするための`Object`または`Map`を用意する方法にすべきでしょう。例えば、次のようにです。

[code]

    const tests1 = "AA"
    const tests2 = "BB"
    const map = new Map([["AABB", "CC"]])
    
    console.log(map.get(tests1 + tests2))
[/code]

最後に、`eval`を使う方法もありますが、その危険性を自分の言葉で説明できない限り使うべきでは無い、と私は考えていますので、ここでは紹介しません。


CC BY-SA 4.0
2021-10-09T13:26:15.997
82975
2021-10-09T13:43:29.447
2021-10-09T13:43:29.447
7347
7347
82974
answer