为何Vue模板中的空字符串无法触发空值合并运算符（??）？

这不是Vue的问题，而是JavaScript空值合并运算符??的设计特性：它只将null和undefined判定为“空值”，会触发右侧的备选值；而空字符串""、数字0、布尔值false这类属于“假值但非空值”，??会直接保留它们，不会执行右侧逻辑。

看你给出的例子：

<div>{{ "" ?? "empty string is not truthy" }}</div>

因为""既不是null也不是undefined，所以??会直接返回空字符串，这完全符合运算符的预期行为。

你改用三元运算符能生效，是因为三元运算符是基于布尔真值转换判断的：空字符串转为布尔值是false，所以会走: 后的分支：

<div>{{ "" ? "string empty" : "string not empty" }}</div>

这里会输出string not empty，和??的判断逻辑本质不同。

如果你的场景需要把空字符串也当作“空”处理，有几种方案：

• 用更精确的条件判断：

  <div>{{ value === "" ? "empty string is not truthy" : value }}</div>
  

• 若不需要保留0、false这类假值，也可以用逻辑或||：

  <div>{{ "" || "empty string is not truthy" }}</div>
  

• 定义Vue过滤器批量处理：

  // 全局注册过滤器
  Vue.filter('handleEmptyString', function(val) {
    return val === "" ? "empty string is not truthy" : val;
  })
  

  模板中使用：

  <div>{{ "" | handleEmptyString }}</div>
  

内容的提问来源于stack exchange，提问作者Artur Müller Romanov