To pytanie zostało wcześniej zadane, chciałem stworzyć (może) prostszą wersję dla innych (może) łatwiej zrozumieć.

Chciałem zrobić, to połączyć ciąg z danymi (ciągami) z zmiennej, aby utworzyć nazwę zmiennej. Przypuszczam, że będzie to nazywa się zmienną dynamiczną?

W tym przykładzie chcę dodać klasę i tekst do div ..

<div class="time fa"></div>

..based na zmianę danych, które dostaję z pliku JSON.

var timetain = 10;
var timebus = 20;
var icontrain = 'fa-train';
var iconbus = 'fa-bus';
var type = 'bus'; // this string comes from a json file, it will either be train or bus

Chcę więc dodać słowo time do danych z zmiennej o nazwie {x1}}, aby wyjść z danych z timetrain lub timebus

$('.time').text('Travel by bus will take |'time'|+|type| minutes');
$('.time').addClass(|'icon'|+|type|));

Przypuszczam, że inny sposób sformułowania pytania byłoby "Jak połączyć dane zmiennej z ciągiem, aby uzyskać dane z trzeciej zmiennej z JavaScript?"

0
Hastig Zusammenstellen 25 czerwiec 2017, 16:13

4 odpowiedzi

Najlepsza odpowiedź

rozwiązanie przy użyciu eval

eval('string' + variableName)

zastosowany do podanego kodu

var timetain = 10;
var timebus = 20;
var icontrain = 'fa-train';
var iconbus = 'fa-bus';

var type = 'bus'; // this data (string) comes from a json file, it will either be train or bus

$('.time').text('Travel by bus will take ' + eval('time' + type) + ' minutes');
$('.time').addClass(eval('icon' + type));
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time fa"></div>

Uwaga

Przed użyciem tego rozwiązania należy przeczytać więcej o krytyki używania eval

To rozwiązanie działa i rozwiązuje pytanie zgodnie z pytaniem. Zakładam, że kącikowe są krytyki, które wskazałem, a że istnieją lepsze sposoby pójścia na rzeczy, jeśli są prawidłowo zaplanowane, ale nigdy nie dowiemy się, ponieważ nikt nie dbał, aby nikt się wyjaśnia.

Potrzebowałem prostego sposobu evala, ponieważ łączyłem skomplikowaną sieć różnych porównań plików JSON dla prostej aplikacji do gry i potrzebowałem szybkiej i łatwej i łatwej metody "zmiennej zmiennej", metodę stylu PHP jako kod zastępczy, dopóki nie udało mi się myśleć Wszystko przez.

W bardziej zaawansowanych wersjach używam obiektów i tablic takich jak polecane w innych odpowiedzi tutaj, ale nie byłem w stanie myśleć przez rzeczy bez użycia eval jako tymczasowego "rusztowania".

Skrzypce

https://jsfiddle.net/hastig/o1699JA8W/

-3
Hastig Zusammenstellen 2 lipiec 2017, 08:43

Nicht So @hastig, Lieber Ordentlich Machen.

Lepsze rozwiązanie bez użycia Eval:

Większość języków programowania Obecnie obsługuje strukturę danych do zmiennych "Group", które należą do siebie. Nazywa się obiektem. Nie mogę wymyślić jednej wada w użyciu obiektów na wielu zmiennych. Takie podejście jest nawet (malutki bit) szybciej niż próba z eval().

var configByType = {
  "train": {
  label: "train",
    time: 10,
    icon: "fa-train"
  },

  "bus": {
    label: "bus",
    time: 20,
    icon: "fa-bus"
  }
}

function travel(type){
  //because creating and adding a new `span` is simpler 
  //than checking wich classes to remove on `.time.fa`
  var $span = $('.time').html('<span>').children();
  
  if(type in configByType){
    let config = configByType[type];
    $span.addClass(config.icon)
      .text('Travel by '+ config.label +' will take ' + config.time + ' minutes')
  }else{
    
    $span.text('unsupported type: ' + type);
  }
}

$('#update').click(function(){
  var types = ["car", "bus", "train", "plane"];

  var randomType = types[Math.floor(Math.random() * types.length)];
  travel(randomType)
});

travel('bus');
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time fa"></div>
<br>
<input id="update" type="button" value="update" />
1
Thomas 25 czerwiec 2017, 14:23

Korzystanie z ES6 Literałów szablonów:

var time = "30",
    typesArr = ["bus", "train", "foot"],
    type = typesArr[ Math.random()*typesArr.length|0 ]; // pick random array item

// mix values with strings:
document.write(   `Travel by ${type} will take ${time} minutes`   );

Zasadniczo nie możesz skonstruować nazwy zmiennej w JavaScript, chyba że jest kluczem obiektu, więc musisz przechowywać klucze w niektórych obiektach, aby uzyskać do nich dostęp, ale w twoim przypadku jest znacznie łatwiejszy:

$('.time').addClass('icon fa-' + type); // example => 'icon fa-train'

Ale jeśli naprawdę Chciałby skonstruować klucze dynamicznie, możesz zrobić:

var types = {
    train : "fa-train",
    bus : "fa-bus"
};

var whatever = "bus";
var type = types[whatever];  // "fa-bus"
1
vsync 25 czerwiec 2017, 13:40

Dlaczego nie zrobić asocjacyjnej tablicy czasów?

time = {'bus': 20, 'train': 10}

Itp.? Niż tylko dostęp do time[type]. Jest to znacznie bezpieczniejsze niż to, co chcesz zrobić (musiałbyś polegać na Evalu), co wydaje się być na tym.

1
kabanus 25 czerwiec 2017, 13:16