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

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

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

一个解决方案是使用短路或评估，如下所示：

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

为了更简洁，我可以将 duplicates/repetitions 包装在以前的函数解决方案中：

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

是否有更简洁的内置方式（语法）来为可选链接变量打印空字符串（而不是 undefined），而无需使用我之前提到的“不太简洁”的解决方案？

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;
}

（编辑）

或者，您可以为模板文字编写辅助函数 (tagged template)

/* 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`);

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

Concise way to print empty string fallback if optionally-chained variable is undefined in string literal

javascript

ecmascript-6

syntax