Печать массива 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);
}