ArcGIS JavaScript API 4.x：如何用PopupTemplate格式化货币字段？

你当前的代码错误在于：在fields类型的弹窗内容中，attributes属性无法直接实现字段值的格式化替换，正确的做法是通过fieldInfos数组中对应字段的format配置来完成货币格式化，或者使用函数式/模板字符串的内容类型。

方法一：使用API原生字段格式化配置（推荐） #

通过fieldInfos里的format属性配置货币格式，这是ArcGIS JS API官方推荐的方式，支持千分位逗号、货币符号、小数位数等设置：

// 定义字段信息，为cost字段配置货币格式化
const myfields = [
  {
    fieldName: "cost",
    label: "成本",
    format: {
      type: "currency", // 指定格式类型为货币
      currencySymbol: "$", // 设置美元符号
      digitSeparator: true, // 启用千分位逗号分隔
      places: 2 // 保留两位小数，可根据需求调整
    }
  },
  // 可添加其他需要展示的字段
];

// 创建PopupTemplate
const myPopup = new PopupTemplate({
  title: "MyPopup",
  content: [{
    type: "fields",
    fieldInfos: myfields
  }]
});

方法二：使用函数式/模板字符串内容（灵活定制） #

如果需要更灵活的格式化逻辑，可以使用text类型的内容，结合模板字符串或自定义函数实现：

模板字符串方式 #

const myPopup = new PopupTemplate({
  title: "MyPopup",
  content: [{
    type: "text",
    text: "成本: ${Number($feature.cost).toLocaleString('en-US', { style: 'currency', currency: 'USD' })}"
  }]
});

自定义函数方式 #

const myPopup = new PopupTemplate({
  title: "MyPopup",
  content: (feature) => {
    const cost = feature.attributes.cost;
    // 使用Intl.NumberFormat实现标准货币格式化
    const formattedCost = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(cost);
    return `<p>成本: ${formattedCost}</p>`;
  }
});

这两种方法都能正确显示带美元符号和千分位逗号的成本值，替代你之前无效的attributes配置写法。

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