如何将变量与字符串连接起来并将其作为变量名称（字符串中的所有内容）

Question

我做了一些研究但没有成功。 如何连接字符串和变量，使其行为像变量？

 var  oTranslate = "kółko",
      xTranslate = "krzyżyk",
      suffix = "Translate";

n1 = "x" or "o"

alerts.text("Winner is" + n1 +"Translate" + "!");

我的目标是将变量“n1”与单词“Translate”连接，并显示定义为“oTranslate”或“xTranslate”的变量，具体取决于“n1”的值。 我一直在尝试使用后缀，但没有取得好成绩。 在这个例子中，我想避免使用if语句。

谢谢！

编辑： 我在T.J.标记的帖子中找不到解决方案。克劳德因此在我看来并不重复。

以下是更大图片的摘要： 我希望将“Winner is oDes”更改为“Winneriskółko”，将var“o”与字符串“Des”连接，并在“call function”中将其显示为已定义的变量（oDes =“kółko”）。 Nina Scholz指出了解决方案，但采用了不同的方法（谢谢;））

$(function(){

  var x = "o",
      oTranslate = "kółko",
      xTranslate = "krzyżyk",
      pre = "Translate",
      flag,
      alerts = $("div.alerts");
  
  var testy = ["abc", "def", "ghi", "adg", "beh", "cfi", "aei", "gec"];
  
  var styleWin = {"background-color": "yellow",
                   "color" : "red" };
  //translate = { o: "kółko", x: "krzyżyk" }
  // abc
  // def
  // ghi
  // abc, def, ghi, adg, beh, cfi, aei, gec
  //check if we have 3 in row, if yes, alert winner
  function check(nazwa){  
   
    for(var ij = 0; ij < testy.length; ij++){
      // console.log("arr " + testy[0][0]);
      // console.log("A " + a.innerHTML);
      if(($("#"+testy[ij][0]).text()) == nazwa && ($("#"+testy[ij][1]).text()) == nazwa && ($("#"+testy[ij][2]).text()) == nazwa){
        call(testy[ij][0], testy[ij][1], testy[ij][2], nazwa);
       }
    }
  };  

    function call(f1, f2, f3, n1){
      //console.log('Wygrał ' + n1 + "Translate");
      //alerts.text('Wygrał ' + translate[n1]);
           alerts.text('Winner is ' + n1+'Translate'); 

      flag = "end";
      $("#"+f1+",#"+f2+", #"+f3).css(styleWin);          
  };
  

  
  
  //check if game has ended or player clicks at used field, else put sign in field
  $("div.item").on("click", function(){
    var place = this.innerText;
    if(place == "x" || place == "o"){
      console.log("Niedozwolony ruch!");
    } else if(flag !== "end"){
      this.innerText = x;
      check(x);
    }
  });
  
  //Change between x and o
  $(".container").on("click", function() {
    if(flag !== "end"){
      (x == "o") ? x = "x" : x = "o";
      return x;  
    }
  });
   
  //reset
  $(".reset").on("click", function(){
    $(".item").removeAttr('style');
    $(".item").empty();
    flag = "";
  });
});

body {
  margin: 0;
  padding: 0;
}

.over {
  display: grid;
  border: 5px solid red;
  grid-template-columns: auto 300px auto;
  grid-template-rows: auto 300px auto;
  grid-template-areas: ". f1 ." ". x ." ". f2 .";
}

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: "a b c" "d e f" "g h i";
  grid-area: x;
  grid-gap: 0;
  justify-items: stretch;
  align-items: stretch;
  border: 1px solid red;
}

.item-a {
  grid-area: a;
}

.item-b {
  grid-area: b;
}

.item-c {
  grid-area: c;
}

.item-d {
  grid-area: d;
}

.item-d {
  grid-area: d;
}

.item-e {
  grid-area: e;
}

.item-f {
  grid-area: f;
}

.item-g {
  grid-area: g;
}

.item-h {
  grid-area: h;
}

.item-i {
  grid-area: i;
}

.fix {
  grid-area: f1;
  height: 100px;
}

.fix2 {
  grid-area: f2;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item:hover {
  background-color: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over">
  <div class="fix">
     <div class="alerts"></div>
  </div>
  <div class="container">
    <div class="item-a item" id="a"></div>
    <div class="item-b item" id="b"></div>
    <div class="item-c item" id="c"></div>
    <div class="item-d item" id="d"></div>
    <div class="item-e item" id="e"></div>
    <div class="item-f item" id="f"></div>
    <div class="item-g item" id="g"></div>
    <div class="item-h item" id="h"></div>
    <div class="item-i item" id="i"></div>
  </div>
  <div class="fix2"><button class="reset">Reset</button></div>
</div>