如何在JavaScript中用==相等判断替代includes方法？

我开发了一个语言翻译功能，目前用JavaScript的includes方法做文本匹配。现在遇到个问题：输入ABC能正常显示对应翻译结果1，但输入ABCD本该显示结果2，却因为includes是部分匹配，导致触发不了ABCD的对应翻译。我想用==（或更严谨的===）做相等判断实现完全匹配，试了几种写法都没成功。

完整代码 #

<div class="container">
    <textarea name="" id="input" cols="30" rows="10" class="input" placeholder="input here"></textarea>
    <div id="output" class="output">
        <span style="color:lightslategray;">translated text</span>
    </div>
</div>

<script>
 var trdn;
var ttsToggle = false;
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[4];
document.getElementById("input").onkeyup = function(e){
 trdn = " " + document.getElementById("input").value;
 translate(e);
 document.getElementById("output").innerHTML = trdn;
 if(ttsToggle == true){
   setTimeout(function(){
     msg.text = document.getElementById("output").innerHTML;
     window.speechSynthesis.speak(msg);
   },1000)
 }
}
/*document.getElementById("ttsToggle").onmousedown = function(e){
 if(ttsToggle == false){
   ttsToggle = true;
   document.getElementById("ttsToggle").innerHTML = "toggle_on";
 }
 else{
   ttsToggle = false;
   document.getElementById("ttsToggle").innerHTML = "toggle_off";
 }
}*/
 </script>

<script>
 function translate(e){

 while(trdn.includes("speak")){
 trdn = trdn.replace("speak", "talar");
 }

while(trdn.includes("speak1")){
 trdn = trdn.replace("speak1", "talar1");
 }

while(trdn.includes("speak2")){
 trdn = trdn.replace("speak2", "talar2");
 }

}
</script>

尝试过的失败写法 #

while(trdn == ("speak")){
  trdn = trdn.replace("speak", "talar");

解决方案 #

问题根源 #

1. 你给trdn赋值时加了个前置空格：trdn = " " + 输入值，导致直接用==匹配"speak"永远不成立，因为字符串前面多了个空格。
2. while循环完全没必要，完全匹配只需要判断一次即可。
3. 原匹配顺序有问题：先匹配短的speak会导致长的speak1、speak2被拆分成短字符串提前匹配。

修改后的代码 #

首先修改输入值的赋值，去掉前置空格：

document.getElementById("input").onkeyup = function(e){
 trdn = document.getElementById("input").value; // 去掉前面的空格
 translate(e);
 document.getElementById("output").innerHTML = trdn;
 if(ttsToggle == true){
   setTimeout(function(){
     msg.text = document.getElementById("output").innerHTML;
     window.speechSynthesis.speak(msg);
   },1000)
 }
}

然后重写translate函数，调整匹配顺序并使用完全相等判断：

function translate(e){
  // 先匹配长关键词，避免被短关键词提前拦截
  if(trdn === "speak2"){
    trdn = "talar2";
  } else if(trdn === "speak1"){
    trdn = "talar1";
  } else if(trdn === "speak"){
    trdn = "talar";
  }
}

这样就能实现完全匹配：输入speak返回talar，输入speak1返回talar1，输入speak2返回talar2，不会出现部分匹配的问题。

内容的提问来源于stack exchange，提问作者King Moaz