如果字符串文字中未定义可选链接变量，则打印空字符串后备的简洁方法

Question

假设我有这个字符串文字用例：

function getClassNames(props){
    my_classNames = `class-nameA class-nameB ${props?.one} ${props?.two} class-nameC`;
    return my_classNames;
}

console.log(getClassNames({one: 'class-name-one', two: 'class-name-two'}))
  // prints: class-nameA class-nameB class-name-one class-name-two class-nameC
console.log(getClassNames({two: 'class-name-two'}))
  // prints: class-nameA class-nameB undefined class-name-two class-nameC
console.log(getClassNames())
  // prints: class-nameA class-nameB undefined undefined class-nameC

问题是当任何 props 的键未定义时，它会打印 undefined。我希望它打印空字符串。

解决此问题的一种解决方案是使用短路或评估，如下所示：

function getClassNames(props){
    my_classNames = `class-nameA class-nameB ${props?.one || ''} ${props?.two || ''} class-nameC`;
    return my_classNames;
}

console.log(getClassNames())
  // prints: class-nameA class-nameB   class-nameC

或者更好的解决方案（以避免额外的空格），使用之前的解决方案和短路与评估像这样：

function getClassNames(props){
    my_classNames = `class-nameA class-nameB${props?.one && ' '+props?.one || ''}${props?.two && ' '+props?.two || ''}class-nameC`;
    return my_classNames;
}

console.log(getClassNames())
  // prints: class-nameA class-nameB class-nameC

为了使其更简洁，我可以将以前的解决方案中的重复项/重复包装到函数中：

function getClassNames(props){
    my_classNames = `class-nameA class-nameB${concatWithSpace(props?.one)}${concatWithSpace(props?.two)}class-nameC`;
    return my_classNames;
}

function concatWithSpace(str){
    return str && ' '+str || '';
}

console.log(getClassNames())
  // prints: class-nameA class-nameB class-nameC

是否有更简洁的内置方式（语法）来打印空字符串（而不是未定义）对于可选链变量而不使用前面的我提到的“不太简洁”的解决方案？

Answer 1

不要使用模板字符串，而是使用数组并对其进行一些处理：

function getClassNames(props){
    const my_classNames = ['class-nameA', 'class-nameB', props?.one, props?.two, 'class-nameC'];
    return my_classNames.filter(Boolean).join(' ');
}

这也适用于开头或结尾的可选部分或空数组。

Answer 2

也许破坏props并分配默认值？

像这样：（

function getClassNames({ one = '', two = '' }){
    my_classNames = `class-nameA class-nameB ${one} ${two} class-nameC`;
    return my_classNames;
}

编辑）

或，您可以为模板文字编写助手函数（标记的模板）

/* types textContent(stringList: TemplateStringsArray, ...valueList: unknown[]) */
function classString(stringList, ...valueList) {
    return stringList.reduce((text, string, i) => (
        text + string + (valueList[i] || '')
    ), '').replace(/ +/g, ' '); // (optional) replace multiple spaces with single
}

var one = undefined;
var two = undefined;
var three = "something";

console.log(classString`class-nameA class-nameB ${one} ${two} ${three} class-nameC`);