渲染标记模板文字时的额外替换答案

【问题标题】：Extra substitution when rendering a tagged template literal渲染标记模板文字时的额外替换
【发布时间】：2018-12-19 17:45:41
【问题描述】：

我刚开始使用模板字面量和标记模板字面量。但是我在尝试渲染模板文字时遇到了一个问题，因为它渲染了一个额外的替换，我想知道它来自哪里。

这是我尝试过的：

我的数据

var data = {
    login: "john_12",
    name: "John",
    bio: "developer",
    email: "jdev@mail.com"
}

我的标签功能

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: jdev@mail.com</p> 
     </div> 
 data no available <------- THIS IS WHAT SHOULDN'T APPEAR

最后有一个额外的“数据不可用”。就像标签函数收到 6 个parts（替换或表达式）而不是 5 个。

我在这里错过了什么？

【问题讨论】：

strings.length === parts.length + 1，总是这样。
考虑这个模板文字：`${foo}`。当你将它传递给你的标签函数时，strings 将是 ['', ''] 并且部分将是 [foo]。

标签： javascript ecmascript-6 template-literals tagged-templates

【解决方案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
}

【讨论】：