如何在未输入商品价格时隐藏货币符号？

你可以通过条件渲染或者自定义格式化函数处理这个需求，核心是判断价格是否为有效值（非空、大于0），只有满足条件时才执行货币格式化，否则不显示内容或提示文字。

方法一：直接在渲染时做条件判断 #

修改渲染逻辑，仅当价格存在且大于0时格式化显示，否则输出空字符串：

const [price, setPrice] = useState();

const formatter = new Intl.NumberFormat("id-ID", {
  style: "currency",
  currency: "IDR",
});

// 渲染部分
<p className="card-text">
  {price && price > 0 ? formatter.format(price) : ''}
</p>

方法二：封装自定义格式化函数 #

把价格格式化逻辑封装成独立函数，集中处理空值、0、空字符串等边界情况，代码更易维护：

const [price, setPrice] = useState();

const formatPrice = (targetPrice) => {
  if (targetPrice == null || targetPrice === '' || targetPrice <= 0) {
    return '';
  }
  return new Intl.NumberFormat("id-ID", {
    style: "currency",
    currency: "IDR",
  }).format(targetPrice);
};

// 渲染部分
<p className="card-text">{formatPrice(item.price)}</p>

可选：添加提示文字 #

如果需要给用户明确提示，比如“未设置价格”，可以把空字符串替换成对应文本：

{price && price > 0 ? formatter.format(price) : '未设置价格'}

内容的提问来源于stack exchange，提问作者sylvia_fe