ag-Grid值格式化：箭头函数机制与参数默认值问题

1. 箭头函数未显式传入params却能获取到ag-Grid的params的原因 #

你实现的dateFormatter是一个高阶函数——它接收displayDateAndTime参数后，返回一个新的箭头函数。这个返回的箭头函数最终会被ag-Grid当作valueFormatter来调用，而ag-Grid在调用valueFormatter时，会自动把包含单元格数据的params对象作为第一个参数传递给这个箭头函数。

哪怕你没在箭头函数的参数列表里显式声明params（比如写成() => { ... }），只要你在函数内部使用了params变量，在非严格模式下可能会通过隐式作用域获取到，但这是不规范的写法，容易引发bug。正确的做法是显式声明参数：return (params) => { ... }，这样能明确接收ag-Grid传入的params。

2. 为displayDateAndTime设置默认值/替代传参方案 #

方案一：给高阶函数参数设默认值，确保调用时返回箭头函数 #

问题的核心是：当你不传参数时，如果直接写valueFormatter: GridFormatterService.dateFormatter，你是把高阶函数本身传给了ag-Grid，而非它返回的箭头函数。ag-Grid调用这个高阶函数时会传入params，导致返回的箭头函数被转为字符串显示。

修改静态方法，给参数设置默认值，同时确保调用时返回箭头函数：

// GridFormatterService.ts
static dateFormatter(displayDateAndTime: boolean = false) {
  return (params: any) => {
    if (!params.value) return '';
    const date = new Date(params.value);
    // 根据参数决定格式化方式
    return displayDateAndTime 
      ? date.toLocaleString() 
      : date.toLocaleDateString();
  };
}

列定义使用方式：

• 传参：valueFormatter: GridFormatterService.dateFormatter(true)
• 用默认值：valueFormatter: GridFormatterService.dateFormatter() —— 必须加括号，调用高阶函数返回箭头函数

方案二：利用ag-Grid列定义的自定义属性传参（更贴合ag-Grid原生逻辑） #

不需要高阶函数，直接把静态方法作为valueFormatter，参数从列定义的自定义属性中获取：

// GridFormatterService.ts
static dateFormatter(params: any) {
  // 从列定义中取参数，默认false
  const displayDateAndTime = params.columnDef.displayDateAndTime ?? false;
  if (!params.value) return '';
  const date = new Date(params.value);
  return displayDateAndTime 
    ? date.toLocaleString() 
    : date.toLocaleDateString();
}

列定义使用方式：

{
  headerName: '创建时间',
  field: 'createTime',
  valueFormatter: GridFormatterService.dateFormatter,
  // 自定义参数，可省略（省略时用默认值false）
  displayDateAndTime: true
}

这种方式避免了高阶函数的调用陷阱，完全符合ag-Grid的调用逻辑，不会出现显示函数代码的问题。

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