javascript - 为什么 await eval ('` ${await foo ("xxx") }`' ) 抛出错误

Question

在我因为使用​​ eval() 而受到抨击之前...是的，我知道 eval === 是邪恶的，来自魔鬼，永远不应该使用。这不是这里的问题。信不信由你，我实际上有一个有效的真实案例，其中使用 eval 非常有意义，事实上，没有其他方法可以达到我需要的结果。

下面是包含 4 个案例的代码片段。前三个完全按预期工作。前两个调用模板文字中的异步函数。第三个和第四个将模板文字存储为字符串，然后评估字符串。在没有使用 await 的情况下(第 3 种)，如预期的那样返回了 promise。然而，问题是案例 4。它抛出一个错误，对于我来说，我无法弄清楚为什么，也不知道如何解决它。

我希望比我聪明的人可以想出一个解决方案，以便案例 4 仍然可以在不抛出错误的情况下进行评估(一等奖)，或者解释为什么它不起作用/不能完成。

async function foo(str) {
    return str.toUpperCase();
}

async function bar() {
    const str1 = `${foo("xxx")}`;

    console.log("STR1:", str1);
    // Output: STR1: [object Promise]

    const str2 = `${await foo("xxx")}`;

    console.log("STR2:", str2);
    // Output: STR2: XXX

    const str3 = '`${foo("xxx")}`';

    console.log("STR3:", await eval(str3));
    //Output STR3: [object Promise]

    const str4 = '`${await foo("xxx")}`';

    console.log("STR4:", await eval(str4));
    // undefined:1
    // `${await foo("xxx")}`
    //    ^^^^^^
    // Output: SyntaxError: Missing } in template expression
}

bar();

Answer 1

另一种让它工作的方法，基本上是通过使用 tagged templates 将 promise 的等待与字符串的构造(某种程度上)分开说明如下:

async function foo(str) {
    return str.toUpperCase();
}

async function asyncFooTmpl(strings, asyncExpr) {
  return `${strings[0]}${await asyncExpr}${strings[1]}`;
}

async function bar() {
    const str1 = `${foo("xxx")}`;

    console.log("STR1:", str1);
    // Output: STR1: [object Promise]

    const str2 = `${await foo("xxx")}`;

    console.log("STR2:", str2);
    // Output: STR2: XXX

    const str3 = '`${foo("xxx")}`';

    console.log("STR3:", await eval(str3));
    //Output STR3: [object Promise]

    const str4 = 'asyncFooTmpl`${foo("xxx")}`';

    console.log("STR4:", await eval(str4));
    //Output STR4: XXX
}

bar();

这会将等待 promise 的所有权从 bar 转移到 asyncFooTmpl，从而允许生成字符串。

也就是说，这将需要您为您拥有的每个模板编写函数，或者创建一个函数来使标记模板的处理更易于管理。

既然你接受了这个，并结合我的评论写了你自己的答案，我创建了 a fiddle of a somewhat more improved example如果你好奇的话。