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

【问题标题】：Printing Javascript split() array and converting undefined values to strings打印 Javascript split() 数组并将未定义的值转换为字符串
【发布时间】：2011-12-09 06:26:25
【问题描述】：

我正在尝试将字符串转换为单词，然后使用 javascript 和 html5 画布打印这些内容。字符串可以是任意长度，但我使用 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 个单词）。请随时提出一些更好的选择。

谢谢

【问题讨论】：

标签： javascript html canvas split html5-canvas

【解决方案1】：

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

对不起，我现在没有时间测试这个，或者解释它，除了提到.slice() 创建一个从源数组中提取范围的新数组，.join() （显然）与@相反987654323@，但也许你可以试试这样：

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);
}

【讨论】：