如何在JavaScript中用变量调用函数替代IF语句绘制Canvas字符

完全理解你的痛点——一堆if/else或者switch不仅写起来繁琐，以后要加新字母、改逻辑也特别费劲。其实你可以用对象映射的方式，把字母和对应的绘制函数关联起来，这样就能通过变量直接调用函数，彻底摆脱冗长的条件判断。

具体实现步骤： #

1. 先创建一个映射对象，把每个字母作为键，对应的绘制函数作为值：

// 把A到X的绘制函数统一映射到对象中
const letterDrawers = {
  A: draw_A,
  B: draw_B,
  C: draw_C,
  // ... 依次补充到对应X的函数
  X: draw_X
};

2. 遍历字符串时，直接通过字母从对象中取出函数并调用：

let theText = "String";

for (let i = 0; i < theText.length; i++) {
  // 统一转成大写，避免小写字母匹配不到对应的函数
  const char = theText[i].toUpperCase();
  // 从映射对象中获取对应的绘制函数
  const drawFunction = letterDrawers[char];
  
  // 检查函数是否存在，防止字符串里出现A-X以外的字符导致报错
  if (drawFunction) {
    // 这里可以根据需求传递位置参数，比如每个字母的x/y坐标，避免重叠
    drawFunction();
    // 示例：假设每个字母宽度为50，每次绘制后偏移x坐标
    // ctx.translate(50, 0);
  }
}

为什么这比条件语句更好？ #

• 扩展性强：以后要加新字母（比如Y/Z），只需要在letterDrawers里加一行键值对，不用动循环逻辑；
• 效率更高：对象的属性查找是O(1)的，比一堆if/else的线性查找更高效；
• 代码更整洁：把函数关联逻辑和遍历逻辑分开，可读性和维护性都提升不少。

另一种可选方案（不推荐但可行）： #

如果你的绘制函数都在全局作用域里，也可以用模板字符串拼接函数名，通过window对象调用：

for (let i = 0; i < theText.length; i++) {
  const char = theText[i].toUpperCase();
  const drawFunction = window[`draw_${char}`];
  if (drawFunction) drawFunction();
}

不过这种方式不推荐，因为依赖全局变量，容易和其他代码冲突，而且不如对象映射直观可控。

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