JavaScript数组多词项href仅含首词的问题排查

我正在编写一个脚本，用于在网页上以两列形式展示建议词列表，每个建议词会显示为超链接，点击可跳转至对应详情页。目前遇到的问题是：当数组中的建议词为多词内容（如"dog house"）时，超链接的href仅包含第一个词"dog"，导致跳转至错误页面，但页面上显示的文字是正确的。请问我的href写法哪里出错了？是否模板存在限制多词字符串的问题？

代码如下：

if(suggestions.length) {

    var table = '<table cellspacing="1" cellpadding="5">';
    var tolength = suggestions.length
    if (tolength ===1){
        for (var i = 0; i < suggestions.length; i++) {
             var b = suggestions[i]
             table += '<tr>';
             table += '<td><a href=word?word=>' + suggestions[i] + '</a></td>';
             table += '</tr>';
        }
     }
     if(tolength > 1){
        for (var m = 0; m < tolength; m+=2) {
             table += '<tr>';
             table += '<td><a href=word?word='+ suggestions[m] + '>' + suggestions[m] + '</a></td>';
             table += '<td><a href=word?word='+ suggestions[m+1] +'>'  + suggestions[m+1] + '</a></td>';
             table += '</tr>'
         }
      }

      table += '</table>';

      document.getElementById('sug').innerHTML = table;


}

问题根源有两个：

1. href属性未加引号：浏览器会把URL里的空格识别为属性分隔符，比如href=word?word=dog house会被解析成href="word?word=dog"，剩下的house被当成a标签的无效属性。
2. 未对URL参数编码：空格、特殊字符等在URL中需要转义（比如空格转成%20），即使加了引号，后端也可能无法正确解析未编码的参数。

修复步骤：

• 给href属性值套上双引号，确保整个URL被完整识别。
• 用encodeURIComponent()对建议词做URL编码，处理所有特殊字符。

修改后的代码：

if(suggestions.length) {

    var table = '<table cellspacing="1" cellpadding="5">';
    var tolength = suggestions.length;
    if (tolength === 1){
        for (var i = 0; i < suggestions.length; i++) {
             var word = suggestions[i];
             var encodedWord = encodeURIComponent(word);
             table += `<tr><td><a href="word?word=${encodedWord}">${word}</a></td></tr>`;
        }
     }
     if(tolength > 1){
        for (var m = 0; m < tolength; m+=2) {
             table += '<tr>';
             // 处理第一个词，避免越界
             if (m < tolength) {
                 var word1 = suggestions[m];
                 var encodedWord1 = encodeURIComponent(word1);
                 table += `<td><a href="word?word=${encodedWord1}">${word1}</a></td>`;
             }
             // 处理第二个词，奇数个建议词时留空
             if (m+1 < tolength) {
                 var word2 = suggestions[m+1];
                 var encodedWord2 = encodeURIComponent(word2);
                 table += `<td><a href="word?word=${encodedWord2}">${word2}</a></td>`;
             } else {
                 table += '<td></td>';
             }
             table += '</tr>';
         }
      }

      table += '</table>';
      document.getElementById('sug').innerHTML = table;
}

额外优化：

• 使用模板字符串（反引号）拼接HTML，避免繁琐的+连接，可读性更强。
• 增加数组越界判断，解决奇数个建议词时出现undefined的问题。

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