如何在JavaScript中实现多条件翻译？解决短句翻译失效问题

当前你的代码只能匹配单个单词的精确输入，无法处理多词短句。可以通过以下方式修改，让翻译器支持整句翻译：

修改思路 #

• 改用键值对对象存储翻译词库，替代冗余的if判断，后续新增词汇更便捷
• 将输入文本按空格分割为单词数组，逐个处理每个单词的翻译
• 把翻译后的单词重新拼接成完整句子输出，未匹配到的单词保留原词

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TRANSLATOR</title>
    <style>
        body, input {
            font-size: 20px; /* 补全单位，修复原代码样式问题 */
        }
        body {
            text-align: center;
        }
    </style>
    <script>
        // 定义翻译词库，键为英文单词，值为印尼语翻译
        const translationDict = {
            "i": "aku",
            "love": "cinta",
            "you": "kamu"
        };

        function checkForTranslation(){
            const input = document.getElementById("inputTextField").value.toLowerCase();
            const outputDiv = document.getElementById("translationOutputDiv");
            
            // 按空格拆分输入为单词数组，逐个翻译后拼接成句子
            const translatedWords = input.split(' ').map(word => {
                // 找到翻译就返回，找不到返回原词
                return translationDict[word] || word;
            });
            
            // 把翻译后的单词数组拼成完整句子
            outputDiv.innerHTML = translatedWords.join(' ');
        }
    </script>
</head>
<body>
    <h2>TRANSLATOR</h2>
    <input placeholder="Masukkan kalimat" id="inputTextField" type="text" onkeyup="checkForTranslation()">
    <div id="translationOutputDiv" style="display: inline">[translation]</div>
</body>
</html>

关键改动说明 #

1. 翻译词库优化：用translationDict对象统一管理词汇，新增词汇只需在对象里添加键值对，不用写大量if判断
2. 拆分与拼接：split(' ')将输入文本拆成独立单词，map()遍历处理每个单词的翻译，最后用join(' ')拼接成完整句子
3. 容错处理：如果输入的单词不在词库中，会直接保留原词，避免无输出的情况

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