空值合并运算符(??)失效原因及替代方案咨询（含GitHub Pages问题）

HTML 代码（节选） #

<label for="name">文件分隔符（可选，最多1个字符）:</label>

<input type="text" id="delimiter" name="delimiter" required
minlength="0" maxlength="1" size="1"><br>

JS 代码（节选） #

async function getRelease(idFiltered) {
  return fetch(`https://api.***.com/releases/${idFiltered}`, {
    headers: {
      'User-Agent': '***/0.1',
      'Authorization': `*** key=${KEY}, secret=${SECRET}`,
    },
  }).then(response => response.json())
    .then(data => {
      if (data.message === 'Release not found.') {
        return { error: `Release with ID ${idFiltered} does not exist` };
      } else {
        const { country = 'Unknown', genres = [], styles = [], year = 'Unknown' } = data;
        const artists = data.artists?.map?.(artist => artist.name);
        const barcode = data.identifiers.filter(id => id.type === 'Barcode').map(barcode => barcode.value);
        const catno = data.labels.map(catno => catno.catno);
        const descriptions = data.formats.map(descriptions => descriptions.descriptions);
        const format = data.formats.map(format => format.name);
        const labels = data.labels.map(label => label.name);
        const qty = data.formats.map(format => format.qty);
        const tracklist = data.tracklist.map(track => track.title);
        const formattedLabels = labels.map(label => label.name);
        const delimiter = document.getElementById("delimiter").value ?? "|";
        const formattedBarcode = barcode.join(delimiter);
        const formattedCatNo = catno.join(delimiter);
        const formattedGenres = genres.join(delimiter);
        const formattedStyles = styles.join(delimiter);
        const formattedTracklist = tracklist.join(delimiter);
        const preformattedDescriptions = descriptions.toString()
          .replace('"', '""').replace(/,/g, ', ');
        const formattedDescriptions = '"' + preformattedDescriptions + '"';
        console.log(data);

        return [idFiltered,
          artists,
          format,
          qty,
          formattedDescriptions,
          formattedLabels,
          formattedCatNo,
          country,
          year,
          formattedGenres,
          formattedStyles,
          formattedBarcode,
          formattedTracklist
        ];
      }
    });
}

现象 #

• 手动输入分隔符|时，输出正常，例如：

5,Datacide,CD,1,"Album, Limited Edition",,,RI 026|RI026,Germany,1995,Electronic,Abstract|Ambient|Downtempo,,Flashback Signal|Flowerhead|Deep Chair|So Much Light|Sixties Out Of Tune

• 不输入分隔符时，分隔符缺失，输出变成：

5,Datacide,CD,1,"Album, Limited Edition",,,RI 026RI026,Germany,1995,Electronic,AbstractAmbientDowntempo,,Flashback SignalFlowerheadDeep ChairSo Much LightSixties Out Of Tune

疑问 #

1. 为什么??空值合并运算符不起作用？
2. 使用||逻辑或运算符替代是否可行？
3. 切换到||后本地运行正常，但GitHub Pages上无法正确插入分隔符，该如何解决？

1. 为什么??不起作用？ #

你的猜测完全正确。当文本框为空时，document.getElementById("delimiter").value返回的是空字符串""，而非null或undefined。空值合并运算符??仅在左侧操作数是null或undefined时，才会返回右侧的默认值；空字符串属于"假值但非空值"的范畴，所以??不会触发默认值，最终使用空字符串作为分隔符，导致拼接时没有分隔效果。

2. 使用||替代是否可行？ #

完全可行。||是逻辑或运算符，只要左侧操作数是假值（包括空字符串""、0、false、null、undefined等），就会返回右侧的默认值。对于你的场景，当用户没输入分隔符时，空字符串会触发||返回"|"，正好符合需求。

需要注意：如果业务允许用户输入0或false这类假值作为分隔符，||会把它们也替换成默认值，但你的输入框限制了maxlength="1"，且分隔符是可选的，这种场景基本不会遇到问题，所以||是合适的替代方案。

3. GitHub Pages上无法正确插入分隔符的解决办法 #

本地正常、部署后异常通常和以下原因有关，可逐一排查：

• 缓存问题：GitHub Pages可能缓存了旧版本JS文件。尝试强制刷新页面（Windows/Linux按Ctrl+Shift+R，Mac按Cmd+Shift+R），或等待几分钟让缓存失效。
• 代码未正确提交：确认已将修改后的（使用||的）代码提交并推送到GitHub仓库的正确分支（通常是main或gh-pages分支），可去仓库代码页面检查对应JS文件是否更新。
• 输入框默认值兜底：给HTML输入框添加默认值，双重保障：

  <input type="text" id="delimiter" name="delimiter" required
  minlength="0" maxlength="1" size="1" value="|"><br>
  

• JS执行顺序问题：确保JS代码在DOM加载完成后执行，若代码放在<head>中，需包裹在DOMContentLoaded事件监听里：

  document.addEventListener('DOMContentLoaded', function() {
    // 你的getRelease函数及相关代码放在这里
  });
  

  避免因DOM未加载完成，document.getElementById("delimiter")获取不到元素，导致value为undefined。

内容的提问来源于stack exchange，提问作者double-happiness