如何实现带变量名标识的TypeScript ILog函数？

方法一：模板字符串标签函数（推荐） #

利用ES6模板字符串的标签函数特性，同时获取表达式文本和对应的值，无需重复编写内容。

实现代码 #

function ILog<T>(strings: TemplateStringsArray, value: T): T {
  // 通过错误栈解析获取调用时的表达式文本
  const err = new Error();
  const stackLine = err.stack?.split('\n')[2] || '';
  // 匹配标签函数调用的插值表达式
  const exprMatch = stackLine.match(/ILog`\$\{(.+?)\}`/);
  const expr = exprMatch ? exprMatch[1] : 'unknown';
  
  console.log(`ILog(${expr}): ${value}`);
  return value;
}

使用方式 #

let a = false;
let b = false;
let c = false;

// 用模板字符串标签语法调用
ILog`${a}`;
ILog`${b}`;
ILog`${c}`;

输出结果 #

$ node file.js
ILog(a): false
ILog(b): false
ILog(c): false

方法二：兼容原调用语法（依赖Node.js环境） #

如果想保留ILog(a)的原始调用方式，可以通过解析错误栈提取参数表达式。

实现代码 #

const ILog = <T>(value: T): T => {
  const err = new Error();
  // 提取调用栈中ILog的调用行
  const stackLine = err.stack?.split('\n')[2] || '';
  // 匹配ILog(xxx)中的参数部分
  const exprMatch = stackLine.match(/ILog\((.*?)\)/);
  const expr = exprMatch ? exprMatch[1].trim() : 'unknown';
  
  console.log(`ILog(${expr}): ${value}`);
  return value;
};

使用方式 #

和原代码完全一致：

let a = false;
let b = false;
let c = false;

ILog(a);
ILog(b);
ILog(c);

注意事项 #

• 该方法依赖Node.js的错误栈格式，在浏览器或其他环境需要调整栈行索引或正则匹配规则。
• 支持复杂表达式，比如ILog(a + b)也能正确提取表达式文本。

内容的提问来源于stack exchange，提问作者Carlo Augusto Bagnoli Gomez