JS技术问询：如何让变量名看似含空格、函数模拟原生函数显示

刚好碰到过这两个有意思的JS问题，给你分享下实用的实现方案：

一、让变量名看起来包含空格 #

JavaScript的标识符规则不允许直接用半角空格当变量名，但我们有两种方式实现“视觉上带空格”的效果：

1. 使用Unicode空白字符 #

JS允许使用部分Unicode字符作为标识符，比如全角空格（\u3000）、非断空格（\u00A0），这些字符在视觉上是空格，但会被JS识别为合法的变量名组成部分：

// 全角空格示例
const 我的\u3000变量 = "测试内容";
console.log(我的\u3000变量); // 输出：测试内容

// 非断空格示例
const 你的\u00A0变量 = "另一个测试";
console.log(你的\u00A0变量); // 输出：另一个测试

小提醒：这类变量名输入起来不太方便（通常需要复制Unicode字符），而且团队协作时可能造成困惑，除非特殊场景不建议用。

2. 用对象属性名实现“真实空格” #

如果只是需要一个带空格的“键”来存储值，直接用对象的字符串属性名是最稳妥的方案，完全符合JS语法，可读性也高：

const userInfo = {
  "用户 姓名": "张三",
  "订单 编号": "20240501001"
};
console.log(userInfo["用户 姓名"]); // 输出：张三

二、模拟原生函数的[native code]显示效果 #

你当前得到的function x() { [native, code] }，是因为函数体里的[native, code]是两个未定义的变量组成的数组，当函数被toString时，会把变量名保留下来，形成带逗号的格式。要消除逗号并完美模拟原生函数的显示，核心思路是重写函数的toString方法：

function x() {
  // 这里可以写你的实际业务逻辑，不影响显示效果
  console.log("我是自定义函数，但看起来像原生的");
}

// 覆盖toString方法，返回原生函数的格式字符串
x.toString = function() {
  return "function x() { [native code] }";
};

// 测试效果
console.log(x); // 输出：function x() { [native code] }
console.log(x.toString()); // 同样输出：function x() { [native code] }

如果需要批量处理多个函数，可以封装成一个工具函数：

function makeNativeLike(fn, customName = fn.name) {
  fn.toString = () => `function ${customName}() { [native code] }`;
  return fn;
}

// 使用示例
const myAlert = makeNativeLike(function() {
  alert("这是自定义的alert");
}, "alert");

console.log(myAlert); // 输出：function alert() { [native code] }

为什么这个方法有效？因为原生函数的toString是JS引擎内置的方法，固定返回包含[native code]的字符串；而我们自定义的函数默认会返回自身的源码，所以只要替换它的toString行为，就能完美模拟原生函数的显示效果。

内容的提问来源于stack exchange，提问作者Eliran Pe'er