技术问询：能否在JavaScript中返回多个模板字面量？附代码示例

嘿，这个问题挺典型的！先直接说结论：你当前的写法不会返回两个模板字面量，咱们来一步步理清楚为什么，以及怎么实现你想要的效果。

首先看你写的这段代码：

wrapperClass() { 
  return `masonry--${masonryData.direction}`, `masonry--${masonryData.theme}`; 
}

这里的逗号是JavaScript的逗号运算符，它会依次执行每个表达式，但只会返回最后一个表达式的结果。也就是说，你的代码最终只会返回masonry--${masonryData.theme}，第一个模板字面量会被默默忽略掉，完全达不到“返回多个”的目的。

那如果确实需要返回多个由模板字面量生成的字符串，有几种常见的实现方式：

1. 返回一个数组（最直接的多值返回方式） #

如果希望两个字符串作为独立的元素被返回，直接用数组包裹它们就行：

wrapperClass() {
  return [`masonry--${masonryData.direction}`, `masonry--${masonryData.theme}`];
}

调用这个方法后，你会得到一个包含两个类名字符串的数组。如果是要给DOM元素添加类，可以后续用join(' ')把数组转成空格分隔的字符串，或者直接展开数组：

const classes = wrapperClass();
element.classList.add(...classes); // 展开数组一次性添加多个类

2. 返回拼接后的单个字符串（适合给元素加类的场景） #

如果你的目标是生成一个包含多个类名的字符串（比如用于元素的class属性），直接把两个模板字面量拼接起来更高效：

wrapperClass() {
  return `masonry--${masonryData.direction} masonry--${masonryData.theme}`;
}

这样返回的就是一个空格分隔的类名字符串，直接赋值给元素的className或者用classList.add都很方便。

3. 返回一个对象（带标识的多值返回） #

如果需要给这两个值加上明确的标识，方便后续代码区分使用，可以返回一个对象：

wrapperClass() {
  return {
    directionClass: `masonry--${masonryData.direction}`,
    themeClass: `masonry--${masonryData.theme}`
  };
}

调用后可以通过属性名精准访问对应的值：

const classObj = wrapperClass();
console.log(classObj.directionClass); // 拿到方向对应的类名

总结一下：JavaScript的return语句只能返回单个值，但你可以把多个模板字面量的结果包装在数组、对象里，或者直接拼接成一个字符串，以此来实现“返回多个内容”的需求~

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