JavaScript에서 동적 변수 이름 사용


344

PHP에서는 다음과 같이 놀랍고 끔찍한 일을 할 수 있습니다.

$a = 1;
$b = 2;
$c = 3;
$name = 'a';
echo $$name;
// prints 1

Javascript로 이와 같은 작업을 수행하는 방법이 있습니까?

var name = 'the name of the variable';를 들어 변수가 name있다면 이름을 가진 변수에 대한 참조를 얻을 수 있습니까?


2
stackoverflow.com/questions/724857/…stackoverflow.com/questions/1664282/…의 중복 가능성이 있지만 여기서는 정답이 더 좋습니다. IMO.
goodeye

이것이 귀하의 질문에 대답합니까? Javascript의 "가변"변수? . 수락 된 답변은 여기에있는 답변보다 낫습니다. 왜냐하면 그것을 수행하는 방법을 보여주기 때문에 항상 원하는대로 무엇이든 할 수있는 더 좋은 방법이 있음을 올바르게 경고합니다 . 메타의 XY 문제 를 참조하십시오 .
ggorlen

답변:


354

ECMA- / 자바 스크립트는 모든 것 ( ObjectsContexts일종의 Object) 에 관한 것이므로 모든 변수는 Variable 이라는 (또는 Function, Activation Object의 경우 )에 저장됩니다.

따라서 다음과 같은 변수를 작성하면

var a = 1,
    b = 2,
    c = 3;

에서 글로벌 범위 (= NO 기능 컨텍스트), 당신은 암시 적으로이 변수 쓰기 글로벌 객체 (= window브라우저에서)를.

"dot"또는 "bracket"표기법을 사용하여 액세스 할 수 있습니다.

var name = window.a;

또는

var name = window['a'];

때문 만이 특정 인스턴스에서 전역 객체에 대한 작동 변수 오브젝트글로벌 개체 는 IS window객체 자체. 함수의 컨텍스트 내에서는 활성화 객체에 직접 액세스 할 수 없습니다 . 예를 들어 :

function foobar() {
   this.a = 1;
   this.b = 2;

   var name = window['a']; // === undefined
   alert(name);
   name = this['a']; // === 1
   alert(name);
}

new foobar();

new자체 정의 객체 (컨텍스트)의 새 인스턴스를 만듭니다. new기능의 범위가 없으면 global(= 창)이됩니다. 이 예는 경고 것 undefined1각각. 우리가 다음 this.a = 1; this.b = 2과 같이 교체한다면 :

var a = 1,
    b = 2;

두 경고 출력은 모두 정의되지 않습니다. 이 시나리오에서는 변수 a와는 b에서 정품 인증 개체에 저장된 얻을 것이다 foobar우리가하지 액세스 (물론 우리가 호출하여 직접 그 액세스 할 수 할 수있는, a그리고 b).


1
또 다른 멋진 점은이 방법으로 모든 전역 레벨 함수에 콜백 (시작 / 종료)을 추가 할 수 있다는 것입니다.
독성

