ใช้ชื่อตัวแปรแบบไดนามิกใน JavaScript

ใน PHP คุณสามารถทำสิ่งที่น่าอัศจรรย์ / น่ากลัวเช่นนี้:

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

มีวิธีการทำสิ่งนี้กับ Javascript หรือไม่?

เช่นถ้าฉันมีvar name = 'the name of the variable';ฉันจะได้รับการอ้างอิงตัวแปรที่มีชื่อname?

เนื่องจาก ECMA- / Javascript เป็นข้อมูลเกี่ยวกับObjectsและContexts(ซึ่งเป็นบางส่วนของ Object) ตัวแปรทุกตัวจึงถูกเก็บไว้ในตัวแปรที่เรียกว่า(หรือในกรณีของ Function, Activation Object )

ดังนั้นถ้าคุณสร้างตัวแปรเช่นนี้:

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

ในขอบเขตส่วนกลาง (= ไม่มีบริบทของฟังก์ชัน) คุณเขียนตัวแปรเหล่านั้นลงในวัตถุ Global (= windowในเบราว์เซอร์) โดยปริยาย

สามารถเข้าถึงได้โดยใช้เครื่องหมาย "dot" หรือ "bracket":

var name = window.a;

หรือ

var name = window['a'];

ใช้งานได้เฉพาะกับออบเจกต์โกลบอลในอินสแตนซ์เฉพาะนี้เนื่องจากตัวแปรออบเจ็กต์ของออบเจ็กต์ทั่วโลกเป็น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(= หน้าต่าง) ตัวอย่างนี้จะแจ้งเตือนundefinedและ1ตามลำดับ ถ้าเราจะแทนที่this.a = 1; this.b = 2ด้วย:

var a = 1,
    b = 2;

เอาต์พุตแจ้งเตือนทั้งสองจะไม่ได้กำหนด ในสถานการณ์นั้นตัวแปรaและbจะถูกเก็บไว้ใน Activation Object foobarซึ่งเราไม่สามารถเข้าถึงได้ (แน่นอนว่าเราสามารถเข้าถึงได้โดยตรงโดยการโทรaและb)

eval เป็นทางเลือกหนึ่ง

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

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

คุณสามารถใช้วัตถุหน้าต่างเพื่อรับมัน

window['myVar']

window มีการอ้างอิงถึงตัวแปรทั่วโลกและฟังก์ชั่นทั่วโลกที่คุณใช้

แค่ไม่รู้ว่าคำตอบที่ไม่ดีนั้นได้รับคะแนนมากมาย มันเป็นคำตอบที่ค่อนข้างง่าย แต่คุณทำให้มันซับซ้อน

// 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);

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

ลองสิ่งนี้ ...

นี่คือตัวอย่าง:

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กลายเป็นตัวแปรโกโก้

เนื่องจากตัวแปรทั้งหมดในขอบเขตส่วนกลางเป็นคุณสมบัติของวัตถุหน้าต่าง

ใน Javascript คุณสามารถใช้ข้อเท็จจริงว่าคุณสมบัติทั้งหมดเป็นคู่ของค่าคีย์ jAndy พูดถึงเรื่องนี้แล้ว แต่ฉันไม่คิดว่าคำตอบของเขาแสดงให้เห็นว่ามันจะถูกนำไปใช้ประโยชน์ได้อย่างไร

โดยปกติแล้วคุณไม่ได้พยายามสร้างตัวแปรเพื่อเก็บชื่อตัวแปร แต่พยายามสร้างชื่อตัวแปรแล้วใช้มัน PHP ทำด้วย$$varสัญกรณ์ แต่ Javascript ไม่จำเป็นต้องใช้เพราะคีย์คุณสมบัติสามารถใช้แทนกันได้กับคีย์อาร์เรย์

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

ให้ 123. โดยปกติแล้วคุณต้องการสร้างตัวแปรซึ่งเป็นสาเหตุที่มีการอ้อมดังนั้นคุณสามารถทำมันในทางอื่น ๆ

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

2019

TL; DR

• eval ผู้ประกอบการสามารถเรียกใช้การแสดงออกของสตริงในบริบทที่เรียกว่าและกลับตัวแปรจากบริบทนั้น
• literal objectในทางทฤษฎีสามารถทำได้โดยการเขียน: {[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 }`

หากคุณไม่ต้องการใช้วัตถุร่วมเช่นหน้าต่างหรือทั่วโลก (โหนด) คุณสามารถลองสิ่งนี้:

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

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

ฉันจำเป็นต้องวาด FormData หลายอันในทันทีและวิธีการทำงานของวัตถุทำได้ดี

var forms = {}

จากนั้นในลูปของฉันทุกครั้งที่ฉันต้องการสร้างข้อมูลฟอร์มที่ฉันใช้

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

นี่เป็นทางเลือกสำหรับผู้ที่ต้องการส่งออกตัวแปรที่ตั้งชื่อแบบไดนามิก

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];

สิ่งที่พวกเขาหมายถึงคือไม่คุณไม่สามารถ ไม่มีวิธีที่จะทำให้เสร็จ ดังนั้นจึงเป็นไปได้ที่คุณจะทำอะไรเช่นนี้

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

eval () ไม่ทำงานในการทดสอบของฉัน แต่การเพิ่มโค้ด JavaScript ใหม่ลงในทรี DOM เป็นไปได้ ดังนั้นนี่คือฟังก์ชั่นที่เพิ่มตัวแปรใหม่:

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)

แม้ว่านี่จะมีคำตอบที่ได้รับการยอมรับ แต่ฉันต้องการเพิ่มการสังเกต:

ใน 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);

ฉันหวังว่านี่อาจเป็นประโยชน์กับบางคน

ใช้ Object ก็ดีเช่นกัน

var a=123
var b=234
var temp = {"a":a,"b":b}
console.log(temp["a"],temp["b"]);