能否在JavaScript模板字面量中声明变量并在同模板内复用？

不行，你写的这种代码在JavaScript里完全不合法，没法运行。

原因很简单：模板字面量的${}插值槽里只能放表达式，而let myvar = 55是变量声明语句，不是表达式，浏览器或Node.js会直接抛出语法错误。退一步说，就算语法允许，这个变量的作用域也仅限当前这个插值块，后面的${myvar}根本访问不到它。

如果想实现类似需求，有几种替代方案：

• 提前在模板外部声明变量
  这是最直接的方式，变量作用域覆盖整个模板：

let myvar = 55;
const tmp = tag`
 some random text, more text,
 even more text ${myvar}
`

• 用立即执行函数封装变量逻辑
  如果变量只和模板某部分相关，可以把声明和使用放在同一个插值里：

const tmp = tag`
 some random text, ${(() => {
  let myvar = 55;
  return `more text, even more text ${myvar}`;
})()}
`

• 自定义标签函数实现变量管理
  如果你在用自定义标签函数，可以自己实现一套变量作用域逻辑，让模板支持内部变量声明：

function tag(strings, ...values) {
  const scope = {};
  let result = strings[0];
  
  for (let i = 0; i < values.length; i++) {
    const val = values[i];
    // 约定变量声明的格式
    if (val?.type === 'var') {
      scope[val.name] = val.value;
      result += ''; // 变量声明不输出内容
    } else {
      // 优先从作用域取变量，没有则用原值
      const actualVal = scope[val] ?? val;
      result += actualVal;
    }
    result += strings[i + 1];
  }
  
  return result;
}

// 使用示例
const tmp = tag`
 some random text, ${{type: 'var', name: 'myvar', value: 55}} more text,
 even more text ${'myvar'}
`

你觉得这是缺失功能可以理解，但JavaScript模板字面量的设计定位就是轻量的字符串插值，不是完整的模板引擎。如果需要复杂的模板逻辑（变量声明、循环、条件判断等），不如直接用Handlebars、EJS这类专门的模板引擎。

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