如何让函数调用中的多个字符串被识别为单个参数传入？

你有几种可行的方式来实现这个需求，具体可以根据你的习惯选择：

方式1：用数组包裹两个类名作为单个参数 #

修改调用语句，把两个类名放进一个数组里，这样就变成了单个参数传入：

clickFun(['fas', 'fa-check-circle']);

然后更新函数定义，让它能处理数组类型的参数：

function clickFun(addCls) {
  // 先判断参数是否为数组
  if (Array.isArray(addCls)) {
    // 遍历数组，逐个添加类名
    addCls.forEach(className => Target.classList.add(className));
  } else {
    // 兼容原来单个类名的调用场景
    Target.classList.add(addCls);
  }
}

这种方式逻辑清晰，类名之间不会因为空格产生歧义，适合类名可能包含特殊字符的场景。

方式2：把两个类名拼接成单个空格分隔的字符串 #

如果你习惯用字符串的方式，可以把两个类名用空格连起来，作为单个参数传递：

clickFun('fas fa-check-circle');

然后更新函数来拆分这个字符串并添加类名：

function clickFun(addCls) {
  // 按空格分割成类名数组，同时过滤掉空字符串（避免多个空格的情况）
  const classNames = addCls.split(' ').filter(cls => cls.trim() !== '');
  classNames.forEach(className => Target.classList.add(className));
}

这种写法更简洁，而且HTML类名本身就不允许包含空格，所以这个限制完全安全。

额外补充：如果允许调整函数参数定义 #

其实classList.add()本身就支持传入多个类名参数，如果你愿意修改函数的参数写法，原来的调用语句甚至不用改就能正常工作：

function clickFun(...addCls) {
  // 用展开运算符把参数数组传给classList.add
  Target.classList.add(...addCls);
}

这里的...addCls是剩余参数语法，会把所有传入的参数收集成一个数组，再用展开运算符...把数组元素作为单个参数传给classList.add()，完美适配你原来的调用方式。

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