Дополнительная подстановка при рендеринге тегового литерала шаблона

Question

Я только начал использовать литералы шаблона и помеченные литералы шаблона. Но я сталкиваюсь с проблемой при попытке визуализации литерала шаблона, потому что он производит дополнительную замену, и я могу задаться вопросом, откуда он берется.

Вот что я попробовал:

Мои данные

var data = {
    login: "john_12",
    name: "John",
    bio: "developer",
    email: "[e-mail]"
}

Моя функция тегов

function replaceNullData(strings, ...parts) { 
     var checkedMarkup = ""; 
     strings.forEach((string, index) => { 
         if (!parts[index]){ 
             parts[index] = "data no available"; 
         } 
         checkedMarkup += string + parts[index]; 
     }); 

     return checkedMarkup; 
 }

Мой шаблон буквальный

var summaryMarkup = replaceNullData`
         <div>
             <p>Username: ${data.login}</p>
         </div>
         <div>
             <p>Name: ${data.name}</p>
         </div>
         <div>
             <p>Bio: ${data.bio}/<p>
         </div>
         <div>
             <p>Email: ${data.email}</p>
         </div>
     `; 

Теперь, если я сделаю console.log(summaryMarkup);Я получаю это:

     <div> 
         <p>Username: john_12</p> 
     </div> 
     <div> 
         <p>Name: John</p> 
     </div> 
     <div> 
         <p>Bio: developer/<p> 
     </div> 
     <div> 
         <p>Email: [e-mail]</p> 
     </div> 
 data no available <------- THIS IS WHAT SHOULDN'T APPEAR

В конце есть дополнительные "данные недоступны". Это как функция тега получила 6 parts (подстановка или выражения) вместо 5.

Что мне здесь не хватает?

Answer 1

Ваш parts.length ожидаемая длина, но обратите внимание, что вы повторяете stringsне parts, strings.length === parts.length + 1Итак, вы получаете доступ parts за границами. повторять parts вместо этого добавьте последнюю строку вне итерации:

function replaceNullData(strings, ...parts) { 
    var checkedMarkup = ""; 
    parts.forEach((part, index) => {
        if (part == null) { // because false, 0, NaN, and '' should be "available"
            part = "data not available";
        }

        checkedMarkup += strings[index] + part;
    });

    return checkedMarkup + strings[strings.length - 1]; // manually append last string
}