Javascript условно в строке шаблона

Question

Есть ли способ сделать условие в строке шаблона?

Например:

let x, y;

x = ...
y = ...

let templateString = `${x} ${y}`;

Я не хочу, чтобы пространство в строке шаблона после x выводилось, если y не определено. Как мне добиться этого с помощью строки шаблона?

Это единственный способ сделать это?

 let templateString = `${x}${y ? ' ' + y : ''}`;

Answer 1

Вероятно, в этом небольшом примере это излишне, но функции шаблона с тегами обеспечивают хорошее общее решение, которое обеспечивает удивительную гибкость при сохранении чистоты строк шаблона. Например, вот тот, который удалит текст, предшествующий неопределенной переменной в целом:

function f(str ,...variables){
  return variables.reduce((res, v, i) => v ? res + str[i] + v: res, '')
}
let x, y, z;

x = "test"
y = "test2"

// both defined
console.log(f`${x} + ${y}`)

// only one:
console.log(f`${x} + ${z}`)

// random text:
console.log(f`${x} with ${z} and ${y}`)

Так как он передает все функции, вы можете выполнять практически любую логику, какую пожелаете, при этом оставаясь читаемыми строками. На полпути вниз по странице MDN есть литералы шаблонов .

.

Answer 2

Еще лучше

let templateString = `${x} ${y}`.trim();

Answer 3

Вы также можете использовать функции внутри выражений

Вот пример этого

let x, y;

x = 'test'
y = undefined;

let templateString = `${x} ${y}`;

function fn(value1,value2) { return value2? (value1 + ' ' + value2) : value1 }
console.log('when undefined =',`${fn(x,y)}`);


x = 'test'
y = 'test1';

console.log('when not undefined = ',`${fn(x,y)}`);

ссылка

Answer 4

Альтернативный, немного более краткий подход с использованием вложенных литералов шаблона.

`${x}${y ? ` ${y}` : ''}`

Answer 5

технически вы можете вложить эти строки шаблона, это не красиво, но это работает

let templateString = `${y ? `${x} ${y}`: `${x}`}`;

Я бы использовал решение из первого комментария.

Answer 6

Будет проще читать, если вы не добавите логику в шаблон:

let templateString = y ? `${x} ${y}` : `${x}`;

Answer 7

А как же

let x,y;

const templateString = [x,y].filter(a => a).join(' ');

Что он делает, что сначала помещает ваши свойства в массив [].

Затем он фильтрует неопределенные элементы.

Последнее создает строку массива, используя join с пробелом.

Таким образом, либо x, либо y может быть неопределенным.