5
그러나 동적 변수가 함수에서 로컬이면 어떻게됩니까? 예를 들면 다음과 같습니다. function boink () {var a = 1; // 작동하지 않습니다. var dynamic = this [ 'a']; // 이것도 작동하지 않습니다. var dynamic = [ 'a']; }
Kokodoko

이 때문에 Kokodoko-@ "컨텍스트"또는 함수의 실행 컨텍스트에 참조되지 않은 경우 (실행 컨텍스트를 참조 할 수있는 방법이 없으며, 이것은 ECMA-262에 의해 금지 된 것). 이것은 함수가 호출되는 방법 (또는 bind )에 의해 설정되며 , 액세스 가능한 실행 컨텍스트와 관련이없는 객체 일뿐입니다.
RobG

중첩 된 속성에 액세스해야하는 경우 stackoverflow.com/questions/4244896/…를
Mr Br

괄호 표기법으로 올바른 방향으로 나를 가리 켰습니다. 도트 표기법 만 생각했습니다.
Andrew

149

eval 하나의 옵션입니다.

var a = 1;
var name = 'a';

document.write(eval(name)); // 1

19
평가가 악한 것은 아닙니다. 평가판을 사용하지 마십시오!
EasyBB

52
@EasyBB-무언가를 사용하지 말라고한다면 이유를 설명하는 데 도움이되지 않습니다. eval () 이외의 작업을 수행 할 수있는 다른 방법을 생각할 수없는 상황이 있습니다.
Rampant Creative Group

4
Eval은 최종 사용자를 공격 할 위험이 있으며, 실종 된 경우 잘못 이해하고 오용하는 것은 기술적으로 악한 것이 아닙니다. 리터럴 var를 보유한 PHP 응답을 보았고 eval을 사용하여 실행했습니다. 더 좋은 방법이 있으므로이 경우에는 사용해서는 안됩니다. 전체적으로 더 나은 방법이 있기 때문에 eval에 대한이 질문은 전혀 사용하지 않아야하며 많은 사람들이 이것을 알고 있다고 확신합니다.
EasyBB

2
javascriptweblog.wordpress.com/2010/04/19/how-evil-is-eval을 통해 --- "eval을 사용하여 가장 자주 평가되는 인수를 고려해 봅시다 : 1) 컴파일이 필요하고 느리므로 2) 만약 그렇다면 악의적 인 스크립트가 eval 인수로가는 길을 찾았습니까? 3)보기 흉하게 보입니다. 4) 실행 컨텍스트와 호출 된 범위의 바인딩을 상속합니다. "
mattLummus

1
eval을 사용하여 동적 변수를 만드는 방법은 다음과 같습니다. stackoverflow.com/a/13291766/5528600
am2124429

80

window 객체를 사용하여 얻을 수 있습니다.

window['myVar']

window 사용중인 모든 전역 변수 및 전역 함수에 대한 참조가 있습니다.


28
말할 필요도없이, 이것은 eval ()보다 안전합니다.
Cray

45

나쁜 답변이 얼마나 많은 표를 얻는 지 모릅니다. 대답하기는 쉽지만 복잡하게 만듭니다.

// If you want to get article_count
// var article_count = 1000;
var type = 'article';
this[type+'_count'] = 1000;  // in a function we use "this";
alert(article_count);

13
"우리가 사용하는 함수 this"- 이런 식으로 전역 변수에 액세스 하려면 명시 window적이 지 않고 객체를 사용하는 것이 좋습니다 this. this모호합니다.
MrWhite

1
그러나 함수 내 에서 다른 변수에 이름이있는 경우 예제 this에서 변수 또는 다른 것을 사용하여 변수에 액세스 할 수 없습니다 type: function test(vname) { var type = 'article'; this[vname] = 'something else'; alert(type); }; test('type')will show article, not something else. 이것이 바로 "복잡한 답변"이 설명하는 것입니다.
Orafu

28
a = 'varname';
str = a+' = '+'123';
eval(str)
alert(varname);

이 시도...


27

이것은 예입니다 :

for(var i=0; i<=3; i++) {
    window['p'+i] = "hello " + i;
}

alert(p0); // hello 0
alert(p1); // hello 1
alert(p2); // hello 2
alert(p3); // hello 3

다른 예시 :

var myVariable = 'coco';
window[myVariable] = 'riko';

alert(coco); // display : riko

따라서 myVariable의 " coco " 값 은 변수 coco가 됩니다.

전역 범위의 모든 변수는 Window 개체의 속성이므로


14

Javascript에서는 모든 속성이 키 값 쌍이라는 사실을 사용할 수 있습니다. jAndy는 이미 이것을 언급했지만 그의 대답이 어떻게 악용 될 수 있는지는 생각하지 않습니다.

일반적으로 변수 이름을 보유 할 변수를 만들지 않고 변수 이름을 생성 한 다음 사용하려고합니다. PHP는 $$var표기법으로 수행하지만 속성 키는 배열 키와 상호 교환 가능하므로 Javascript는 필요하지 않습니다.

var id = "abc";
var mine = {};
mine[id] = 123;
console.log(mine.abc);

일반적으로 변수를 구성하려고합니다. 간접적 인 이유가 있으므로 다른 방법으로도 할 수 있습니다.

var mine = {};
mine.abc = 123;
console.log(mine["a"+"bc"]);

1
var someJsonObj = {}; 루프에서 .... for (var i = 0; i <= 3; i ++) {someJsonObj [i] = []; },하지만 난 아무것도 될 수 있습니다. 동적으로 생성 된 변수는 모두 쉽게 참조 할 수 있도록 someJsonObj 안에 있습니다.
rajeev

5

2019 년

TL; DR

  • eval 연산자는 호출 한 컨텍스트에서 문자열 식을 실행하고 해당 컨텍스트에서 변수를 반환 할 수 있습니다.
  • literal object이론적으로 write :로 할 수 {[varName]}있지만 정의에 의해 차단되었습니다.

그래서 나는이 질문을 보았고 여기에있는 모든 사람들은 실제 해결책을 제시하지 않고 놀았습니다. 그러나 @Axel Heider는 접근이 좋습니다.

해결책은 eval입니다. 가장 잊혀진 연산자. (대부분은 생각 with())

eval연산자는 호출 한 컨텍스트에서 식을 동적으로 실행할 수 있습니다. 해당 표현식의 결과를 반환합니다. 이를 사용하여 함수의 컨텍스트에서 변수의 값을 동적으로 반환 할 수 있습니다.

예:

function exmaple1(){
   var a = 1, b = 2, default = 3;
   var name = 'a';
   return eval(name)
}

example1() // return 1


function example2(option){
  var a = 1, b = 2, defaultValue = 3;

  switch(option){
    case 'a': name = 'a'; break;
    case 'b': name = 'b'; break;
    default: name = 'defaultValue';
  }
  return eval (name);
}

example2('a') // return 1
example2('b') // return 2
example2() // return 3

나는 항상 명시 적으로 표현식 eval을 실행할 것임을 명심하십시오 . 코드에서 불필요한 놀라움을 피하기 위해. eval매우 강하지 만 이미 알고 있다는 것을 확신합니다

BTW, 합법적이라면 literal object변수 이름과 값을 캡처하는 데 사용할 수 있지만 계산 된 속성 이름과 속성 값을 결합 할 수는 없습니다.

functopn example( varName ){
    var var1 = 'foo', var2 ='bar'

    var capture = {[varName]}

}

example('var1') //trow 'Uncaught SyntaxError: Unexpected token }`

빠른 솔루션이지만 JS 엔진이 해당 방법을 최적화 할 수 없으므로 안전하지 않고 성능을 저하시키기 때문에 나쁜 습관입니다.
Diego Ortiz

멋진 솔루션
Rohit Parte

4

window 또는 global (노드)와 같은 전역 객체를 사용하지 않으려면 다음과 같이 시도하십시오.

var obj = {};
obj['whatever'] = 'There\'s no need to store even more stuff in a global object.';

console.log(obj['whatever']);

4

여러 개의 FormData를 즉석에서 그려야하고 객체 방식이 잘 작동했습니다.

var forms = {}

그런 다음 루프에서 내가 사용한 양식 데이터를 만들어야 할 때마다

forms["formdata"+counter]=new FormData();
forms["formdata"+counter].append(var_name, var_value);

고마워 ... 그것은 완전히 나를 구했다! .이 $ 심판은 [ "리스트 뷰는 '+ 인덱스] .nativeView.animate는 ({...})이 같은 심판 내부 VARS 필요 $ refs.listView1 listView2 및 등등. ...
명기 노이만

2

이것은 동적으로 명명 된 변수를 내 보내야하는 사람들을위한 대안입니다

export {
  [someVariable]: 'some value',
  [anotherVariable]: 'another value',
}

// then.... import from another file like this:
import * as vars from './some-file'

다른 대안은 단순히 키 이름이 동적으로 지정된 객체를 만드는 것입니다.

const vars = { [someVariable]: 1, [otherVariable]: 2 };

// consume it like this
vars[someVariable];

1

그들이 의미하는 것은 아니오, 당신은 할 수 없습니다. 그것을 할 수있는 방법이 없습니다. 그래서 당신은 이런 식으로 할 수있었습니다

function create(obj, const){
// where obj is an object and const is a variable name
function const () {}

const.prototype.myProperty = property_value;
// .. more prototype

return new const();

}

ECMAScript 5에서 구현 된 것과 같은 작성 기능이 있습니다.


4
const는 ES6의 키워드입니다
Tejas Manohar

4
그리고 그 전에는 미래의 예약어 였습니다 .
TJ Crowder

eval연산자
pery의 미몬는

1

내 테스트에서 eval ()이 작동하지 않았습니다. 그러나 DOM 트리에 새로운 JavaScript 코드를 추가 할 수 있습니다. 새 변수를 추가하는 함수는 다음과 같습니다.

function createVariable(varName,varContent)
{
  var scriptStr = "var "+varName+"= \""+varContent+"\""

  var node_scriptCode = document.createTextNode( scriptStr )
  var node_script = document.createElement("script");
  node_script.type = "text/javascript"
  node_script.appendChild(node_scriptCode);

  var node_head = document.getElementsByTagName("head")[0]
  node_head.appendChild(node_script);
}

createVariable("dynamicVar", "some content")
console.log(dynamicVar)

2
작은 개선, 사용하는 것이 좋습니다 var node_head = document.getElementsByTagName("head")[0]아무도는 제공하지 않기 때문에, ID 대신 id="head"<head>:-)
ddlab

나는 :) 그러나 고마워, 이제이`id = "head"를 제거 할 수있다
Axel Heider

1
이것은 전역 변수를 만드는 지나치게 복잡한 방법 인 것 같습니다! (... 그리고 이것이 어떻게 질문에 대답합니까?)
MrWhite

천재 :) 평가는 솔루션입니다. 코드가없는 작업을 수행하더라도
미몬 pery

1

이것은 받아 들일만한 대답이 있지만 관찰을 추가하고 싶습니다.

ES6에서는 사용 let 이 작동하지 않습니다 .

/*this is NOT working*/
let t = "skyBlue",
    m = "gold",
    b = "tomato";

let color = window["b"];
console.log(color);

그러나 작품 사용var

/*this IS working*/
var t = "skyBlue",
    m = "gold",
    b = "tomato";

let color = window["b"];
console.log(color);

나는 이것이 일부에게 도움이되기를 바랍니다.


1
동일 적용const

1
진실. 그러나 변수를 사용하여 객체를 만들고 거기에서 변수를 선택할 수 있습니다 const vars = { t, m, b }; console.log(vars['b']). 그렇지 않으면 eval작동합니다.
Fabian von Ellerts

0

Object를 사용하는 것도 좋습니다.

var a=123
var b=234
var temp = {"a":a,"b":b}
console.log(temp["a"],temp["b"]);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.