Javascript？运算符：如何传递多个参数

Question

编辑：我必须使这项工作在IE11上

我有以下代码：

span.classList.add(span.textContent === '\ ' ? 'char' : 'spaceChar')

它工作正常，但我想添加2个类以防万一，如下所示：

span.classList.add(span.textContent === '\ ' ? 'char','animated' : 'spaceChar')

我尝试使用方括号，但没有运气：

span.classList.add(span.textContent === '\ ' ? ('char','animated') : ('spaceChar'))

有什么办法可以做到这一点？谢谢

Answer 1

您可以classList.add通过传递其他参数来添加多个类，因此一种选择是使用数组作为条件表达式，并将其传播到.add调用中：

span.classList.add(
  ...(span.textContent === '\ ' ? ['char','animated'] : ['spaceChar'])
);

这相当于

if (span.textContent === '\ ') {
  span.classList.add('char', 'animated');
} else {
  span.classList.add('spaceChar');
}

第一个版本可能更短，但是IMO第二个版本更具可读性。

IE11 不支持的多个参数classList.add，因此，即使您使用Babel（这是将ES6 +语法转换为ES5的常用工具），因此也必须分别添加每个类：

if (span.textContent === '\ ') {
  span.classList.add('char');
  span.classList.add('animated');
} else {
  span.classList.add('spaceChar');
}

对于大量的类名，您还可以使用一个辅助方法，该方法接受一个数组并对其进行调用.add。