js 模板字符串判断？

Question

根据不同的值，判断应该用什么元素，大佬们有什么方法优化一下呀

    if(arr.status == 1 && arr.isSurrender == 0) {
        doc = `
        <td><button class="btn btn-default">退款</button></td>
         </tr>
     `
    }else {
        doc = `
         </tr>
        `
    }

    htmls = `
         <tr>
             <td>${ arr.period }</td>
             <td>${ arr.showAppointment || '' }</td>
             <td>${ arr.showPaidTime || '' }</td>
             <td>${ arr.amount || '' }</td>
             <td>${ arr.orderNumber || '' }</td>
     `;
    htmls += doc
    $("#Stages").append(htmls);

Answer 1

let doc = (arr.status == 1 && arr.isSurrender == 0) ? 
    `<td><button class="btn btn-default">退款</button></td></tr>` : `</tr>`;

let htmls = `
     <tr>
         <td>${ arr.period }</td>
         <td>${ arr.showAppointment || '' }</td>
         <td>${ arr.showPaidTime || '' }</td>
         <td>${ arr.amount || '' }</td>
         <td>${ arr.orderNumber || '' }</td>
         ${doc}
 `;
$("#Stages").append(htmls);

Answer 2

let htmls = `
    <tr>
        <td>${arr.period}</td>
        <td>${arr?.showAppointment}</td>
        <td>${arr?.showPaidTime}</td>
        <td>${arr?.amount}</td>
        <td>${arr?.orderNumber}</td>
        ${
            arr.status == 1 && arr.isSurrender == 0
                ? `
        <td>
            <button class="btn btn-default">退款</button>
        </td>
        `
                : ""
        }
    </tr>
 `;
$("#Stages").append(htmls);