在JavaScript中如何将undefined值替换为空字符串

架构老林

2026-10-5

问题原因

你的代码存在两处核心逻辑错误：

条件判断逻辑完全倒置：你初始化year为空字符串后，反而在product.year === undefined的情况下把year赋值为undefined，和预期需求完全相反
自行定义的year变量没有实际使用：模板字符串渲染年份时依然直接调用了原始的product.year，自然会输出undefined

修复方案

方案1：修正原有逻辑

调整判断条件，同时把模板里的年份替换成你定义的year变量即可：

product.photos.map(() => {
    let year = "";
    // 只有年份存在时才赋值，否则保持初始空字符串
    if (product.year !== undefined) {
        year = product.year;
    }
    // Then output the data
    output += `
            <div class="card">
              <img class="img-fluid" src="${product.photos[0].text}" alt="${product.model}" />
              <h3>${year} ${product.manufacturer} ${product.model}</h3>
              <p>${product.hours} hours</p>
              <a href='https://used.battlefieldequipment.ca/en/${product["group-code"]}/${product["serial-number"]}' class="btn btn-primary">View Details</a>
            </div>         
        `;
});

方案2：更简洁的空值合并写法

不需要单独定义year变量，直接在模板中用空值合并运算符??处理即可，代码更精简：

product.photos.map(() => {
    output += `
            <div class="card">
              <img class="img-fluid" src="${product.photos[0].text}" alt="${product.model}" />
              <h3>${product.year ?? ''} ${product.manufacturer} ${product.model}</h3>
              <p>${product.hours} hours</p>
              <a href='https://used.battlefieldequipment.ca/en/${product["group-code"]}/${product["serial-number"]}' class="btn btn-primary">View Details</a>
            </div>         
        `;
});