檢查 null 或 jQuery 中的未定義值

Question

我真的對這個問題感到瘋狂......即使我已經閱讀了大量我無法弄清楚的主題......對於已經討論過的主題，我提前感到抱歉，但我需要一個具體的幫助。

我需要做的：檢查變量是否為空； 在這種情況下打印徽章。

遠程框架是 Codeigniter 3，我確定代碼，服務器腳本返回 JSON 格式的空變量（infos）和未定義變量（crid）。

Jquery 中用於打印徽章的文字模板如下：

$(`
    
    <p class="badges">
    ${(() => {
      if (data.pictures[i].status == '1'){
        return `<span class="badge badge-success">Published</span>`
      } else {
        return `<span class="badge badge-warning">Hidden</span>`
      }
    })()}
    ${(() => {
        if (data.pictures[i].infos){
            console.log('Infos are ' + data.pictures[i].infos);
            return `<span class="badge badge-info">Info</span>`
        }
    })()}
    ${(() => {
        if (typeof data.pictures[i].crid !== 'undefined' && data.pictures[i].crid !== null){
            return `<span class="badge badge-primary">Credit</span>`
        }
    })()}
    </p>
`)

第一個條件代碼工作正常（data.pictures[i].status），第二個和第三個讓我抓狂。 第二個條件代碼（ data.pictures[i].infos ）在瀏覽器中返回 undefined ...服務器腳本返回的 JSON 代碼中不存在該變量。 第三個條件代碼（ data.pictures[i].crid ）在瀏覽器中返回 undefined ... JSON 數據中的變量存在但為空。

如果變量為空或不存在，我想擺脫瀏覽器中的未定義......如果它有一個值，我想打印徽章。

當然，我做了無休止的測試來替換條件代碼……但有時即使 JSON 變量為空，我也會得到徽章……否則我會得到未定義的。

非常感謝任何幫助或提示

Answer 1

您的函數只是一個 if，如果它們不 go 進入 if，則不會返回任何內容。 所以這意味着它返回undefined 。

您需要從函數中return '' 。

${(() => {
    if (data.pictures[i].infos){
        console.log('Infos are ' + data.pictures[i].infos);
        return `<span class="badge badge-info">Info</span>`
    }
    return '';
})()}

就個人而言，我只會使用三元

const status = data.pictures[i].status == '1' ? 
    '<span class="badge badge-success">Published</span>' : 
    '<span class="badge badge-warning">Hidden</span>'
const info = data.pictures[i].infos ? 
    '<span class="badge badge-info">Info</span>' : ''
const crid = (typeof data.pictures[i].crid !== 'undefined' && data.pictures[i].crid !== null) ? 
    '<span class="badge badge-primary">Credit</span>' : ''

$(`<p class="badges">
    ${status}
    ${info}
    ${crid}
</p>`)