如何在变量缺失时隐藏JavaScript分页按钮？

我是JavaScript新手，目前通过模板字符串生成分页按钮，初始代码如下：

myTBody2 += `
<tr><td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.first.href}')">First</button></td>
  <td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.self.href}')">Current</button></td>
  <td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.next.href}')">Next</button> </td>
  <td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.last.href}')">Last </button></td>
</tr>`;

现在需要实现：当${data._links.next.href}这类变量未定义或缺失时，隐藏对应的按钮。请问是否有原生JavaScript（Vanilla JS）的单行内联方法可以实现？

补充数据示例 #

{
  "_embedded" : {
    "softwares" : [ {
      "createdBy" : "System",
      "createdDate" : "2015-12-31T05:00:00.000+00:00",
      "lastModifiedBy" : "System",
      "lastModifiedDate" : "2023-12-31T05:00:00.000+00:00",
      "id" : 21,
      "softwarename" : "AWS16",
      "softwareprovider" : "AMAZON",
      "softwareprovidercontactemail" : "admin@amazon16.com",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/softwares/21"
        },
        "appSoftware" : {
          "href" : "http://localhost:8080/softwares/21"
        }
      }
    }, {
      "createdBy" : "System",
      "createdDate" : "2015-12-31T05:00:00.000+00:00",
      "lastModifiedBy" : "System",
      "lastModifiedDate" : "2023-12-31T05:00:00.000+00:00",
      "id" : 20,
      "softwarename" : "AWS15",
      "softwareprovider" : "AMAZON",
      "softwareprovidercontactemail" : "admin@amazon15.com",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/softwares/20"
        },
        "appSoftware" : {
          "href" : "http://localhost:8080/softwares/20"
        }
      }
    }, {
      "createdBy" : "System",
      "createdDate" : "2015-12-31T05:00:00.000+00:00",
      "lastModifiedBy" : "System",
      "lastModifiedDate" : "2023-12-31T05:00:00.000+00:00",
      "id" : 19,
      "softwarename" : "AWS14",
      "softwareprovider" : "AMAZON",
      "softwareprovidercontactemail" : "admin@amazon14.com",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/softwares/19"
        },
        "appSoftware" : {
          "href" : "http://localhost:8080/softwares/19"
        }
      }
    }, {
      "createdBy" : "System",
      "createdDate" : "2015-12-31T05:00:00.000+00:00",
      "lastModifiedBy" : "System",
      "lastModifiedDate" : "2023-12-31T05:00:00.000+00:00",
      "id" : 18,
      "softwarename" : "AWS13",
      "softwareprovider" : "AMAZON",
      "softwareprovidercontactemail" : "admin@amazon13.com",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/softwares/18"
        },
        "appSoftware" : {
          "href" : "http://localhost:8080/softwares/18"
        }
      }
    }, {
      "createdBy" : "System",
      "createdDate" : "2015-12-31T05:00:00.000+00:00",
      "lastModifiedBy" : "System",
      "lastModifiedDate" : "2023-12-31T05:00:00.000+00:00",
      "id" : 17,
      "softwarename" : "AWS12",
      "softwareprovider" : "AMAZON",
      "softwareprovidercontactemail" : "admin@amazon12.com",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/softwares/17"
        },
        "appSoftware" : {
          "href" : "http://localhost:8080/softwares/17"
        }
      }
    } ]
  },
  "_links" : {
    "first" : {
      "href" : "http://localhost:8080/softwares/search/softwarenameContaining?softwarename=&page=0&size=5"
    },
    "self" : {
      "href" : "http://localhost:8080/softwares/search/softwarenameContaining?softwarename=&page=0&size=5"
    },
    "next" : {
      "href" : "http://localhost:8080/softwares/search/softwarenameContaining?softwarename=&page=1&size=5"
    },
    "last" : {
      "href" : "http://localhost:8080/softwares/search/softwarenameContaining?softwarename=&page=4&size=5"
    }
  },
  "page" : {
    "size" : 5,
    "totalElements" : 21,
    "totalPages" : 5,
    "number" : 0
  }
}

本人已实现的try-catch方案 #

let myTBody2 = "";
myTBody2 += `<tr>`;
if (`${data._links.first.href}`) {
    myTBody2 += `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.first.href}')">First</button></td>`
}
if (`${data._links.self.href}`) {
    myTBody2 += `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.self.href}')">Self</button></td>`
}
try {
        myTBody2 += `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.prev.href}')">Previous</button></td>`
} catch (e) {
}
try {
        myTBody2 += `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.next.href}')">Next</button></td>`
} catch (e) {
}
if (`${data._links.last.href}`) {
    myTBody2 += `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.last.href}')">Last</button></td>`
}
document.getElementById('myTBody2').innerHTML = myTBody2;

更简洁的单行内联实现方案 #

可以利用ES6+的**可选链操作符?.**结合模板字符串的三元表达式，实现单行内联的条件渲染，无需拆分多个语句或使用try-catch：

myTBody2 += `
<tr>
  ${data._links.first?.href ? `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.first.href}')">First</button></td>` : ''}
  ${data._links.self?.href ? `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.self.href}')">Current</button></td>` : ''}
  ${data._links.prev?.href ? `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.prev.href}')">Previous</button></td>` : ''}
  ${data._links.next?.href ? `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.next.href}')">Next</button></td>` : ''}
  ${data._links.last?.href ? `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.last.href}')">Last</button></td>` : ''}
</tr>`;

说明：

• 可选链?.会安全访问嵌套属性：如果data._links.first不存在，表达式会直接返回undefined，不会抛出错误；
• 三元表达式condition ? trueValue : falseValue会在条件满足时渲染按钮的HTML，否则返回空字符串，相当于隐藏该按钮；
• 整个分页行的HTML可以写在一个模板字符串里，代码更紧凑易读。

内容的提问来源于stack exchange，提问作者Ajay Kumar