打印 Javascript split() 数组并将未定义的值转换为字符串

Question

我正在尝试将字符串转换为单词，然后使用 javascript 和 html5 canvas 打印它们。该字符串可以是任意长度，但我使用 50 作为单词的最大值（用空格分隔）。现在我有以下内容来创建数组：

var wordArray = kstring.split(" ", 50);

for(var k = 0; k < wordArray.length; k++)
{
    if(typeof wordArray[k] == 'undefined')
        wordArray[k] = " .";
}

然后使用：

        ctx.fillText(wordArray[0] + " " + wordArray[1] + " " + wordArray[2] + " " + wordArray[3] + " " + wordArray[4], leftOffset, txtHeight);
        ctx.fillText(wordArray[5] + " " + wordArray[6] + " " + wordArray[7] + " " + wordArray[8] + " " + wordArray[9], leftOffset, txtHeight+20);

等

进行打印。但是，当打印文本时，任何未定义的值都会打印为“未定义”而不是“”。看来我要以错误的方式检查未定义的值，但我不确定还可以尝试什么。

另外，如果有人对如何实现这个目标有更好的建议（将字符串转换为单词，然后一次打印 5 个单词）。请随时提出一些更好的选择。

谢谢

Answer 1

.split() 返回的数组中不会有任何未定义的值。您未定义，因为您的打印代码的硬编码索引高于数组中的最高索引。

抱歉，我现在没有时间对此进行测试，也没有时间解释它，除了提到 .slice() 创建一个从源数组中提取范围的新数组，以及 .join( ) （显然）与 .split() 相反，但也许你可以尝试这样的事情：

var wordArray = kstring.split(" ", 50),
    i, h, l
    wordsPerLine = 5,
    lineHeight = 20;

for (i=0, h=0, l=wordArray.length; i < l; i+=wordsPerLine, h+=lineHeight) {
   ctx.fillText( wordArray.slice(i, Math.min(l, i+wordsPerLine)).join(" "),
                 leftOffset, txtHeight + h);
}