Let's say I have this string literal use case:

```
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

```

The problem is when any of props' keys is undefined, it prints undefined. I want it to print empty string instead.

One solution to this is to use *short-circuit OR evaluation* like this:

```
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

```

Or a better solution (to avoid extra spaces), to use previous solution with *short-circuit AND evaluation* like this:

```
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

```

To make it more concise, I can wrap duplicates/repetitions in previous solution to a function:

```
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

```

Is there a more concise built-in way (syntax) to print empty string (instead of `undefined`) for optionally-chained variables without using the previous "not-so concise" solutions I mentioned?