检查 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>`)