如何修改Figlet-js函数使其直接返回文本而非作用于DOM元素

问题分析 #

你使用的简化版Figlet脚本原本是jQuery插件形式，通过回调将生成的文本插入DOM元素。但你希望改成直接调用figlet("text", "font")获取文本并存入变量，自己编写的函数无法实现需求，核心原因是**Figlet.write是异步执行逻辑**——你在回调函数里return str仅能给回调本身返回值，外层的figlet函数早已执行完毕，根本无法捕获这个结果。

解决方案 #

方案1：用Promise封装（推荐，适配异步逻辑） #

将figlet函数封装为返回Promise的形式，通过async/await或.then()获取生成的文本：

function figlet(text, font) {
  return new Promise((resolve) => {
    Figlet.write(text, font || $.fn.figlet.defaultFont, function(str) {
      resolve(str);
    });
  });
}

使用示例：

// 方式1：在async函数内用await
async function getFigletContent() {
  var test = await figlet("text", "drpepper");
  // 这里可以对test做后续操作
  console.log(test);
}

// 方式2：用.then()链式调用
figlet("text", "drpepper").then(function(test) {
  console.log(test);
});

方案2：同步执行检查（视脚本支持情况） #

如果该简化版Figlet的字体数据已提前加载完成、支持同步生成文本，你可以查看Figlet对象是否提供了同步生成的方法。若没有，只能采用Promise方案——因为原Figlet.write的设计依赖异步回调。

原代码失效原因 #

你编写的figlet函数中，Figlet.write触发回调是异步行为，外层函数在调用Figlet.write后直接结束，没有返回任何值；而回调里的return str仅作用于回调函数内部，和外层figlet函数的返回值完全无关，因此无法拿到生成的文本。

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